0

カスタム ajax ナビゲーションをテストしました。現在は Turbolinks を使用していますが、IE8 と 9 はサポートしていません。

しかし、各ページ間で Javascript コードを実行するのに苦労しています。

ここにコード:

アプリケーション.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 + "'");
  });
});

ジョブ.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;
    });

});

ページジョブの空白の更新を行うとJSが実行されますが、ajaxをロードするリンクから来た場合、JSは実行されず、エラーログには何も表示されません。

どうすればこれをデバッグできますか? または、ジョブページが render のときに JS を実行する方法を見つけますか?

ここで使用される宝石: https://github.com/igor-alexandrov/wiselinks

4

1 に答える 1