Question

我使用pjax来调整我的菜单链接。这工作正常，直到我使用浏览器后退按钮。在我的javascript文件中，我使用Common Script文件（当用户点击url时加载所有必需的js文件）和关于每个菜单链接的脚本文件（当通过pjax导航时）

function myFunction(){
/*All the script files */
}

$(document).ready(function(){
myFunction();

/*pjax menu loading block*/
$(document).on('click', 'a[data-pjax]', function(event) {
      $.pjax.click(event, '#pjax-container');
      $(document).on('pjax:end', function() {
          myFunction();  
      });

});
});

现在，当我导航到一个菜单项并尝试通过单击浏览器后退按钮返回时，脚本文件正在重复（例如：滑块图像重复并且表格排序不起作用）。如何克服此问题？< / p>

Answer 1

您可以通过这种方式实现特定于URL的加载，创建一个要在pjax上加载和卸载的函数队列

解决方案基于js原型设计

// create queue for load and unload
var onLoad = new PjaxExecQueue();
var onUnload = new PjaxExecQueue();

// way to add functions to queue to run on pjax load
onLoad.queue(function() {
    someFunction();
});

// way to add functions to queue to unload on pjax load
onUnload.queue(function() {
    someOtherFunction();
});

// load function if url contain particular path name
onLoad.queue_for_url(function_name, 'url_section');

// check for url specific function
var URLPjaxQueueElement = function(exec_function, url) {
    this.method = exec_function;
    if(url) {
        this.url = new RegExp(url);
    } else {
        this.url = /.*/;
    }
};

// create a queue object
var PjaxExecQueue = function () {
    this.url_exec_queue = [];
    this.id_exec_queue = [];
    this.fired = false;
    this.indicating_loading = false;
    this.content = $('#content');
};


PjaxExecQueue.prototype = {
    queue: function (exec_function) {
        this.url_exec_queue.unshift(new URLPjaxQueueElement(exec_function));
    },
    queue_for_url: function (exec_function, url_pattern) {
        this.url_exec_queue.unshift(new URLPjaxQueueElement(exec_function, url_pattern));
    },
    queue_if_id_present: function(exec_function, id) {
        this.id_exec_queue.unshift(new IDPjaxQueueElement(exec_function, id));
    },
    fire: function () {
        if(this.indicating_loading) {
            this.content.removeClass("indicate-loading");
            this.indicating_loading = false;
        }
        if(!this.fired) {
            var match_loc = window.location.pathname;
            var i = this.url_exec_queue.length;
            while(i--) {
                this.url_exec_queue[i].fire(match_loc);
            }

            i = this.id_exec_queue.length;
            while(i--) {
                this.id_exec_queue[i].fire(match_loc);
            }
        }
        this.fired = true;
    },
    reset: function() {
        this.fired = false;
    },
    loading: function () {
        this.content.addClass("indicate-loading");
        this.indicating_loading = true;
        this.reset();
    },
    count: function () {
        return exec_queue.length;
    },
    show: function (for_url) {
        for (var i=0; i < exec_queue.length; i++) {
            if(for_url) {
                if(exec_queue[i].url.test(for_url)) {
                    console.log("" + exec_queue[i].method);
                }
            } else{                                                                                                                                                                        
                console.log(exec_queue[i].url + " : " + exec_queue[i].method);
            }
        }
    }
};

// before send
$(document).on('pjax:beforeSend', function() {
   onLoad.loading();
   onUnload.fire();
});

// after pjax complete
$(document).on('pjax:complete', function() {
   onLoad.fire();
   onUnload.reset();
});

pjax / ajax和浏览器后退按钮问题

1 个答案: