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.
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))
So I have the code, that calls to mySQL based on the route, however it does not work...
app.get("/attitude-chart/:att", function(req, res) {
connection.query("SELECT * FROM actors ORDER BY id WHERE ?",{'attitude':`${req.params.att}`}, function(err, result) {
var html = "<h1>Attitude-chart</h1>";
html += "<ul>";
for (var i = 0; i < result.length; i++) {
html += "<li><p> ID: " + result[i].id + "</p>";
html += "<p>Name: " + result[i].name + " </p></li>";
}
html += "</ul>";
res.send(html);
});
});
results are undefined....
It's not clear what package you're using for MySQL, but it looks to me like your SQL is not well formed.
I would expect your query to look something like this:
connection.query('SELECT * FROM actors WHERE attitude=?', req.params.att, ...)
This will result in an SQL query that looks like:
SELECT * FROM actores WHERE attitude='your value';
In your query, you have no WHERE expression, just a placeholder where an expression should be. I'm not familiar with every MySQL package out there, but every one I know of will require you to spell out what condition you're trying to match.
I fixed it. Swapping WHERE and ORDER BY did the trick!
connection.query("SELECT * FROM actors WHERE ? ORDER BY id",[{'attitude':`${x}`}], function(err, result) {
console.log(result);
var html = "<h1>Attitude-chart</h1>";
html += "<ul>";
for (var i = 0; i < result.length; i++) {
html += "<li><p> ID: " + result[i].id + "</p>";
html += "<p>Name: " + result[i].name + " </p></li>";
}
html += "</ul>";
res.send(html);
});
You don't use a placeholder for the entire comparison expression. And the ORDER BY clause has to be after the WHERE clause.
You need to write:
connection.query("SELECT * FROM actors WHERE attitude = :attitude ORDER BY id ",{'attitude': `${req.params.att}`}, function(err, result) {
The :attitude placeholder is replaced with the value of the attitude property of the object.
And if the column is numeric, you shouldn't put req.params.att in a template literal. You should pass the numeric value to the query.
I have a table that pops up in an HTML UI on command in my Google Sheet file that allows the file's user a look at a summary of orders listed in one of my Google Sheet tabs. The table includes a radio button selection option for each order listed for the user to click on any order they'd like to review in greater detail. Right now, onClick, the file triggers an alert stating which order has been selected. This tells me everything is working properly, but when I move the alert code out of the client-side HTML section and to a server-side call via google.script.run, the alert no longer pops up 'onClick'. Let me know, if you can, where I am going wrong:
function htmlOrders() {
var active = SpreadsheetApp.getActive();
var sheet = active.getSheetByName("POHistory");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("A2:K" + lastRow);
var data = myRange.getDisplayValues();
var optionsHTML = "";
var seenType = {};
for (var i = 0; i < data.length; i++) {
if(seenType[data[i][0]]) {
continue;}
seenType[data[i][0]] = true;
optionsHTML += "<tr>";
optionsHTML += "<td><input type='radio' name='selectedPO' value='" +
data[i][0] + "'onclick='google.script.run.editPO()';></td>";
optionsHTML += "<td>" + data[i][0] + "</td>";
optionsHTML += "<td>" + data[i][2] + "</td>";
optionsHTML += "<td>" + data[i][1] + "</td>";
optionsHTML += "<td>" + data[i][10] + "</td>";
optionsHTML += "</tr>"
}
return optionsHTML;}
function editPO(){
var whichPO = document.getElementsByName("selectedPO");
for(i=0 ; i < whichPO.length ; i++) {
if(whichPO[i].checked)
{
alert("you have chosen "+ whichPO[i].value);
}}}
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<table name="table" id="table">
<tr>
<th>Edit?</th>
<th>PO No.</th>
<th>Vendor</th>
<th>Date</th>
<th>Total</th>
</tr>
<?!= htmlOrders(); ?>
</table>
<script>
</script>
</form>
</body>
</html>
Server-side functions must be called via google.script.run. In htmlOrders() function, change the "onClick" handler to:
"'onclick='google.script.run.editPO()'
As to why it doesn't work - remember that the runtime environment for GAS is NOT your browser, so you don't have access to the Document Object Model (DOM) or BOM (Browser Object Model) from within '.gs' files. The methods and properties you are trying to access belong to the 'window' object in your web browser, which means they are only accessible on the client-side. When you call alert("Hello!") what you are really doing is selecting a property of the global object (in this case, window):
To see the global object for '.gs' files, try Logger.log(this) and check the output - you'll be surprised. If you need to pass values from server to client side, use success and failure handlers:
google.script.run
.withSuccessHandler(function(res) {
console.log(res);
})
.withFailureHandler(function(err){
console.log(err);
})
.runServerFunc(req);
In conlusion, wrap your client-side JS code in <script> tags and you are good to go.
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);
});
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