Basically my search returns search results in spans, then when one is clicked, a new span is added to another div with a select input and hidden input so all the selected features can be posted as an array.
My question is, $(this).html() now includes a span of class alias_span. Which I don't want to appear in the new span. How do I remove it before inserting the contents of the clicked span into the new span
$(".minisearch_res").live('click', function() {
// when a search result is clicked we disable the submit button,
// append a span to the left column with an id,
// a select input to select standard/optional and
// a hidden field with the required information to save and something to
// show the user
var id = $(this).attr('id');
var html = "<span class= \"added_result_cont\" id=\"" + id + "_cont\">";
html += "<select name='" + id + "_sel'>";
html += "<option value=\"none\" selected=\"selected\"></option>";
html += "<option value=\"std\">Standard</option>";
html += "<option value=\"opt\" >Optional</option>";
html += "</select>";
html += "<span id= \"" + id + "\" class=\"added_result\">";
html += "<input type=\"hidden\" name=\"selectedfeat[]\" value=\"" + id + "\">";
html += $(this).html() + "</span></span>";
$('#div_apply_to').append(html);
$(this).remove();
$('#search_input').trigger('keyup');
$("input[type=submit]").attr("disabled", "disabled");
});
Update: here's the html of the span
<span class="minisearch_res" id="opt_1">Anti-Lock Brakes<br><span style="padding-left:20px" class="alias_span"><i>abs</i></span><br></span>
<div></div>
Add it to the dom, then remove it.
var htm = (
'<span class="foo">foo</span>' +
'<span>bar</span>' +
'<span>bar</span>' +
'<span>bar</span>' +
'<span>bar</span>'
);
var $el = $("div").append(htm);
console.log($el.html());
$el.find('.foo').remove();
console.log($el.html());
http://jsfiddle.net/chovy/w2HdE/
Got a tidy cross browser solution, which I'm very proud of :)
var temp = $(this);
temp.children('.alias_span').remove();
$('#div_apply_to').append("...html..." + temp.html() + "...html...");
inspiration came from here:
Remove element from Ajax Response
Related
Please refer to this link
http://aspsolution.net/Code/5/5215/How-to-loop-through-ViewBag-List-in-Jquery/#
I followed what is written in the website. However the Json.Result doesn't appear. I tried to include this one (#using Newtonsoft.Json) in the html but it's still not appearing. Why is that? Is there any solution for this?
This is my script:
fillDatatable();
function fillDatatable() {
var cart = #Html.Raw(Json.Result(#ViewBag.cart));
alert(cart.Items.ItemID);
}
Edited:
if (PurchaseOrder != "") {
var tableHTML = '';
$.each(PurchaseOrder, function (index, value) {
tableHTML += "<tr>";
tableHTML += "<td>" + value.items.itemID + "</td>";
tableHTML += "<td>" + value.items.itemModelDescription + "</td>";
tableHTML += "<td>";
tableHTML += "<input id='UnitPrice" + value.items.ItemID + "' class='form-control b-r-xl text-right' value='" + value.items.itemUnitPrice + "' oninput='return change_unitprice('" + value.items.itemID + "')' />";
tableHTML += "</td>";
tableHTML += "<td>";
tableHTML += " </tr>";
});
$("#TableRecords").html(tableHTML);
}
See my HTML inside the loop where you can see change_unitprice function. I'm trying to pass the value of an id there, but according to the result of console it is undefined? Why is that?
The example you are referencing does not contain the code you included to the question. It describes how to use Json.Encode() to obtain data from the ViewBag field. Possible problems why your code doesn't work are:
Using not defined the cart field.
Using the Items property that does not defined.
Trying to work with HTML document that does not loaded yet.
Therefore, use function from this example as is:
<script>
$(document).ready(function(){
var StockList =#Html.Raw(Json.Encode(#ViewBag.StockList));
if (StockList != '') {
var tableHtml;
$.each(StockList, function( index, value ) {
tableHtml +="<tr><td>" + value.stockId + "</td><td>" + value.StockName + "</td><td>" + value.StockPrice + "</td></tr>";
});
$("#output").html(tableHtml);
}
})
</script>
If it does not work (probably because of the jquery disable by Layout = null; line in the Index.cshtml ) add the following line after the <head> tag:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
For additional information see the following post: https://stackoverflow.com/a/10779161/6630084
I think the simplest method that works for complex object would be like this:
#Html.Raw(Json.Encode(ViewBag.cart))
i want to get the values in the text box and it will show in the table
please help! i really cant figure out how to do it i tried looking at samples but i could not understand how to use it properly and incorporate it with this code
Change the $(document).ready method to
$(document).ready(function(){
$("#addProduct").click(function(){
prdct1Val = $('#exampleInputProduct1').val();
Desc1Val = $('#exampleInputDesc1').val();
Qty1Val = $('#exampleInputQty1').val();
Price1Val = $('#exampleInputPrice1').val();
$("#listProduct tr").last().after(''+prdct1Val +''+Desc1Val+''+Qty1Val+''+Price1Val+'');
/* how do i put the value in the text field in this table? */
});
});
You can get the value from any input with the .val() function. For example:
var product = $('#exampleInputProduct1').val();
So just use that when building your table row. For example:
$("#addProduct").click(function(){
var html = '<tr>';
html += '<td>' + $('#exampleInputProduct1').val() + '</td>';
html += '<td>' + $('#exampleInputDesc1').val() + '</td>';
html += '<td>' + $('#exampleInputQty1').val() + '</td>';
html += '<td>' + $('#exampleInputPrice1').val() + '</td>';
html += '</tr>';
$('#listProduct tr').last().after(html);
});
I am developing an application for selecting the PASS/FAIL option for the value generated from the json data.
My problem is that I am not able to select value per row.The selected value applies in all rows.
HTML:
<table id="records" cellspacing="0">
JQUERY:
(function () {
var url = "http://www.filltext.com/?callback=?";
$.getJSON(url, {
'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
})
.done(function (data) {
$.ajaxSetup({
cache: false
});
var t;
$.each(data, function (i, item) {
var html =
"<td>" + item.fname + "</td>" +
"<td>" + item.lname + "</td>" +
"<td>" + item.tel + "</td>" +
"<td><input type='text' name='PASS' placeholder='" + i + "' /></td>" +
"<td><input type='radio' value='Pass' name='PASS'/>PASS</td>" +
"<td><input type='radio' value='Fail' name='PASS'/>FAIL</td>";
$("<tr/> </table>").html(html).appendTo("#records");
});
$('input[name="PASS"]').on('change', function () {
$('input[type="text"]').val($(this).val());
});
});
})();
JSFIDDLE: http://jsfiddle.net/rutvij111/hUAWF/
working fiddle
first you need to add the same name only to the two radiobuttons that you want to associate (pass and fail) for each row
something like this:
"<td><input type='radio' value='Pass' name='PASS" + i + "'/>PASS</td>"+
"<td><input type='radio' value='Fail' name='PASS" + i + "'/>FAIL</td>";
then assign the change handler to the radio buttons using the type instead of the name
$('input[type="radio"]').on('change', function() { });
and get to the parent tr and look for the input[type=text] from there
$(this).parent().parent().find('input[type=text]').val($(this).val());
That's because you assign the same name="PASS" to every radio button. You ought to select a different one for each row. You could number it like name = "PASS1" or so. Demo for recommended method:
http://jsfiddle.net/hUAWF/7/
Alternatively you could only update a single row if it's only for showing the data (and not writing it) by selecting a children of that row:
$('input[name="PASS"]').
on('change', function() {
$(this).
parents("tr").
find('input[type="text"]').
val($(this).val());
Demo for easy alternative:
http://jsfiddle.net/hUAWF/4/
This is not the optimal solution , but it is working
(function() {
var url = "http://www.filltext.com/?callback=?";
$.getJSON( url, {
'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
})
.done(function( data ) {
$.ajaxSetup ({ cache: false});
var t;
$.each( data, function( i, item ) {
var html =
"<td>" + item.fname + "</td>" +
"<td>" + item.lname + "</td>" +
"<td>" + item.tel + "</td>" +
"<td><input id="+i+" type='text' name='PASS' placeholder='"+i+"' /></td>" +
"<td><input id="+i+" type='radio' value='Pass' name='PASS'/>PASS</td>"+
"<td><input id="+i+" type='radio' value='Fail' name='PASS'/>FAIL</td>";
$("<tr/> </table>").html(html).appendTo("#records");
});
$('input[name="PASS"]').on('change', function() {
var id= $(this).attr('id');
$('input[type="text"]#'+id).val($(this).val());
});
});
})();
Working DEMO
Try this,
The problem was since you have specified $('input[type="text"]')it will select all input of type text, so all the textboxes' value will be effected, However the code below gets the corresponding textbox in the same row of the clicked radio button.
$('input[name="PASS"]').on('change', function() {
$(this).parents('tr').find('input[type="text"]').val($(this).val());
});
Hope this helps, thank you
I'm trying to update the sql db by a List of variables sent from the Html page.
Some of the Data are correctly sent, while others are not. I put the list in a div which is divided to two parts : "h1" and another "Div". The data at the header are all sent correctly, but the body itself which is at the second div isn't sent at all.
This is the Div which the data is put at:
$('#Classes').append('<div> <h1 class = "flip" wpID="' + subjects[i].Wkp_ID + '" lessonID="' + subjects[i].Ttb_lessonID + '" Date="' + Datecoming + '">' + subjects[i].sbj_Name + " Class:" + subjects[i].Ttb_Class + '</h1><div id ="NewBody" class="panel" contenteditable>' + subjects[i].Wkp_Body + '</div> </div>');
And that's how I read them at the ajax part:
var WeekPlan = [];
$('#Classes div').each(function (index) {
var header = $(this).children('h1');
var WeekBody = $(this).children('div').val();
var wpID = header.attr('wpID');
var lessonID = header.attr('lessonID');
var Wkp_Date = header.attr('Date');
WeekPlan[index] = { "Wkp_ID": wpID, "Wkp_Date": Wkp_Date, "Wkp_Body": WeekBody, "Wkp_lesson": lessonID };
});
The Wkp_ID, Wkp_Date, Wkp_Lesson are right, but the Wkp_Body just returns an empty string.
So do you know why is this happening and how can I truly read the body ? Most probably the problem is with this line:
var WeekBody = $(this).children('div').val();
But how can I access it correctly ?
Thanks a lot.
Here is what worked for me in case anyone needs it:
Creating the div:
$('#Classes').append('<div class="BigDiv"> <h1 class = "flip" wpID="'+ subjects[i].Wkp_ID + '" lessonID="' + subjects[i].Ttb_lessonID + '" Date="' + Datecoming + '">' + subjects[i].sbj_Name + " class:" + subjects[i].Cls_Name + '</h1><div class="panel" contenteditable>' + subjects[i].Wkp_Body + '</div> </div>');
Is there a way to do it(serialization of HTML DOM into XML) in IE 8 or any other older version of IE.
In firefox :
var xmlString = new XMLSerializer().serializeToString( doc );
does it.I haven't tried it, though.
XMLSerializer causes error in IE 8, that it is not defined.
var objSerializeDOM = {
//Variable to hold generated XML.
msg : "",
serializeDOM : function() {
dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id', "lyr1"); // give id to it
dv.className = "top"; // set the style classname
// set the inner styling of the div tag
dv.style.position = "absolute";
// set the html content inside the div tag
dv.innerHTML = "<input type='button' value='Serialize' onClick='objSerializeDOM.createXML()'/>"
"<br>";
// finally add the div id to ur form
document.body.insertBefore(dv, document.body.firstChild);
},
/**
* XML creation takes place here.
*/
createXML : function() {
objSerializeDOM.msg += "";
objSerializeDOM.msg += "<?xml version='1.0' encoding='UTF-8'?>\n\n";
// Get all the forms in a document.
var forms = document.forms;
for ( var i = 0; i < forms.length; i++) {
// Get all the elements on per form basis.
elements = document.forms[i].elements;
objSerializeDOM.msg += "<FORM name=\"" + forms[i].name + "\" method=\""
+ forms[i].method + "\" action=\"" + forms[i].action + "\">\n\n";
for ( var j = 0; j < elements.length; j++) {
objSerializeDOM.msg += " <" + elements[j].tagName + " type=\""
+ elements[j].type + "\"" + " name=\""
+ elements[j].name + "\"" + " Value =\""
+ elements[j].value + "\" />\n";
}
alert(document.forms[i].elements[1].event);
}
objSerializeDOM.msg += "\n\n</FORM>\n\n";
alert(objSerializeDOM.msg);
objSerializeDOM.writeToFile(objSerializeDOM.msg);
},
/**
* Writes the msg to file at pre-specified location.
* #param msg
* the XML file created.
*/
writeToFile : function(msg) {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.CreateTextFile("c:\\myXML.xml", true);
fh.WriteLine(msg);
fh.Close();
}
};
objSerializeDOM.serializeDOM();
I wrote this JS, I run this javascript using GreaseMonkey4IE. This simply puts a button on every page of the domain you specify in GM4IE. On click of that button it will parse the HTML document and create an XML file. It will also display the same as an alert first and will save the XML in your local drive on path specified.
There a still many improvements I am planning to do, but yes it works and may be give you guys an idea.The program is self-explanatory, I hope.
please have a look here How to get Events associated with DOM elements?Thanks