0

I'm having a problem converting a jquery function into pure javascript, the code is mainly a .load() jquery function, it works perfectly in jquery, but doesn't in javascript. Here is the jquery code:

 var encodedUrl = encodeURI(url + "&userID="+userID);
 $("#wrapper").load(encodedUrl , function () {
      $('#cover').hide();
      completeLoadingBar();
      $("#mainContainer").scrollTop(0);
 });

here is the javascript:

var encodedUrl = encodeURI(url + "&userID="+userID);    
document.getElementById("wrapper").addEventListener("load", encodedUrl, function() {
    document.getElementById("cover").style.display = "none";
    completeLoadingBar();
    document.getElementById("mainContainer").scrollTop = 0;
 });
Adil Bimzagh
  • 224
  • 1
  • 9
Kennie Adams
  • 1
  • 1
  • 2
    `.load()` jquery method is shorthand for an ajax/XMLHttpRequest GET. It's not the same as "when loaded" event listener. This might help: [you might not need jquery](http://youmightnotneedjquery.com/#request) – freedomn-m Aug 17 '21 at 11:22
  • plus ... `addEventListener("load", encodedUrl, function()` second argument to addeventlistener should be a funciton – Bravo Aug 17 '21 at 11:22

1 Answers1

0

The load() function in jQuery is basically a XMLHttpRequest just like the fetch() function in JavaScript.

For the example I replaced the encodedUrl with a data URI, so that you can see the functionality.

var url = "https://example.org";
var userID = 1;
var encodedUrl = encodeURI(url + "&userID=" + userID);

const completeLoadingBar = () => {
  return true;
};

fetch('data:text/html;base64,PHA+aHRtbCBkYXRhPC9wPg==')
  .then(response => response.text())
  .then(text => {
    document.getElementById("wrapper").innerHTML = text;
    document.getElementById("cover").style.display = "none";
    completeLoadingBar();
    document.getElementById("mainContainer").scrollTop = 0;
  });
<div id="wrapper">wrapper</div>
<div id="cover">cover</div>
<div id="mainContainer">mainContainer</div>
chrwahl
  • 8,675
  • 2
  • 20
  • 30