We Keep Coding

Reinitialize Javascript after AJAX refresh

We are using the Easy Video Player in on a WordPress website in combination with FacetWP. This is software we use to filter. This filter is working with AJAX and there is no page refresh after an interaction with the filter, it is done with AJAX.
This is causing problems with the Video player we are using. We think some Javascript is not loaded because of the AJAX refresh with the filter.
We allready know this from FacetWP in order to reinitialize Javascript after interaction with the filter:
facetwp-loaded Event
We also found the PHP script that enqueue the CSS and JS files.
function easy_video_player_enqueue_scripts() {
if (!is_admin()) {
$plugin_url = plugins_url('', __FILE__);
$enable_jquery = get_option('evp_enable_jquery');
if ($enable_jquery) {
wp_enqueue_script('jquery');
}
//wp_register_style('plyr-css', 'https://cdn.plyr.io/3.6.7/plyr.css');
wp_register_style('plyr-css', $plugin_url . '/lib/plyr.css');
wp_enqueue_style('plyr-css');
//wp_register_script('plyr-js', 'https://cdn.plyr.io/3.6.7/plyr.js');
wp_register_script('plyr-js', $plugin_url . '/lib/plyr.js');
wp_enqueue_script('plyr-js');
}
}
But to be very honest, I can't figure out what I have to load in the FacetWP function in order to re-run the JS to get the player working with filtering.
Anyone can help me a step furder in order to fix this?
EDIT
Got it to work with the help of John:)
const player = Plyr.setup('video', { ratio: '16:9', });
Complete code looks like this:
<script>
document.addEventListener('facetwp-loaded', function() {
const player = Plyr.setup('video', { ratio: '16:9', });
});
</script>

It´s just a wild guess by looking into the videoplayersource and combine with the facetwp-loaded event.
maybe it works when you add this handler to the bottom of your page (not the content loaded with ajax):
document.addEventListener('facetwp-loaded', function() {
const players = Plyr.setup('video');
});
if you are getting $ is not defined, try replace $ with jQuery
PS: i just realize that your version of easy-video-player differs from the link i posted above, maybe you should upgrade it to the latest version so it uses flowplayer like in this answer

FullPage JS: How to disable it for an unique page?

I have a problem with FullPage JS, and I come to ask for help :)
My problem is: I want to disable FullPage for a single page of my Website.
FullPage is made for little page, but my website has 1 long page, where I want to disable FullPage.
The file has the .ejs extension, instead of .html extension. The pages are in different EJS file.
I searched on the FullPage's Github, and it indicates me the destroy('all') method, but I've found a lot of way to write it, I tried 3 methods, and I don't know why, it doesn't work.
Does any of you know how to disable FullPage JS on a single page of the Website ?
I tried 3 methods.
1st Method tried:
document.querySelector('#destroy').addEventListener('click', function(e){
e.preventDefault();
fullpage_api.destroy('all');
});
2nd Method:
$('#destroy').click(function () {
$.fn.fullpage.destroy('all');
});
3rd Method:
function DestroyFullPage() { //default is 700.
$.fn.fullpage.destroy('all');
}
As Alvaro suggested, I tried something like this:
<script>
window.onload = function() {
alert('Ready ?');
fullpage_api.destroy('all');
alert('Done');
}
</script>
The first alert works fine, but the second never appear on my screen, and FullPage isn't destroyed.
Am I wrong in my syntax ?
Thanks
PS: Excuse my English, I'm french, but at least, I try :D

If you wonder how to use the destroy function, you can check the demo provided on the fullPage.js docs:
https://codepen.io/alvarotrigo/pen/bdxBzv
Which basically uses fullpage.js version 3 (no jQuery required) to do so:
fullpage_api.destroy('all');
There's no difference at all between your 2nd method and the 3rd one. In fact, 3rd method won't work until you call the DestroyFullPage somewhere else.
And the 1st one should only be used when initialising fullPage.js with jQuery. So, using $('#fullpage').fullpage(options) instead of new fullpage('#fullpage', options);

Script works only on homepage

I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.

Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});

For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.

Document.Onload doesn't work properly in Kik

I was recently trying my best to create a Kik app that dynamically loaded some content -- messages -- into a textbox when the app launched. document.onload wasn't doing it for me. I tried JQuery's $(document).ready and $(window).load to no avail.
Simple code snippets like this were failing, and I couldn't understand why. They would refuse to function until I attempted to interact with another UI element, resized the screen by rotating my phone, etc...
$(document).ready(function() {
kik.getUser(function(user) {
$('#myDiv').html(user.username);
});
}
This was pretty infuriating... why could I not get Kik to do both in-getUser functions and regular onLoad ones?

Don't ask me why, but this works. I'm just going to assume that you CANNOT wrap kik.getUser in a $(document).ready statement!
But who cares -- if kik.getUser works, then you already have access to the DOM. Cheers!
// Kik user-specific JS
if(kik.utils.platform.browser.kik) {
kik.getUser(function (user) { if ( user ) {
$('#message').html("I work now.");
}});
});
// Kik-agnostic JS
$(document).ready(function() {
$('#version').html("I work now too.");
});

main slider not working due to diapo slider

On my website(http://cpshostworks.com/xpertisegulf.com/test12/index.html), the main slider is not working after I put the DIAPO slider. It is caused due to a conflict between 2 jquery files.
Could anyone please help in fixing this issue. I am unable to understand what needs to be done here. I want both the sliders to work (main slider & our partners slider)
I am stuck with this situation for the past one week.
Regards,
Josh

If conflicts occurred between 2 or more jQuery libraries, what I usually do is wrapping $(document).ready function like this:
(function ($) {
$(document).ready(function(){
//here you can call your plugin function
});
})(jQuery);
It prevents libraries conflict.
For more information, visit this link http://api.jquery.com/jquery.noconflict/
EDIT: Please note that you should do it for every jQuery plugin separately. So if you want to call another plugins function, you should wrap it again in different scope.
SECOND EDIT After inspecting your code in console I founded errors. Instead of
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
try with
(function ($) {
$(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
})(jQuery);
and do it for all following functions calls.