Develop Reference

Log JSON field when clicking on a table row

I am using Framework7 to build a mobile app. Using the popup and request features, I am dynamically building an html table with JSON data as follows:
//Do something when popup is opened
$$(document).on('popup:opened', '.popup-airconSearch', function (e) {
//Show preloader
app.preloader.show();
//Request json data from URL
app.request.json('my-URL', function (data) {
var tableHtml = '';
for(var i = 0; i < data.length; i+=1){
tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric- only">' +data[i].model+ '</td></tr>';
}
//Add rows to HTML table
$$('.data-table #airconDatabase').html(tableHtml);
app.preloader.hide();
})
})
The JSON URL also includes an ID field and I am trying to log the ID of each entry when a table row is clicked. I have updated the above function with:
$$('.data-table #airconDatabase tr').on('click', e => {
var id = data[i].regnumber;
console.log (id);
})
However the console logs ID as underfined. If I change it to
var id = data[0].regnumber;
Then the first JSON entry regnumber field is logged to console no matter which table row is clicked. If I change it to
var id = data[1].regnumber;
Then the second JSON entry regnumber field is logged and so on.
Where am I going wrong?

My solution:
Firstly build the dynamic HTML table with a row ID from the JSON data:
tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class..
Then get the row ID when a table row is clicked:
$$('.data-table #airconDatabaseTable tbody tr').on('click', function (e) {
var zaf = $$(this).closest('tr').attr('id');
console.log (zaf);
})
In addition to the above, I had to add an ID to the HTML table and not just the table body.

Dynamically add rows into a table using data from another table-jQuery

I have two table on my page like the picture shown here.
What I want to do is:
select rows in the Source Table
read the data in ID field, Name field from the Source Table, and also the value of radio button.
Form these data as rows of Target Table and append these rows into Target Table.
Now Im using two arrays to store the ID and Name that read from Source Table, but im a bit confused about how to form a row for the Target Table.
$('#btnLinkCase').click(function (event) {
var caseID = $('#caseID').text();
var linkedIDArr = []; //array list for selected id
var linkedNameArr = []; //array list for selected name
$('#linkCaseTable tbody tr td:nth-child(2)').each(function (index, el) { //store each paire of <tr> into array
linkedIDArr.push(el);
});
$('#linkCaseTable tbody tr td:last-child').each(function (index, el) { //store each paire of <tr> into array
linkedNameArr.push(el);
});
$.each(linkedCaseIDArr, function (index, val) {
//whats next?
});
});
Please see all source code here
Any ideas of doing this? Thanks in advance
Edit:
If multiple rows are selected they will use the same value from the radio button. eg: two rows are selected and "Type 1" is checked. In target table, their relationship all are "Type 1". I hope I have explained myself..

Try:
$('button').click(function (event) {
$("#sourceTable tr:gt(0)").each(function(){
var th = $(this);
console.log("dfg")
if($(th).find("input[name='link-cbx']").is(":checked")){ //assuming ids are unique remove condition if you do notwant so
var id = $(th).find("td:eq(1)").text();
var name = $(th).find("td:eq(7)").text();
var type = "Type "+$("input[name='linkType']:checked").val();
if($("#targetTable:contains('"+id+"')").length < 1){
$("#targetTable").append("<tr><td>"+id+"</td><td>"+name+"</td><td>"+type+"</td></tr>");
}
}
});
});
Updated fiddle here.

(SQLite + Javascript) issue with INSERT followed by SELECT in a for loop

I am having an issue with the following and I guess it's due to SQLite asynchronous mode. The code is pretty long so I'll try to explain briefly.
I have 4 inputs
<input id="input0" name="tbleName3">
<input id="input1" name="tbleName4">
<input id="input2" name="tbleName1">
<input id="input3" name="tbleName1">
Actually, in my application the number of inputs is not fixed and is dynamically changed by the user. The order of the input id is fixed, i.e the index is incremental index++... However, the name can be changed dynamically. The name of the input is the name of a table in the db. Here is what I am trying to accomplish: I put all the names in an array.
arrInput=array(tbleName3, tbleName4, tbleName1, tbleName1).
Now, I want to partially fill each of the db table, whose name is in the array, and get the newly created id values in each of the tables. Note that all tables have the same two first columns: tablePattern[id INT, some TXT, ......]
db.transaction(function(tx) {
for(var i=0; i < arrInput.length; i++){
var thisTble = arrInput[i];
var insertSqlArg = "INSERT INTO "+thisTble+" (some) VALUES (?)";
tx.executeSql(insertSqlArg, ["thing"], (function(i, thisTble){return function(tx,resultIdNew){
var selectSqlArg = "SELECT id from "+thisTble+" order by id DESC limit 1";
tx.executeSql(selectSqlArg, [], function(tx,resultId){
var datasetId = resultId.rows;
var itemId = datasetId.item(0);
var idValue = itemId['id'];
alert("i="+i+", tbleName="+thisTble+", New id="+idValue);
}), fnError);
};})(i, thisTble), fnError);
}
}
If the name of the 4 inputs are different (for instance {tbleName1, tbleName2, tbleName3, tbleName4}), the code works great. The bug occurs when 2 or more inputs use the same name (for instance {tbleName1, tbleName2, tbleName3, tbleName3}), i.e 1 row is added to tbleName1 and tbleName2, and 2 rows to tbleName3. In that case, instead of reporting the id of the first row created (for instant 14) and then the 2nd row created (15) in tbleName3, the alert box will show twice the id of the very last row added (15). I don't know how to fix that. It seems that the command to create the 2nd row is fired before the id of the row created first is read.
//The final goal of the code is to insert idValue and thisTble in another table 'flowTble'. The line:
alert("i="+i+", tbleName="+thisTble+", New id="+idValue);
is in fact replaced by:
var insertFlow = "INSERT INTO flowTble (some, tbleName, idTbleName, index) VALUES (thing, ?, ?, ?)";
tx.executeSql(insertFlow , [tbleName, idValue, i], null, onError);
The problem is still the same though (select gives only the very last id created). However, I might have a better chance by using a 'Trigger' that would run just after "INSERT INTO "+thisTble+" (some) VALUES (?)", and insert a set of values in flowTble. BUT, I don't know how to create such a Trigger with JS wrapper. Here is a try:
var createTrigger = "CREATE TRIGGER fillFlowTble AFTER INSERT ON "+TbleName+" FOR EACH ROW INSERT INTO flowTble (some, tbleName, idTbleName, index) VALUES (thing, tbleName, idValue, i)";
db.transaction(function(tx) {
tx.executeSql(createTrigger, [], null, onError);
});

