0

I have a simple async function to load php content to a div, but I must be missing something cos when I action the function twice in a row, there's a mess.

Here's my js:

function loadbox(url,targetbox){
  if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById(targetbox).innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.send();
};

And when I trigger the loadbox() with onclick, it doesn't load the content to one of the divs.

onclick="loadbox('first.php','firstdiv');loadbox('second.php','seconddiv');"

I can only guess I'm messing upthe asynchronous loading of the content, cos when I set the attribute to false in the .open(), it works ok. But then it's not what I'm looking for.

Mikey G
  • 1
  • 1
  • Where is `True` defined? Did you mean `true`? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. – Sebastian Simon Dec 28 '22 at 11:49
  • 1
    You may want to consider using `fetch` instead of XHR – Amit Dec 28 '22 at 11:50
  • I've corrected True now, it was 'true' but autocorrect changed it, facepalm. – Mikey G Dec 28 '22 at 12:00
  • The dev tools provide a **Network** tab. Is the resource _found_ (e.g. HTTP 200 response)? If not, is it blocked by an extension or the browser? Which _actual URL_ is requested? Amend the URL accordingly. Look into the **Response** tab inside the Network tab: do you receive what you expect? – Sebastian Simon Dec 28 '22 at 12:02
  • how would thet work, Amit? could you give us a sample code, please? – Mikey G Dec 28 '22 at 12:02
  • @MikeyG The [documentation](//developer.mozilla.org/en/docs/Web/API/fetch) has loads of examples. – Sebastian Simon Dec 28 '22 at 12:03
  • @Sebastian Simon - all the php I loadbox return Status 200, but they don't all actually update/load up the .php. – Mikey G Dec 28 '22 at 12:08
  • 1
    I think I might've sussed it out, despite being an idiot ;) the first loadbox was a php that was modifying the sql entries and the second one was displaying results. The problem was that it takes longer to modify database than display results, so the results div was showing empty. – Mikey G Dec 28 '22 at 12:12

2 Answers2

0

You should use xmlhttp.open("GET",url,true); not True because JS is case-sensitive language. otherwise it give you True is not defined error.

NZJL
  • 115
  • 9
  • I do have 'true', autocorrect failed in this case. I've edited it. – Mikey G Dec 28 '22 at 11:58
  • @MikeyG, I test your function in my side, the request goes to backend and response successfully. Please `console.log(xmlhttp.responseText)` tell use what will happen. – NZJL Dec 28 '22 at 12:04
  • Also as suggested by @Amit plese use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). – NZJL Dec 28 '22 at 12:06
-1

When you set it to false it sets it to sync. The third param is the async/sync switch.

When you trigger both of them it has the targetbox changed by the first method.

You can try to make an internal variable with let so it won't affect anything.

CleverSkull
  • 479
  • 3
  • 10
  • `targetbox` is a parameter, which means it’s function-scoped. How would `let` be helpful here? How is the third parameter of `open` itself relevant? Synchronous HTTP requests are deprecated anyway. – Sebastian Simon Dec 28 '22 at 12:01