Reinitialize plugin after AJAX loading form page.

[calej17Participant]

A colleague of mine purchased the AJAX Search Pro plugin, and has been implementing it on a project we’re working on. However, our app is an AJAX heavy application that uses a complex AJAX navigation which dynamically loads all of the site’s pages. The issue we’re running into is that the search plugin does not reinitialize for the search form when that particular page is navigated to and loaded with AJAX. It currently works only if that page is directly accessed via URL.

Is there a way to manually reinitialize the plugin via javascript after a successful AJAX request?

I might be missing something simple, but I’ve looked into the plugin’s source code and searched online for related information, but haven’t been able to find much. I’d appreciate assistance on this issue.

Thanks in advance.

[Ernest MarcinkoKeymaster]

Hi!

The problem with re-initialization is that there is no automatical way of doing it, as it’s not possible to detect from an outside scope that there was an ajax request finished and if it should re-initialize the plugin or not.

The plugin initialization is bound to the window ready event, which cannot be triggered twice. That would have been a good solution though.
What you can do is to search for the initilaization script on the page. Keep in mind that it contains parameters, which are generated dynamically if you change the settings on the back end. So I suggest only implementing this once you are done configuring the plugin.

If you open the page source and look for something like:

    jQuery(document).ready(function () {
        jQuery("#ajaxsearchpro1_1").ajaxsearchpro({
            homeurl: 'http://wp-dreams.com/demo/wp-ajax-search-pro/',
            ......
            ......
        });
    });

Its a long long code with lot’s of parameters there. What you can try to do is to put the inner part of this script into the success ajax handler function body, so your code should look something like:

$.ajax({
    type: 'GET',
    url: 'page-to-request.html',
    success: function (data, textStatus, jqXHR) {
        
       // Here is your code and stuff...    

        // Reinitialise ajax search pro, make sure the window.ready part is NOT here, only the inner part!
        jQuery("#ajaxsearchpro1_1").ajaxsearchpro({
            homeurl: 'http://wp-dreams.com/demo/wp-ajax-search-pro/',
            ......
            ......
        });

    }
});

I have no idea if this is going to work, but it’s definitely going to trigger something.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[calej17Participant]

Thank you for your reply, I appreciate the suggestion!

Your suggestion does technically work – though I’ll offer my thoughts on this for future reference and explain:
I don’t think it should be used as a long-term solution since it could be so easily broken. Any setting changes or plugin updates could break it easily. However, in the short-term, I’ve set up the relevant code like this:

I added a new JS file with a simple function containing the plugin call and parameters

initASPconfig = function() {
  var homeUrl = location.protocol + '//' + location.host + '/';
  
  aspjQuery("#ajaxsearchpro1_1").ajaxsearchpro({
    homeurl: homeUrl,
    ...
    ...
} // END initASPconfig

And then in the navigation.js AJAX success callback, I just call that function:

pageContent.load(URL + ' #page-content > *', function() {
    initASPconfig();
    ...
    ...
});

This does work, the plugin does reinitialize after the AJAX loading the search page this way. Like I said previously though, I not a huge fan of how fragile this code is. So it makes me wonder if there wouldn’t be a way to wrap the plugin’s initialization code into it’s own separate function, and then bind that function to the window ready event, and still leave the initialization function available to be called again later. I can’t say for sure without some doing some rewriting and testing, but for now thanks again for your help with this issue. I appreciate it!

[Ernest MarcinkoKeymaster]

Hi!

Yes, I’m planning to make serious changes to the javascript code as well. This is definitely not a long term solution, that’s why I suggested only to finalize once it’s done.

Unfortunately the plugin code has grown seriously over the time, and I’m focusing on bugfixes and crucial updates as much as I can every day. It’s taking me quite some time. Plus when I created the plugin I wasn’t as much experienced as now, but I can transition the code to something entirely new, because of maintaining backwards compatibility. It’s catch-22 🙂

Plus if I make a mistake (and I did many times) within an update, a nice hug of support ticket is awaiting the following week, which takes away good amounts of development time.

No worries, I’m definitely going to do something to make this much easier for developers, I would say the next major update will already have this feature implemented 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts