如何使用Ajax加载来评估javascript代码

How to eval javascript code with Ajax loading

本文关键字：评估 javascript 代码 加载 何使用 Ajax      更新时间：2023-09-26

我们已经测试了一个自定义的ajax导航，现在我们使用Turbolinks，但他不支持IE8&9.所以现在我们想使用兼容全浏览器的智能链接。

但是我们很难在每个页面之间执行Javascript代码。

这里的代码：

application.js

//= require jquery
//= require jquery_ujs
//= require jquery.role
//= require wiselinks
//= require_tree ../..
//= require_self
var startSpinner, stopSpinner;
startSpinner = function() {
  $('#loading-indicator').show();
};
stopSpinner = function() {
  $('#loading-indicator').fadeOut();
};
$(document).ready(function() {
  window.wiselinks = new Wiselinks($('#PageContainer'));
  $(document).off('page:loading').on('page:loading', function(event, $target, render, url) {
    console.log("Loading: " + url + " to " + $target.selector + " within '" + render + "'");
    startSpinner();
  });
  $(document).off('page:redirected').on('page:redirected', function(event, $target, render, url) {
    return console.log("Redirected to: " + url);
  });
  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
  });
  $(document).off('page:done').on('page:done', function(event, $target, status, url, data) {
    console.log("Wiselinks status: '" + status + "'");
  });
  $(document).off('page:fail').on('page:fail', function(event, $target, status, url, error, code) {
    console.log("Wiselinks status: '" + status + "'");
  });
});

job.js:

$('@JRP').ready(function(){
    console.log('AVF');
    var $container = $("#component-view .list");
    $container.isotope({
        itemSelector: '.job',
        masonry: {
            gutterWidth: 0
        }
    });
    $container.toggleClass('grid').toggleClass('list').isotope( 'reLayout' ).isotope();
        // creates select dropdown
    $("#job-result-options-filter").click(function(e){
        $("#facetwrapper").slideToggle();
    });
    $("#job-result-options-filter").pageslide({ href: '#facets' });
    $('#toggle-sizes').click(function(){
        $container
                .toggleClass('grid')
                .toggleClass('list')
                .isotope('reLayout');
        return false;
    });
});

如果我对页面Job进行空白刷新，则执行JS，但如果我来自加载ajax的链接，则不执行JS，并且我的错误日志中没有任何内容。

如何调试？或者在呈现作业页面时找到执行JS的方法？

此处使用的宝石：https://github.com/igor-alexandrov/wiselinks

我的解决方案非常简单。我们的想法是不要调用文档上的自定义代码。相反，将它们全部封装到一个jQuery函数中，然后在文档就绪和页面：完成时调用该函数。

// You custom code
$.fn.my_app_init = function() {
 console.log('AVF');
 //...
 $('#toggle-sizes').click(function(){
 //...
};
$(document).ready(function() {
  $(document).my_app_init(); // Call this function
  window.wiselinks = new Wiselinks($('#PageContainer'));
  $(document).off('page:always').on('page:always', function(event, xhr, settings) {
    console.log("Wiselinks page loading completed");
    stopSpinner();
    $(document).my_app_init(); // Call this again on page change.
  });     
});
相关文章：