How to append table head only once when loop through the JSON - javascript

How to only once append table head when looping(search) through the JSON array?When I try this, every time when starting search table-head append for every match, although two products belong the same group.
HTML
</select>
Search: <input type="text" name="search" id="search" />
<div id="place"></div>
Java Script
$.ajaxSetup({ cache: false });
$('#search').keyup(function(event){
$('#place').html('');
if (event.keyCode == 8) {
$('#place').hide('')
}else{
$('#place').show('')
}
$('#state').val('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
LOOP JSON
$.getJSON('product.json', function(result) {
//LOOP JSON
TABLE HEAD to appears only once in the search.
$.each(result, function(key, value){
//TABLE HEAD this need to apperas only one
var text = '';
text +='<table class="table" width="610" cellpadding="3"
cellspacing="1" bgcolor="#cccccc">';
text +='<tr>';
text +='<th width="20%" bgcolor="#aaaaaa" align="left"><font
color="#ffffff">Model</font></th>';
text +='<th width="25%" bgcolor="#aaaaaa"><font color="#ffffff">CODEC
Supported</font></th>';
text +='</tr>';
text +='<p style="font-size:15px; font-weight:bold; color:#2773ba;
margin-bottom:5px">'+value.brand+'</p>';
// END TABLE HEAD
//END OF TABLE HEAD -START TABLE BODY
// TABLE BODY is filling with data from json
if (value.brand.search(expression) != -1 ||
value.model.search(expression) != -1 ||
value.CODECSupported.search(expression) != -1 )
{
text += '<tr>'
text += '<td colspan="9" align="left" bgcolor="#FFFFFF" style="font-
weight:bold; color:#3399cc">'+value.type+'</td>'
text += '</tr>'
text += '<tr>'
text += '<td bgcolor="#FFFFFF">'+value.model+'</td>'
text += '<td align="center"
bgcolor="#FFFFFF">'+value.CODECSupported+'</td>'
text += '</tr>'
text += '</table>'
$('#place').append(text)
}
});
});
});
END OF BODY
})

You can either do the table creation outside of the loop (have just the generated data inside the loop), or you can have a boolean that checks whether you have went through the loop once
Example pseudo-ish code:
passed = false;
for(i=0;i<10;i++){
// some code happening
if(!passed){
// here add the headers
passed = true;
}
else{
//do the rest
}
// other code happening
}
I would recommend having the table setup outside the loop since it would be more efficient, because with this pseudo code you will have an extra check on each iteration of the loop.
Hope this helps!

Related

Insert the input into mysql

I am a newbie in programming. Excuse my ignorance.
My english is not too good. Hope you understand what I mean in my question.
How can I get the value of id NILAI below and insert into mysql.
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>';
I want the input value insert into mysql where col nis in mysql table same with row. nis
I've been trying this, but It's wrong. It just read the value of the first row in input nilai and make a new nis=0.
var data1 = document.getElementById("nilai") ;
var i;
for (i=0;i<data1.length;i++) {
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1.elements[i]. value+'")';
}
Note: dataid is a variabel from url that I need to input.
you should use this code in javascript to get the value
var data1 = document.getElementById("nilai").value;
USE:
var data1 = document.getElementById("nilai").value; //to get the value in the input tag
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1+'")';

ajax auto update table with json data

hello and right at the beginning, I still have not much experience with js or jquery but I am still working on my skills.
I have a table and the data in the table are coming from an external json file, to which I have no influence.
creating the table works fine, but the next step is to refresh the data in the table every "x" seconds.
I have done some research but i could not find any solutin till now.
the table it self:
<table class="table table-hover">
<thead>
<tr>
<th>Number</th>
<th>Sign</th>
<!--<th>Group</th>-->
<th>Location</th>
<th>N</th>
<th>E</th>
<th>On position</th>
<th>Ignition on</th>
<th>Moving</th>
</tr>
</thead>
<tbody id="vehicleList">
</tbody>
</table>
the code, which creates the table is the following:
$(document).ready(function() {
refreshTable();
$.getJSON(getshowObjectReportExtern, function(data){
var vehicleListData = '';
$.each(data, function(key, value){
vehicleListData += '<tr id="rowVehicleStatus" class="">';
vehicleListData += '<td>'+value.objectno+'</td>';
vehicleListData += '<td>'+value.objectname+'</td>';
//vehicleListData += '<td>'+value.objectgroupname+'</td>';
vehicleListData += '<td>'+value.postext_short+'</td>';
vehicleListData += '<td>'+value.latitude_mdeg+'</td>';
vehicleListData += '<td>'+value.longitude_mdeg+'</td>';
vehicleListData += '<td>'+value.pos_time+'</td>';
vehicleListData += '<td>'+value.ignition+'</td>';
vehicleListData += '<td>'+value.standstill+'</td>';
vehicleListData += '</tr>';
});
$('#vehicleList').append(vehicleListData);
});
function refreshTable(){
$('#vehicleList').load(getshowObjectReportExtern, function(){
setTimeout(refreshTable, 5000);
});
});
the result at the moment is, that the table will be created but after the first reload the raw json data will be added to the table.
has anybody any advice for me?
thanks in advance!
setTimeout does, as the name suggestes, wait a period of time before executing. setInterval however creates a interval caller that is ran every n seconds. You have to change your signature method to that.
However, you have another function. Because you don't remove the previous dynamically added entries from the table before you append, you will append the same rows every time the interval runs. To avoid this, you should assign some class to the tbody or something of your table, then clear this before adding the content back. This ensures that the content of the json file is not added multiple times.
$(document).ready(function() {
// Fetch the initial table
refreshTable();
// Fetch every 5 seconds
setInterval(refreshTable, 5000);
});
function refreshTable(){
$.getJSON(getshowObjectReportExtern, function(data) {
var vehicleListData = '';
$.each(data, function(key, value) {
vehicleListData += '<tr id="rowVehicleStatus" class="">';
vehicleListData += '<td>'+value.objectno+'</td>';
vehicleListData += '<td>'+value.objectname+'</td>';
//vehicleListData += '<td>'+value.objectgroupname+'</td>';
vehicleListData += '<td>'+value.postext_short+'</td>';
vehicleListData += '<td>'+value.latitude_mdeg+'</td>';
vehicleListData += '<td>'+value.longitude_mdeg+'</td>';
vehicleListData += '<td>'+value.pos_time+'</td>';
vehicleListData += '<td>'+value.ignition+'</td>';
vehicleListData += '<td>'+value.standstill+'</td>';
vehicleListData += '</tr>';
});
// We use .html instead of .append here, to make sure we don't add the same
// entries when the interval is ran for the n-th time.
$('#vehicleList').html(vehicleListData);
});
}
If you want to refresh your table for every x seconds, you should use setInterval() function instead.

Click on href and store data into input box

So I have a table with rows and columns that I loop through and an array which I split by spaces. What I am trying to do is if someone clicks parts[x] that information gets put into an input box.
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
For instance from below you can see the table that gets outputted now if someone was to press on Software I want Software to go to the top input box on the left which as you can tell already has Software in it for this example the input boxes name=a
Add a click listener to each tag like this:
var parts = data[j][i].split(' ');
tableData += '<td>';
for(x=0; x<parts.length; x++)
{
tableData += '' +parts[x] + ' ' + '';
}
tableData += '</td>';
Then define a handler outside of your tableData generation code like this:
function clickedPart(part){
document.getElementById("input_box").value = part.innerHTML
}
Please note I assumed your input box has the id "input_box". You can change that to whatever you want, but I recommend giving it an ID instead of a name.

Append html data with inline script html data and to print

I need to append table data with html inside script. And append data for print
but here the table data is only shows in the print mode.
html
<div>
<p>Your content here</p>
<table id="toPrint">
<tr>
<td>Neil D'zousa</td>
<td>112233445566</td>
</tr>
</table>
</div>
<div id="notForPrint">
print
</div>
script
function open() {
var w = window.print();
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html = $("#toPrint").html();
var t=html;
$(t).append(htmlTable2);
$(w.document.body).html(t);
}
$(function() {
$("a#print").click(open);
});
if anyone knew about this please share your answer.
with regards ...
Demo
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html1 = $("#toPrint").append(htmlTable2);
var t=html1;
$(t).append(htmlTable2);
window.print();
Try this. I tested in chrome. It works fine
EDIT:
Response to your req: You have to chack whether dom[name,etc] is already [resent
$('#domHeader').length > 0 means already present.
if(! $('#domHeader').length)
{
var htmlTable2 = '<tr>' + '<th>Name</th>'
+ '<th>Phone</th>'+ '</tr>';
var html1 = $("#toPrint").prepend(htmlTable2); //peter is correct
//var t=html1;
//$(t).append(htmlTable2);
}
EDITED DEMO
UPDATE FINAL
The following should do it. The headers should be at the top:
function open() {
var htmlTable2 = '<tr><th>Name</th><th>Phone</th></tr>';
var html1 = $("#toPrint").prepend( htmlTable2 );
window.print();
}
The rest of your code should work fine.

jquery adding columns based on database records

I have an sqlite table with these columns:
| date | weight | bmi | mood | etc.
I want a table on my html page to display like this on the html page:
<table>
<caption></caption>
<thead>
<tr>
<td>(empty cell over row headings)</td>
Additional tH's as needed (this is where each date entry goes)
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Weight</th>
additional tD's as needed (this is where each weight entry goes matched with date in column heading)
</tr>
<tr>
<th scope="row">BMI</th>
additional tD's as needed (same as above)
</tr>
</tbody>
</table>
so basically I'm flipping the rows and columns for display purposes. This is all so I can graph the table using jQuery Visualize plugin that goes out as the date progresses. As you can imagine, over time more entries will be made adding to the columns of the display table. Here is what I have been messing around with so far (not including the graphing scripts ). I've gotten myself totally confused and now I'm just a mess...
Any suggestions would be a big help. I think I'm running into problems when trying to insert data into a table that's also trying to insert itself. I'm probably going about this wrong I bet.
Thanks
Mike
function homeSuccess(tx, results) {
// Gets initial count of records in table...
var entries = results.rows.length;
// Iterates over all the existing records...
for (var i = 0; i < entries; ++i) {
// The following element id's can be found in the div's within the table below, see element.innerHTML line...
var element = document.getElementById('colDate');
element.innerHTML += '<th scope="col">' + results.rows.item(i).timeStamp + '</th>';
var element2 = document.getElementById('tdWeight');
element2.innerHTML += '<td>' + results.rows.item(i).weight + '</td>';
var element3 = document.getElementById('tdBmi');
element3.innerHTML += '<td>' + results.rows.item(i).bmi + '</td>';
};
// 'screenView2 is a placeholder on the main html page...
var element = document.getElementById('screenView2');
element.innerHTML = '<br /><br /><h1>Data:</h1><br />Number of entries: ' + entries + '<br />' + '<table><caption>Mikes Health</caption><thead><tr><td></td><div id="colDate"></div></tr></thead><tbody><tr><th scope="row">Weight</th><div id="colWeight"></div></tr><tr><th scope="row">BMI</th><div id="colBmi"></div></tr></tbody></table>';
// This section is just a test trying to plug in static elements prior to trying database data... When using this section I had the iteration section commented out.
var element2 = document.getElementById('colDate');
element2.innerHTML = '<th scope="col">4-1-13</th>';
var element3 = document.getElementById('colWeight');
element3.innerHTML = '<td scope="col">123</td>';
var element4 = document.getElementById('colBmi');
element4.innerHTML = '<td scope="col">321</td>';
}
function homeQuery(tx) {
console.log("entering homeQuery");
tx.executeSql('SELECT * FROM HEALTHGRAPH', [], homeSuccess, onSqlError);
console.log("leaving homeQuery");
}
// Function that is called on initial page load
function homeDBopen() {
console.log("opening db for home data");
theDB = window.openDatabase("hgDB", "1.0", "HealthGraph", 3 * 1024 * 1024);
theDB.transaction(homeQuery, onTxError, onTxSuccess);
console.log("leaving homeDBopen");
}
Thought for sure someone would have answered this question as it seems like an issue lots of people must run into. A little discouraging. Anyway, I found an answer that I can adapt to my own project here:
http://msdn.microsoft.com/en-us/library/ie/ms532998(v=vs.85).aspx
// Insert cells into the header row.
for (i=0; i<heading.length; i++)
{
oCell = oRow.insertCell(-1);... etc.

Categories