Background:
I'm currently using Webpack to bundle the newly developed components on top of an existing system which uses RequireJS to load the legacy components.
Issue:
I'm trying to import JS libraries dynamically with LoadJS to increase the performance of the platform. However, it's conflicting with RequireJS.
I've used jQuery $.getScript() and $scriptjs; both results in the same error.
$(...).Modal is not a function.
My JS is as follows:
$(document).ready(function(){
$(document).on("click", ".js-my-btn", function(){
loadjs("https://unpkg.com/bootstrap#4.1.0/dist/js/bootstrap.min.js", () => {
$('#myModal').modal('show');
});
});
})
JsFiddle link without RequireJS
Libraries loaded:
jQuery
LoadJS
Upon clicking on the button, the modal is displayed. It works fine.
JsFiddle link with RequireJS
Libraries loaded:
jQuery
LoadJS
RequireJS
Upon clicking on the button, the modal is not displayed. It throws an error.
Note: Loading RequireJS before LoadJS doesn't work.
Related
I am trying to extend the hide method of the Bootstrap modal plugin. I have many modals throughout the application and I would like to have a blanket solution to close the modal when a user hits the browser back button (instead of having to add the function to each modal instance in the application)
I know in Ember JS, you can override a component by importing it, calling the super method and adding your own customization. How can I do this with a Bootstrap modal plugin? I am not familiar with how to import the node_modules file in this scenario.
Essentially, what I want to do is this as a solution for all modals in the application:
$(window).on('popstate', function() {
$('.modal').modal('hide');
});
I think every modal that is open in bootstrap has the modal-open class. If so, you can do this with jQuery. You can put this code in an instance initializer, or any place that runs before your application.
import $ from 'jQuery';
//...
$(window).on('popstate', function() {
$('.modal-open').each(function() {
$(this).modal('hide');
});
});
This doesn't have to do with Ember, just jQuery and Bootstrap. Make sure this code is not run if using Fastboot.
I'm new with VueJS and I don't find a solution to my issue.
I use a jquery plugin, zoomslider that is load in main.js inside the mounted function.
My website is multi-page and i use the router plugin to switch around, but when I back on the page where i use zoomslider,
the plugin don't reload, i think the problem is because zoomslider is loaded when DOM is ready, how can reload the plugin?
Or better where is the best practice for loading globally an external plugin?
You can do $(yourElement).zoomSlider() to load the plugin on a new element!
You can select one element, or multiple ones, inside the $ function.
I am using jQuery 3.x and Infinite Scroll 3.x (https://infinite-scroll.com) in my online shop. The online shop software I am using is called Shopify. I like it so far, but I have a big issue with my javascripts I am using. I want to use the Infinite Scroll, but all I got is a
jQuery.Deferred exception: $(...).infiniteScroll is not a function
TypeError: $(...).infiniteScroll is not a function
All I did is this the code scnippet below. When I am trying to paste it in my online shop page, I got the error above, but when I create a local index.html file and try the exact same code snippet, I got no error.
I checked already that both scripts are loaded, I even thought it might be a timeout problem, so I did a timeout just before I run the .infinteScroll method, but still, the error above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$(document).ready(function(){
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
});
</script>
I can see that you have loaded jQuery more than once in your website. Which may create conflict. Clean it up and load jQuery only once in your theme. Load all jQuery plugins after that.
I have a function on page load which initialize the slider on the page. The Problem is that on my development site every thing works fine as it should but on live site it breaks and give me following error in console.
Uncaught TypeError: $(...).carouFredSel is not a function
I also tried to call this function on document ready but changing the slider through thumbnails doesn't work and if clicking on enlarge link it give me another error
Uncaught TypeError: $(...).find(...).ensureLoad is not a function
here .ensureLoad is extended function which ensure the object loaded before it proceed further which is called like this
$.extend({
ensureLoad: function(handler) {
return this.each(function() {
if(this.complete) {
handler.call(this);
} else {
$(this).load(handler);
}
});
}
});
Following is the link to development site where it works fine [Link]
and here is the link to live site [link]
Thanks in advance.
The problem is you are having 2 versions of jQuery included in your page, http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/jquery-1.12.0.js and http://www.mobler.dk/Files/Templates/Designs/Mobler/scripts/libs/jquery-1.10.2.min.js.
Since 1.12 is included first and then the plugins, the plugins are loaded to that version of jQuery, then the 1.10 is loaded and the validation plugin. Now jQuery variable refers to the 1.10 version of jQuery which does not have any of the plugins which was loaded to 1.12.
So the solution is to remove the 1.10 jQuery from the page, or use noConflict() properly after including 1.10 so that by default the application will use 1.12.
Note: It looks like the second jQuery file is loaded to the element #popupform via the page http://www.mobler.dk/m%C3%B8bl%C3%A9r/kontaktpopup
I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.