How can I use Ajax reload without breaking all jquery events?

Question

I'm trying to reproduce the loading effect we can see on the google material.io website : when selecting a menu item, the content and url change, but the sidebar doesn"t move, as if only the content was changing.. can someone can explain me how to do this ? is it like the tehcnique described on css ticks tutorial "dynamic page replacing content" or something more like ajax ?

I have this code in html :

  <div id="containerWrapper">
    <div class="flex-row">
      <div id="menu" class="flex-col-xs-12 flex-col-md-2 generator_menu">
        <nav role="navigation" id="navigation" aria-label="Menu principal">
                 MY MENU HERE
        </nav>
      </div>
      <div id="contentWrapper" class="flex-col-md-10">
        <div id="guts">
          <div  class="flex-col-xs-12 generator_main">
           MY CONTENT HERE
          </div>
          <div class="flex-col-xs-2">A sidebar dynamic TOC</div>
         
        </div>
      </div>
    </div> 
  </div>
  <footer></footer>

And the Ajax Code:

   $("#menuList a").on('click',function(e){
  e.preventDefault(); 
  pageurl = $(this).prop('href');

  $.ajax({url:pageurl,success: function(data){

    $('#contentWrapper').html($(data).find('#guts'));
           // Rerun Prism syntax highlighting on the current page
           Prism.highlightAll();
           return false;

         }});

       
        if(pageurl!=window.location){
          window.history.pushState({path:pageurl},'',pageurl);    
        }
        return false;  
      });



$(window).bind('popstate', function() {
  $.ajax({url:location.pathname,success: function(data){
    $('#guts').html(data);
  }});
});

My problem:

-All my jquery events are in a dedicated file, wrapped in a jQuery(document).ready(function($) {}.

-If I put my ajax code like this, everything works except the ajax call..If I wrap my ajax code in a jQuery(document).ready(function($) {}., ajax works but all my other jquery events are broken when I click on any menu item and reload the page.

So is there a simple trick to make ajax works together with others jquery functions ?

score 0 · Accepted Answer · answered Mar 21 '21 at 14:45

Ok, finally I followed an answer given here..

In a js file, I wrapped my ajax call in a jQuery(document).ready(function(){}/

In a separate file, I wrapped all my jquery code in a function (scroll functions, clicks on menu function, filters, show/hide functions etc.):

function initialise(){}

Then in this same second file, at the end, I throw initialize function when document is ready, and when Ajax is complete :

$(document).ready(function(){
  initialise();
});
$(document).ajaxComplete(function () {
  initialise();
});

Now everything looks fine.. If there is a better way, I'll be glad to learn more on this..

How can I use Ajax reload without breaking all jquery events?

1 Answers1