Question

I have an AJAX call that binds to the window popstate event. It works, except that I’m parsing the arguments from the querystring. The problem is the ajax call is bound to the window when the page loads, so my arguments don’t change when the url does. I’m thinking if I add a listener to the window, if I could just execute the ajax call rather than binding it, it would reparse the querystring each time.

for example if the page loads domain.com?x=1&y=2 then my call sends x=1 and y=2. But when the popstate fires and it becomes domain.com?x=1&y=2&z=3 it still sends x=1 and y=2.

here is my call

var ajax_path = Drupal.settings.views.ajax_path;
$.each(Drupal.settings.views.ajaxViews, function (i, settings) {
    var view = '.facetapi-facetapi-links';
    element_settings = {
        url: ajax_path,
        submit: settings,
        setClick: false,
        event: 'popstate',
        selector: view,
        progress: { type: 'throbber' }
    };
    var viewData = {};
    $.extend(
        viewData,
        settings,
        Drupal.Views.parseQueryString(document.URL),
        Drupal.Views.parseViewArgs(document.URL, settings.view_base_path)
    );
    $.extend(viewData, Drupal.Views.parseViewArgs(document.URL, settings.view_base_path));
    element_settings.submit = viewData;
    var ajax = new Drupal.ajax(false, window, element_settings);
});

what I was thinking was doing something this, but I’m not sure how. Or is it possible to use Drupal.ajax.prototype.beforeSend somehow?

window.addEventListener("popstate", function(e) {
    //execute ajax here so it reparses document.url
}

Answer 1

I came up with this solution, I’m using a custom event, so that I can trigger the event manually

window.addEventListener("popstate", function(e) {        
    $(window).unbind('custom');
    $.each(Drupal.settings.views.ajaxViews, function (i, settings) {
        element_settings = {
            url: Drupal.settings.views.ajax_path,
            submit: settings,
            setClick: false,
            event: 'custom',
            selector: '.facetapi-facetapi-links',
            progress: { type: 'throbber' }
        };

        var viewData = {};
        $.extend(
            viewData,
            settings,
            Drupal.Views.parseQueryString(document.URL),
            // Extract argument data from the URL.
            Drupal.Views.parseViewArgs(document.URL, settings.view_base_path)
        );

        $.extend(viewData, Drupal.Views.parseViewArgs(document.URL, settings.view_base_path));

        element_settings.submit = viewData;

        var ajax = new Drupal.ajax(false, window, element_settings);
        console.log(element_settings);
    });
    $(window).trigger('custom');
});