How Do I generate table columns dynamically after ajax? - php

Question

I am using jQuery (1.9.1) with jQuery Mobile (1.3.0). I am having trouble with the Reflow table in JQM. When I AJAX to get my JSON data from a script to add more rows to my table, the reflow table headings are not generated after I trigger a refresh and create on the table. Here is my code:
HTML/PHP
'<table data-role="table" id="itemTable" data-mode="reflow" class="ui-responsive table-stroke" style="display:table;">' .
'<thead>' .
'<tr>' .
'<th data-priority="1">Location</th>' .
'<th>Name</th>' .
'<th data-priority="3">Barcode</th>' .
'<th data-priority="4">Needed</th>' .
'<th data-priority="5">Scanned</th>' .
'</tr>' .
'</thead>' .
'<tbody>' .
$tableData .
'</tbody>' .
'</table>' .
JavaScript
$('.getOrder, .getStoreOrder').on('vclick', function(e) {
e.preventDefault();
var sel = this;
var theLink = $(this).attr('href');
if (activeOrder === true) {
return false;
}
$.ajax({
url: 'ajax.php',
data: {
pa: ($(sel).hasClass('getStoreOrder') ? 'store' : '') + 'order'
},
dataType: 'json',
beforeSend: function() {
$.mobile.showPageLoadingMsg();
$('#itemTable tbody').html('');
$('#leftPanel ul li').not(':first-child').remove();
},
success: function(data) {
testVar = data;
var i;
for (i=0; i <= data.length -1; i++) {
$('#itemTable tbody').append( '' +
'<tr id="item' + (i+1) + '">' +
'<td><span>' + data[i].Location + '</span></td>' +
'<td><a onclick="showImageOverlay(\'' + data[i].Image + '\');">' + data[i].Name + '</a></td>' +
'<td>' + data[i].Barcode + '</td>' +
'<td>' + data[i].Qty + '</td>' +
'<td>0</td>' +
'</tr>' +
'');
$('#leftPanel ul').append( '' +
'<li>' +
'<a href="#item' + (i+1) + '" class="itemLink" onclick="changeItem(\'item' + (i+1) + '\')">' +
'Item ' + (i+1) +
'</a>' +
'</li>' +
'');
}
$('#itemTable').trigger('refresh');
$('#itemTable').trigger('create');
$('#leftPanel #leftUl').listview('refresh');
},
complete: function() {
$('#rightPanel', '.ui-page-active').panel('close');
$.mobile.hidePageLoadingMsg();
//pageChange(theLink);
}
});
});
The AJAX does succeed and add my rows to the table how I want them to. My question is how do I trigger JQM to add the reflow column names.
I know that I can use <b class="ui-table-cell-label">Column Name</b> to my row appends to add the column names but I want it done dynamically so I don't have to change the jQuery when I change my HTML.
Thank you.

Answer 1

In my opinion its preferable to do like this: $('#tableContainer').load('revisedTable.php?json=yourJsonString');
That way you're doing the table layout in php rather than javascript.

Answer 2

Figured it out. Turns out that jQuery Mobile version 1.3.0 does not have a proper .table('refresh') method implemented. I solved this by upgrading to jQuery Mobile version 1.3.1 which has the proper method I needed.