getJSON - 2 calls. 2nd not working?
Hi all,
Firstly, thanks for all the tips Ive picked up on here previously and good to hear about the 'official' status....
Ive been using jQuery for quite a while now, but have only recently started using JSON and XML with it. Im hoping someone with more experience can help me!
My problem possibly lies somewhere with async, or possibly that getJSON can not be used in this way....
Basically, I have 2 requests called to first get a single record, and then another to get all associated records. The first record is displayed in a form, and the associated records are then shown in a dynamic table.
My problem is that unless I put some kind of pause in place, the 2nd getJSON request always returns the same data as the first - regardless of the query string.
This is the result of the first call using clipId (the 2nd call, when working, is the same but with more rows - otherwise it is just exactly the same):
-
{"page":1,"total":1,"records":1,"paging":20,"rows":[{"clipId":"14792","barcode":"02528","title":"BRITISH STARS","format":"","source":"","runningTime":"","location":"","timeCode":"10:00:00","cUser":"37357.81","cDate":"","mUser":"37938.59","mDate":""}]}
-
function showClip(clipId) {
var str = "";
//this function gets the required data using jquery then
//puts the values in to the text boxes on the form
$.getJSON("/data/clip.json.php?clipId=" + clipId, function(json){
//this just loops around and puts the values in to the boxes
//if they are named the same as the data fields
$.each(json.rows, function(i,item) {
for (prop in item) {
$('#' + prop).val(item[prop]);
str += "<th>" + prop + "</th>";
}
var barcode = json.rows[0].barcode;
//load the rest of the rows from this barcode
loadBarcodeContents(barcode, str);
});
});
}
function loadBarcodeContents(barcode, headerString) {
//now load the rest of that barcodes data in to a table
$.getJSON("/data/clip.json.php?barcode=" + barcode, function(json2){
//build up the table code
var str = "<table id='barcodeContents'>";
str += "<theader>";
str += "<tr>";
str += headerString;
str += "</tr>";
str += "</theader>";
//loop through each record on the barcode and create a tr for it
$.each(json2.rows, function(i,item2) {
str += "<tr id='barcodeRow_'" + json2.rows[i].clipId + ">";
for (prop in item2) {
str += "<td>" + item2[prop] + "</td>";
}
str += "</tr>";
});
//finish off the table
str += "</table>";
//insert the table code in to the div
$("#divBarcodeContents").html(str);
});
}
I can now work out where to put the code in order for it to run after the first... while including a variable from the first query in the second (the barcode).
Is this even possible? Can anyone help me?!
Big thanks - Sam.