Javascript/AJAX Only Works When Debugging

Question

Currently I'm trying to populate a site dynamically. When I step through the code, it works perfect. However, when I run it on page load as intended, it doesn't work. The relevant code is:

<body onload="populate_all(string)";>

function populate_all(string)
{
  var split = string.split(" ");
  for(i = 0; i < split.length; i++)
  {
    populate(split[i], 'main'); 
  }
} 

function populate(string, location)
{
  if (string.length==0)
  { 
   document.getElementById(location).innerHTML="";
   return;
  }

  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
        var divTag = document.createElement("div");

        divTag.className ="info";

        divTag.innerHTML = xmlhttp.responseText;

        document.getElementById(location).appendChild(divTag);
  }
 }
 xmlhttp.open("GET","populate.php?string="+string,true);
 xmlhttp.send();
 }

I've read up on this issue enough to be pretty sure the php isn't the issue. Basically: I'm running a javascript function with AJAX several times in a loop and the code only works when I debug it. Thanks for the help!

Sorry, "it doesn't work" isn't real clear. Instead of creating the divs I want, which is several divs with different information, it creates either only the last div or four instances of the last div. — NSchulze
– NSchulze, Commented Apr 8, 2012 at 16:03

Rob W · Accepted Answer · 2012-04-08 14:21:18Z

0

Declare xmlhttp locally.
Use a different variable name as location. location is a global variable, which holds properties and methods to manipulate the current location.
```
function populate(string, s_location) {
    var xmlhttp;
```

Currently, you keep overwriting the xmlhttp variable in the populate method. As a result, the xmlhttp object points to the last request.

answered Apr 8, 2012 at 14:21

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

1 Comment

NSchulze Over a year ago

That did the trick! I love it when things are that simple. Thanks!

Community · Accepted Answer · 2017-05-23 12:11:11Z

0

For me it was this: Use javascript variable outside success function

When making calls to $.getJSON etc, with the debugger attached it fixes/alters the timing and scoping. I was updating a table cell value from an xhr response fired by timed background events, and I needed to be doing the cell updates in the nested success functions. With the debugger attached things magically worked.

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 23, 2014 at 16:01

user326608

2,5782 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript/AJAX Only Works When Debugging

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related