简体   繁体   English

使用AJAX(Barba.js)加载新页面后脚本未加载

[英]Scripts not loading after loading new page using AJAX (Barba.js)

I'm exploring the option of using AJAX to give elegant page transitions. 我正在探索使用AJAX进行优雅的页面过渡的选项。

I've tried two methods, the first being a manually coded option taken from this page ( https://codyhouse.co/gem/animated-page-transition ) and the second option using Barba.js ( http://barbajs.org ). 我尝试了两种方法,第一种是从此页面获取的手动编码选项( https://codyhouse.co/gem/animated-page-transition ),第二种是使用Barba.js的选项( http:// barbajs。 org )。

With both options the scripts on the website work when the first page is loaded, but when a link is clicked and a different page is loaded via AJAX, none of the scripts work. 使用这两个选项时,加载第一页时网站上的脚本均有效,但是单击链接并通过AJAX加载其他页面时,这些脚本均无效。

Originally I had my scripts loaded into the end of each page using an embedded html file (I'm using ExpressionEngine). 最初,我使用嵌入式html文件将脚本加载到每个页面的末尾(我正在使用ExpressionEngine)。 After reading a number of posts on this site I thought it might help to put the scripts into their own JS file so that this is cached and each page can then use these scripts but this didn't work either. 在阅读了该站点上的许多帖子之后,我认为将脚本放入其自己的JS文件中可能会有所帮助,以便将其缓存,然后每个页面都可以使用这些脚本,但这也不起作用。

Is there a way to tell AJAX or Barba.js to run the scripts each time it changes the page? 有没有办法告诉AJAX或Barba.js每次更改页面都运行脚本?

Here's my code to start Barba: 这是我启动Barba的代码:

<script type="text/javascript">
    $(document).ready(function () {
        // START BARBA.JS
        Barba.Pjax.start();
        // BARBA.JS PAGE TRANSITIONS
        Barba.Pjax.start();
        var FadeTransition = Barba.BaseTransition.extend({
          start: function() {
            /**
             * This function is automatically called as soon the Transition starts
             * this.newContainerLoading is a Promise for the loading of the new container
             * (Barba.js also comes with an handy Promise polyfill!)
             */
            // As soon the loading is finished and the old page is faded out, let's fade the new page
            Promise
              .all([this.newContainerLoading, this.fadeOut()])
              .then(this.fadeIn.bind(this));
          },
          fadeOut: function() {
            /**
             * this.oldContainer is the HTMLElement of the old Container
             */

            return $(this.oldContainer).animate({ opacity: 0 }).promise();
          },
          fadeIn: function() {
            /**
             * this.newContainer is the HTMLElement of the new Container
             * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
             * Please note, newContainer is available just after newContainerLoading is resolved!
             */
            var _this = this;
            var $el = $(this.newContainer);
            $(this.oldContainer).hide();
            $el.css({
              visibility : 'visible',
              opacity : 0
            });
            $el.animate({ opacity: 1 }, 400, function() {
              /**
               * Do not forget to call .done() as soon your transition is finished!
               * .done() will automatically remove from the DOM the old Container
               */
              _this.done();
            });
          }
        });
        /**
         * Next step, you have to tell Barba to use the new Transition
         */
        Barba.Pjax.getTransition = function() {
          /**
           * Here you can use your own logic!
           * For example you can use different Transition based on the current page or link...
           */
          return FadeTransition;
        };
    });
</script>

And here's the script that I'm trying to get to work: 这是我要开始工作的脚本:

// DROPDOWN MENU
$(function(){
    $("ul.dropdown li").hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").addClass("arrow");
});

Thanks in advance, 提前致谢,

Tom 汤姆

I don't meet barba.js, but in jquery when we use $(function{...}); 我没有遇到barba.js,但是在jQuery中,当我们使用$(function {...}); is like use $(document).ready(function(){...}); 就像使用$(document).ready(function(){...}); It's launched when document is ready. 准备好文档后启动。 Probably is not launched when your animation ends. 动画结束时可能未启动。 I'm not sure, but you can try creating different views, and write your custom javascript code inside onEnter callback method: 我不确定,但是您可以尝试创建不同的视图,然后在onEnter回调方法中编写自定义javascript代码:

view: 视图:

<div class="barba-container" data-namespace="homepage">

javscript: javscript:

var Homepage = Barba.BaseView.extend({
  namespace: 'homepage',
  onEnter: function() {
      // The new Container is ready and attached to the DOM.
       YOUR JS !!!!

  },
  onEnterCompleted: function() {
      // The Transition has just finished.
  },
  onLeave: function() {
      // A new Transition toward a new page has just started.
  },
  onLeaveCompleted: function() {
      // The Container has just been removed from the DOM.
  }
});

// Don't forget to init the view!
Homepage.init();

http://barbajs.org/views.html http://barbajs.org/views.html

您的问题是否明确还不清楚,基本上ajax用于呈现已加载的页面,如果您的页面已被加载,则只需将此脚本添加到您的根网页,并在ajax调用后检查其是否正常工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM