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))
Related
How can I get the name and model of the system processor CPU in the inject content script?
Is there a way to access chrome.system.cpu in inject content script?
I saw this code from David Christian who wrote in the popup.js file that it works but I do not know how I can access its function in the inject content script.
Please help me.
// David Christian
// System info Chrome extension
var systemInformation = {
requestInfo: function() {
chrome.system.cpu.getInfo(function (cpuInfo){
var elem = document.getElementById('cpu');
var info = cpuInfo.modelName + "<br>";
info += "Architecture: " + cpuInfo.archName + "<br>";
info += "Cores: " + cpuInfo.numOfProcessors.toString() + "<br>";
// info += "Features: " + cpuInfo.features + "<br>";
info += "<table><tr><th>#</th><th>User (ms)</th><th>Kernel (ms)</th><th>Idle (ms)</th><th>Total (ms)</th></tr>";
for (var i=0; i < cpuInfo.processors.length; i++){
info += "<tr><td>" + i + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.user + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.kernel + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.idle + "</td>";
info += "<td>" + cpuInfo.processors[i].usage.total + "</td><tr>";
}
elem.innerHTML = info + "</table>";
});
chrome.system.memory.getInfo(function (ramInfo){
var elem = document.getElementById('ram');
elem.innerHTML = (ramInfo.availableCapacity / 1073741824).toFixed(2)
+ "gb / " + Math.round(ramInfo.capacity / 1073741824).toFixed(2)
+ "gb (" + ((ramInfo.availableCapacity / ramInfo.capacity) * 100.0).toFixed(2).toString() + "% available)";
});
}
};
// Start getting system data as soon as page is ready..
document.addEventListener('DOMContentLoaded', function () {
// Ensure that we have a display straight away
systemInformation.requestInfo();
// Update the display every 3 seconds
setInterval(systemInformation.requestInfo, 3000);
});
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
hello i need a 3 colums layout in jquery mobile.
i load my json file and i need to put the first obj in ui-block-a the second obj in ui-block-b the third obj in ui-block-c the fourth obj in ui-block-a and so on....
i can make with two colums checking if is odd or even, this is my code:
for (var i in data.cappelli) {
if( i%2 == 0)output+="<div class=\"ui-block-a\">" + data.cappelli[i].id + " " + data.cappelli[i].nome + "</div>";
else output+="<div class=\"ui-block-b\">" + data.cappelli[i].id + " " + data.cappelli[i].nome + "</div>";
}
can someone help me to achieve that in 3 column??
Ty very much
grids = ['a','b','c'];
for (var i in data.cappelli) {
output+="<div class=\"ui-block-" + grids[i%3] + "\">" + data.cappelli[i].id + " " + data.cappelli[i].nome + "</div>";
}
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