We Keep Coding

Bootstrap 4 tooltips stop working after jquery-pjax AJAX call

I'm new to javascript and could use your help. The first time my PJAX page loads, my tooltips work:
$(document).ready(function() {
$(document).pjax('a', '#main', {cache: false});
$('[data-toggle="tooltip"]').tooltip();
}
They become stuck unless I do the following:
$(document).on('pjax:start', function(event) {
$('[data-toggle="tooltip"]').tooltip('dispose');
});
I've tried to reinitialize them on pjax:end or pjax:complete with no luck. I get a strange-looking tooltip if I hover a long time, but not a bootstrap tooltip.
How do I reinstall tooltips after the XHR completes?
Bootstrap v4.0.0-beta.2
https://v4-alpha.getbootstrap.com/components/tooltips/
https://github.com/defunkt/jquery-pjax

I was using a script block outside of my pjax container #main. When I move the code below to the bottom of the lowermost script block returned inside the container, life is good. The tooltip isn't stuck when I use a keyboard shortcut to do an AJAX navigation or when I click on a tooltipped checkbox. The tooltip is a bootstrap tooltip when I first load the page and when I use AJAX to arrive at the page. (I'm not sure if I need the call to off() but it shouldn't hurt.)
$('[data-toggle="tooltip"]').tooltip();
$(document).off('pjax:start');
$(document).on('pjax:start', function(event) {
$('[data-toggle="tooltip"]').tooltip('dispose');
});

Does the following work?
$(document).ready(function() {
$(document).on('pjax:success', 'a[data-pjax]', function(event) {
$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip();
});
$(document).pjax('a', '#main', {cache: false});
});

Delaying javascript $(window).load

I realize that there are tons of posts on this website that ask about how to delay JavaScript. I have tried numerous ways, but since I am not knowledgeable on JavaScript, I have no idea how to do it.
I am trying to delay the following JavaScript code for 3 seconds. It launches a Bootstrap modal upon page load.
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
I have tried the following things, but they seem to either break the code, or do not work.
setTimeout(function() {
$(window).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
},"3000");
(breaks it)
$(window).load(function(){
$('#leave').delay(3000).modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
$(window).delay(3000).load(function(){
$('#leave').modal({
show : true,
backdrop : 'static'
});
});
(doesn't delay it)
If anyone could help me figure out how to delay the code for 3 seconds, I would much appreciate it, thanks.

Try this,
$(window).load(function(){
setTimeout(function() {
$('#leave').modal({
show : true,
backdrop : 'static'
});
},3000);
});
.delay() only delays execution of subsequent items in the queue ( animation ).

jQuery gallery not triggering after Ajax

I am using a jQuery pop-up script Magnific Popup. It works well in a WooCommerce store but when I filter products using an Ajax Filter Plugin (YITH) it stops triggering. I understand this is because Ajax has changed the page and so the event is no longer bound to the link class in the page but not sure how to solve it.
From what I have read I can use on but I am unsure how this applies to the way I am triggering the Magnific Popup script which is below.
jQuery('.product').magnificPopup({
type:'inline',
midClick: true,
gallery:{
enabled:false
},
delegate: 'a.wpb_wl_preview',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: false,
});

Thank you all. I have found there is a jQuery function to detect when Ajax has been executed which is below. Not sure if this is the best method, so interested to see other answers but this works.
jQuery(document).ajaxSuccess(function() {
//code to trigger here
});

Fancybox works just once

I working in code where they use fancybox to bring up a form.
It works just as it should at first time, in second time, the background site dispose ( because of the applied theme ), but the Fancybox does not load.
This code is used to initialize the Fancybox.
$(document).ready(function() {
$(".fancybox").fancybox({
type: 'ajax',
onCleanup: function() {
var myContent = this.href;
$(myContent).unwrap();
console.log("Element was clean");
}
});
});
I did add this console.log to check when onCleanup is been called, but it never does.

How to open a magnific popup on page load?

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup.
I got the plugin to work fine, but I have no idea on how to get it to pop up as soon as the page loads, without clicking on the thumbnail.
I looked around for a solution, but I did not manage to get it to work.

If you're using jQuery you could just listen for the window load event and then call the open method for your Magnific Popup like so:
(function($) {
$(window).load(function () {
// retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
});
})(jQuery);

I was able to get a timed modal working using jquery's setTimeout function, Just wrap .magificpopup in the settimeout function to set a delay. Change the value of 5000 (5 seconds) to whatever value you want.
See below:
$(document).ready(function () {
setTimeout(function() {
if ($('#myModal').length) {
$.magnificPopup.open({
items: {
src: '#myModal'
},
type: 'inline'
});
}
}, 5000);
});