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);
});
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 am new to these and have tried creating an HTML table dynamically using jQuery. The code is as below. It works fine.
How can I make the table data (value.id) clickable so that it redirects to a different page?
$(document).ready(function() {
var tableData = '';
$.each(xyz, function(key, value) {
tableData += '<tr>';
tableData += '<td>' + value.id + '</td>';
tableData += '<td>' + value.name + '</td>';
tableData += '</tr>';
});
$('#table').append(tableData);
//});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody id="table"></tbody>
</table>
Like this
const xyz = [{
id: 1,
name: "one"
},
{
id: 2,
name: "two"
}
]
$(function() {
const tableData = xyz.map(item => (`<tr><td class="id">${item.id}</td>
<td>${item.name}</td></tr>`));
$('#table').append(tableData.join(""));
$('#table').on("click", ".id", function() {
const id = this.textContent
console.log(id);
// location = "https://google.com/search?q="+id;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody id="table"></tbody>
</table>
You can enclose your tile content with a "a" tag
`tableData += '<tr>';
tableData += '<td><a href="/you-url/' +value.id+ '">' +
value.id + '<'/a></td>';
tableData += '<td>' +
value.name + '</td>';
tableData += '</tr>';`
I prefer to give the clickable elements a class to reference:
I also have some CSS that sets the cursor to a pointer.
$(document).ready(function () {
var tableData = '';
$.each(xyz, function (key, value) {
tableData += '<tr>';
tableData += '<td class="link">' +
value.id + '</td>';
tableData += '<td>' +
value.name + '</td>';
tableData += '</tr>';
});
$('#table').append(tableData);
//});
});
$(document).on("click","#table .link",function(){
console.log($(this).html());
});
.link{cursor:pointer;}
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);
});
How can I get the value of id 'nilai' in another function?
var sis = 'SELECT nis, nama_siswa FROM nilai_tugas';
connection.query(sis, function(err, rows, cols) {
if(err){
console.log("An error ocurred performing the query.");
console.log(err);
return;
}else{console.log("sukses mengambil data siswa dari nilai_tugas")}
var html='';
rows.forEach(function(row){
html += '<tr>';
html += '<td class="indi" align="center">';
html += row.nis;
html += '</td>';
html += '<td class="indi">';
html += row.nama_siswa;
html += '</td>';
html += '<td>';
html += '<input id="nilai" type="text" placeholder="nilai"/>';
html += '</td>';
html += '</tr>';
})
var a=html.toUpperCase();
document.querySelector('#table>tbody').innerHTML = a;
})
I have tried with this in other function, but error 'cannot read property value of null'
var data1 = document.getElementById("nilai").value;
You made a big mistake here,
var a= html.toUpperCase();
this make all html codes to Upper Case, so your Id also now became,
"NILAI" and ids are case sensitive.
don't use .toUpperCase();
simply store it as
var a = html;
this error occurs when you don't have that object in the first place. so, probably the problem is that a DOM node with id 'nilai' does not exist at all. I think you are trying to get the value of 'nilai' input before it is rendered.
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