0

I'm working with two different html files, the index that works as a template where I load other html files such as login panel, shopping cart and, the display(where products are shown) i'm using jQuery the ready method specifically, and it works fine till I try to add a slider with js which works perfectly too when I load the display file directly, the thing is the slider is applied to the display file but when I load it with jQuery it just loads it without any of its functionalities working, i'm trying to be as clear as possibly, i'll share a piece of code, I hope you guys have an idea of what's going on.

jQuery:

function loadDisplay(){
  $(document).ready(function(){
    $("div.body-wrapper").load("display.php")
  });
}

HTML:

  <body onload="loadDisplay()">
    <div class="container">
      <div class="body-wrapper"></div>

JavaScript:

var slideIndex = 0;
function slider(){
    let i;
    let x = document.getElementsByName("bloc-one");

    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex -1].style.display = "block";
    setTimeout(slider,3000);
  }

In conclusion the methods and functions work fine till the file is loaded in the index file which is where it stops working.

Danilo
  • 35
  • 4

1 Answers1

0

Your html file has <body>, but you are loading this file into already existing body. That's first issue. Second, it seems your html file executes loadDisplay() when it's loaded, however when it loaded via jquery there is no onload event fired.

So, what you need is remove <body> and </body> tags and at the very end of the file try add this javascript:

<script>
loadDisplay()
</script>
vanowm
  • 9,466
  • 2
  • 21
  • 37