Javascript-invoked php content not displaying after load

Question

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.

Ahmadbaba46 · Accepted Answer · 2015-09-05 22:37:15Z

1

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);
 });
}

answered Sep 5, 2015 at 22:37

Ahmadbaba46

2312 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

medievalmatt Over a year ago

That's really wierd -- that works fine on a totally plain html document, but not on my production site, whereas the other one did. I may not be giving it long enough to load, perhaps. I'm going to toggle it, go do some other things, and see if it's loaded when I get back.

medievalmatt Over a year ago

Yeah, there's another bug somewhere. I added a bit to show "Loading..." before the switch over and that displays, but the code doesn't when it finishes loading. It's probably some sort of CSS thing on the production site. I'm going to mark this the correct answer because it definitely solves my initial javascript problem.

Collectives™ on Stack Overflow

Javascript-invoked php content not displaying after load

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related