CODEWITHSUNDEEP
javascriptjqueryhtmlpjax
gentrobot
gentrobot

Reputation: 671

How to invoke jquery that was called on $(document).ready(), when making pjax call?

I am a pjax beginner and not sure if the way I am implementing it, is correct. I had an old project with a lot of jquery. To organize it a little, the method that I followed was, to assign a unique ID to the body of each page <body id="Login">. In my layout, I had written the code:

var page = $('body').attr('id');
if(page !== '' && typeof self[page] != 'undefined')
   self[page].init();

For page specific jquery, I had written something like this:

var Login = (function() {
    var funct = {};

    //any variables, only required on this page

    funct.someFunction = function(){
      //code
    }

    funct.init = function(){
        //all the functions that are to be called on page load
    }
    return funct;

})();

Now, on each page load, only the code required on the page is executed. However, I am now making most of the link to a pjax link. So, on login page, there is a link:

<a data-pjax href="/register">Register</a>

and the layout has the code:

$(document).pjax('a[data-pjax]', '#pjax-container');

This opens up the register page. However, since the body id was still "Login", it didn't load Register.init().

How do I get past this?

Upvotes: 0

Views: 80

Answers (1)

Brian Glaz
Brian Glaz

Reputation: 15686

I have never used pjax but according to their documentation you can add an event listener to run some code after a page change is complete

$(document).on('pjax:end', function(event) {
  //
})

You should be able to do something with event.target, which should hopefully be the link that was clicked, in order to figure out what the new page is.

Upvotes: 1

Related Questions