CODEWITHSUNDEEP
javascriptjquery
medievalmatt
medievalmatt

Reputation: 491

Javascript-invoked php content not displaying after load

Thanks to the help I received here, I have a piece of javascript that toggles the visibility of a div and loads content from a php file into that toggled div:

function compare_toggle_visibility(id, line, collection)
{
    var e = document.getElementById(id);
    e.style.display = ((e.style.display!='none') ? 'none' : 'block');             
    $(e).load('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
        alert("External content loaded successfully!");
    if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
});
}

This works great with the small php files I'm using for testing, but the problem I'm running into is that my actual production file takes some time to load. So the div is toggled and exists before the code can be loaded into it. I get the alert message I put in as a test indicating that the external content loaded, but I see nothing in the div itself.

To try to fix this, I've attempted to place the toggle after the load function, but that made no difference. I also have tried to load the results of the php call into a variable and then call the results of that variable into the div when it loaded successfully, but that does not work either. 

function compare_toggle_visibility(id, line, collection)
{
   var e = document.getElementById(id);
   e.style.display = ((e.style.display!='none') ? 'none' : 'block');
   var l = load('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
        $(e).html(l);
    if(statusTxt == "error")
        alert("Error: " + xhr.status + ": " + xhr.statusText);
});
}

I'm not sure where I'm going wrong -- I'm pretty comfortable with php and XML, but less so with javascript and especially with Ajax and Jquery.

Upvotes: 2

Views: 49

Answers (1)

Ahmadbaba46
Ahmadbaba46

Reputation: 231

Try this

function compare_toggle_visibility(id, line, collection){ var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
   $.get('http:/www.minorworksoflydgate.net/XML/XQuery/test_command_line.php'+ '?collection=' + collection + '&zone=' + id + '&line=' + line, function(responseTxt){
    $(e).html(responseTxt);
 });
}

Upvotes: 1

Related Questions