I am really unsure of how to code this properly, so I would like it if someone could point me on the right track.
I will have a SOAP+XML array which will have values matched up to a MYSQL table of jobs. The jobs then display in a with a hidden row. In each hidden row, I will have 3 separate SOAP+XML requests which will display 3 other bits of info. The user can then click on the job and with javascript, it displays the hidden row below and therefor, the extra information.
My interface right now 1) http://i.imgur.com/Cx7qB.png 2) http://i.imgur.com/HzXe5.png
The problem is when I scale this up, if the user chooses to display 100 jobs on the page. I need to hit the server for the first SOAP+XML request to get the jobs, then for each job, hit it 3 more times. So if I'm displaying 100 jobs, I'm hitting the SOAP server 301 times.
What I need is a way for it to only hit the server for the 1 initial SOAP+XML request, and then when someone initiates the javascript to view the hidden row, it starts the 3 soap requests for extra job info. That way the user isn't waiting for information they don't want to see and it doesn't bog down my server. The problem is I really don't know how to do this.
I really don't know much javascript, but I do know a good deal more PHP. Here's the script I'm using to hide the secondary rows in the table: http://pastebin.com/jhvaW0X4
Can anyone chime in on how I should go about getting this done?
Thank you!
I'm not sure if I understand the problem, but you can make an ajax request on a javascript event, in this case, when the user click the job tr, make the ajax requests for the needed info, for that you can use the $.ajax jquery method:
$("table#report1.report > tbody > tr.odd").click(function()
{
if(!$(this).next("tr").hasClass('shown'))
{
//Put here your ajax request
$.ajax({
url: yourSoapURL, getting tracking info url
type: "POST",
dataType: "xml",
data: soapMessage,
processData: false,
contentType: "text/xml; charset=\"utf-8\"",
success: function(soapMessage) {
//Add the tracking info to the tr that will be show
$(this).next("tr").text(soapMessage);
//Now the text is in the tr, show it!
$(this).next("tr").show();
$(this).next("tr").addClass("shown");
},
error: OnError
});
}
else
{
$(this).next("tr").hide();
$(this).next("tr").removeClass("shown");
}
That's the idea. If you want to manage multiple AJAX requests then read this: Multiple AJAX requests in jQuery.