How to get the id value from check box?

1 naga naga123
2 Tamil tamil123
3 vinod vinod123
4 naveen naveen123
5 jakkir jakkir123
save edit delete
UserID:
UserName:
Password:
I have check box at the end of each row. When I click the check box and select edit the values should get displayed in the text boxes corresponding to userId, userName & Password.
My js code for edit is
function Edit(){
var i=dwr.util.getValue("userId");
LoginManagement.selectId(i,function(login){
dwr.util.setValues({userId:userId, userName:login.userName,
passWord:login.passWord});
});
}
My js code for checkbox is
function Intialize(){
LoginManagement.getLoginDetails(function(loginList){
var x = "";
for(var i=0; i<loginList.length; i++){
var login =loginList[i];
x += "<tr><td>"+login.userId+"</td><td>"+login.userName+"</td><td>"+login.passWord+"</td><td><input type = 'checkbox' id = 'cbid"+login.userId+"'</td></tr>";
}
$("#loginTable").html(x);
});
}
How should i get the id value in edit so that if i click the button it should display the values corresponding. Any suggestion please?

Hope I understand you correctly.
Remove Edit() from onclick of edit link and continue the Initialize function as follows:
...
$("#loginTable").html(x);
ids = ['userId', 'userName', 'Password']; // Ids of text boxes to be populated
$("#editlink").click(function(){ // Assuming edit link has id="editlink"
var tds = $("#loginTable").find("input:checked[type=checkbox]").parent().siblings();
for(var i = 0; i < ids.length; i++){
$('#' + ids[i]).html($(tds[i]).html());
}
Edit(); // Better copy the code of Edit() directly in here
return false; // Prevent default click action (go to href)
});
});
If this is wrong please post the complete HTML as well.

the id can be retrieved by using the attr var idvalue = $("input:last").attr("id"); but you have to get reference to the checkbox in your scenario .. if you have a css class name associated with it use that like $(.classname) and then use the attr to get the value.

Javascript - filling textboxes with checkbox value

In my web application, I've set of checkboxes which on check populate a textbox above them.(If more than one checkbox is selected, then their values appear in the textbox separated by commas).
These set of checkboxes appear as rows in my HTML table.
Here's my HTML code.
<input type="text" id="newContactComment<%=rCount %>" name="newContactComment" size="45">
<input type="checkbox" id="commentText<%=rCount %>" name="commentText" value="<%=c.getComment_text() %>"
onclick="javascript:updateTextArea(<%=rCount%>);">
And the corresponding JS function is as follows:
function updateTextArea(rCount) {
var allVals = new Array();
$("#contactInfo input['commentText' + rCount]:checked").each(function() {
(allVals).push($(this).val());
});
$("#newContactComment" + rCount).val(allVals);
}
The rCount variable in the above function is the row # of my table.
Using this above, I'm not getting the expected behaviour..
For ex. If for row 1 of my table, I check chkbox 1 and 2, it correctly gets populated with values of those checkboxes. Now, for 2 of my table, I check only chkbox 3, it gets populated with the values 1,2 and 3 and not only 3 as I expect it to.
Any help will be greatly appreciated.

It would be better to use jQuery to set an event handler rather than setting it inline.
You want to use the onchange event not the onclick event.
If you add class names of checkboxes (or whatever you want) to the checkboxes the following will work:
$("input.checkboxes").change(function(){ //when checkbox is ticked or unticked
var par = $(this).closest("tr")[0];
var parID = par.id;
var patt1=/([0-9]+)$/g;
var rCount = parID.match(patt1); //Gets number off end of id
var allVals = new Array();
//Get all checkboxes in current row that are checked
$(par).find("td input.checkboxes:checked").each(function() {
allVals.push($(this).val());
});
$("#newContactComment" + rCount).val(allVals);
allVals = null; //empty array as not needed
});
I believe this or something along these lines will do what you want

You're trying to use the rCount variable from within the quoted string. Try this instead:
$("#contactInfo input['commentText" + rCount + "']:checked")