Develop Reference

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

I'm exploring the option of using AJAX to give elegant page transitions.
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).
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.
Originally I had my scripts loaded into the end of each page using an embedded html file (I'm using 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.
Is there a way to tell AJAX or Barba.js to run the scripts each time it changes the page?
Here's my code to start 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{...}); is like use $(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:
view:
<div class="barba-container" data-namespace="homepage">
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

you question is quit unclear,
basically ajax is used to render loaded page, if your page is already loaded then
just add this script to your root web page, and check if it is working or not after ajax call.

Function won't run on page load

I have changed the a function to load on page load but it will not do it.
The original code which runs with a link:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: text });
});
Welcome,
This chat is awesome
My code which should run on page load:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: "{$Artikel->cName}" });
}
window.onload = updateBannerText;
I have changed updateBannerText(text) to updateBannerText() but it was not possible to run it.

The problem is that the Smartsupp widget itself only starts to load on the page load, so your window.onload function runs before the widget is properly initialized and thus has no effect. You can test this by delaying the banner update, which should have an effect:
window.onload = function () { setTimeout(updateBannerText, 5000) }
To get around this, you should attach your startup code to an appropriate Smartsupp widget event, say, the rendered event for updating the banner:
smartsupp('on', 'rendered', function() {
updateBannerText('whatnot')
})

Random duplicate content bug with Bootstrap popovers and FullCalendar

Note: I understand there's a bug in bootstrap that causes popovers/tooltips to call the content function() twice, but I do not think that is the case here.
I am using bootstrap popovers in conjunction with the FullCalendar gem to update events.
Inside the popover, there're multiple divs that get hidden/shown depending on which view the user is on (i.e. there is a view for displaying the event info and another for updating the view). The way I'm handling this is by using addClass('hide') and removeClass('hide'), so correct me if this is improper.
When I click on an event, it displays the popover with the content added it to once (good). When I navigate to the update div inside the popover and send an .ajax({type: 'PUT'}), the popover for the updated event displays two of the content divs (bad); however, this happens randomly.
If I reload the entire DOM and redo the process over and over again, this duplication happens ~half the time.
When popover is clicked just after DOM loads (good)
When popover is clicked after ajax PUT is called, this SOMETIMES HAPPENS (even if no fields are changed)
Here's how I send the .ajax request:
// SAVE button for LESSONS, POPOVER ***/
$('body').on('click', 'button.popover-lesson-save', function() {
var title = $('.popover input.popover-lesson-title').val();
var note = $('.popover input.popover-lesson-note').val();
// Retrieve event data from popover
var idStr = $('.popover div.popover-body').data('id');
var id = parseInt(idStr);
// Store event data into a hash for AJAX request and refetches events
var data = {
title: title,
note: note
};
// Make PUT AJAX request to database
$.ajax({
url: '/lessons/' + id,
type: 'PUT',
data: data,
dataType: 'json',
success: function(resp){
$('.popover div.popover-lessons-edit').addClass('hide');
$('.popover div.popover-lessons-view').removeClass('hide');
$('.popover').popover('hide');
$('#calendar').fullCalendar( 'refetchEvents' );
},
error: function(resp){
alert('Error code 2-502-1. Oops, something went wrong.');
}
});
});
And here is what I do in my FullCalendar callbacks:
// calendar options
$('#calendar').fullCalendar({
..
eventRender: function(calEvent, element, view){
if (typeof $(element).data('bs.popover') === 'undefined'){
// Find content html (append and clone prevents parent div from being overwritten)
var content = $("<div />").append($('.popover-lessons-content').clone());
var id = calEvent.id;
// Attach popover to html element
$(element).popover({
container: 'body',
placement: 'left',
html: true,
content: function(){
return content.html(); // This randomly duplicates
}
});
}
}
}

Something tells me that instead of append() here
var content = $("<div />").append($('.popover-lessons-content').clone());
you should use appendTo(). And yet not sure about purpose of clone() so I think it should look like as:
var content = $("<div />").appendTo('.popover-lessons-content');
and to avoid duplicates that $('.popover-lessons-content') thing should be cleared before appending to it.

Thanks to #c-smile, I've realised that the bug lied in how I retrieve my html template from my view file:
var content = $("<div />").append($('.popover-lessons-content').clone());
Instead, I should have done this (and this worked after much tinkering):
var content = $('.popover-lessons-content').html();
$(element).popover({
container: 'body',
placement: 'left',
html: true,
content: function(){
return content;
}
});
It takes the direct html instead of cloning the div and making a big mess.

fancybox undefined in afterShow click event

I have the following code that I call on page load:
$('#postcodes-link').fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
Now this works fine to open the fancybox (fiddle example), but when I click on the row, it doesn't close the fancybox and just throws the following error:
Uncaught TypeError: Cannot read property 'close' of undefined
yet if I make the above into a jQuery function:
(function ($) {
$.fn.setUp = function () {
return $(this).each(function () {
$(this).fancybox({
type: 'ajax',
minWidth: 800,
minHeight: 400,
afterShow: function () {
$('table.data-table > tbody > tr').on('click', function () {
$.fancybox.close();
});
}
});
});
};
})(jQuery);
and call the following in the same place as I called the top code
$('#postcodes-link').setUp();
The fancybox will now close (fiddle example). My question is why does the first one not work whereas the second one does, and how can I make the first one work? I figure it is something to do with the scope of fancybox but then I would have expected the second one not to work as it is wrapped inside a further function
Please note I have tried various version of trying to close the fancybox:
$.fn.fancybox.close()
jQuery.fancybox.close()
parent.$.fn.fancybox.close()
$('.fancybox-close').trigger('click') //tried this one as a dirty hack but didn't work either

Ok, so I found out what the problem was when trying to get the fiddle to replicate the error:
On the table page, I was using the jQuery data-table plugin so I included all the scripts need to load that. As I was ajax loading the page into the modal, it meant jQuery was being loaded for a second time on the current page. This caused the error I was seeing.
Removing the jquery script made the fancybox work as I wanted or another workaround (if you want the target page to still work if it is not opened in a modal - eg if you have other links to that page) then you will have to use a fancybox iframe instead of the fancybox ajax modal

Best method of using jquery load and re-loading a script at the same time

I have a table that uses jquery's .load function to reload all of the data in the table after something is moved.
The issue is that when the table loads, the external javascript files on the page aren't being used in the table any longer.
To resolve this issue myself, i've started using jquery's .getScript. This works (sometimes), but it's not working well. I think the script is taking a long time to load whereas the table instantly loads, resulting in the scripts messing up sometimes.
I've also tried using a function after the getScript which still seems to not work properly.
This is what i'm using currently
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$.getScript("./menu-admin.js");
$("#sortable").load("./menu-manager.php #menu-table");
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});
});
Specifically, we're looking at the "success" of the update of .sortable. Is there any better solutions to this?
My ultimate goal would be to have the script fully loaded before the table starts to load. And again, i've already tried using a function of getScript, this didn't seem to work.
I appreciate any advice, tips, or solutions provided.

Try using get() only with a callback as such:
$.get('http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js', function(response){
// Start table
});