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.
Related
$('#popup').modal('hide');
I am trying use this code to close my modal, but it doesn't close.
I wrote this in my ts import * as bootstrap from "bootstrap";.
My Imports in html
What can I do to get it working?
You should look at the documentation again to read the right implementation. Also, it looks like you are using Bootstrap 5. You are writing the hide() for older bootstrap versions.
I recently built a website that uses a router system to load each page via ajax. The site is compiled using webpack and is structured as ES6 JavaScript modules. I am using some third-party jQuery plugins that only work if you refresh the page.
My question is how do I reinitialize or load third-party jQuery plugins and/or scripts using ES6 JS after an ajax page load?
For example, I am using the Elevate Zoom plugin to add an image zoom on images. When I navigate to another page on the site that uses this, the zoom breaks and only works again when re-loading the page.
$("#img_01").elevateZoom();
Something like the below?
import { component } from 'picoapp';
// import elevate zoom
// import jQuery
export default component(() => {
// reinitialize plugin here?
//$("#img_01").elevateZoom();
})
Yeah, so it seems to have worked. Dah. I guess I didn't think it would using jQuery inside ES6 so thanks for the gentle nudging!
I should've said I'm very new to ES6 and the world of Webpack.
import { component } from 'picoapp';
import $ from "jquery";
import zoom from '../lib/elevatezoom.js'
export default component(() => {
$(".zoom").elevateZoom({
zoomType: "inner",
cursor: "zoom-in"
});
})
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.
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.
When using twitter bootstrap you can attach plugins in your Javascript or via data attributes. For example a modal can be made like this:
Launch demo modal
<div id="myModal">Hello</div>
Or like this:
In the HTML:
Launch demo modal
<div id="myModal">Hello</div>
In the js file:
$('.launch-modal').on('click', function() {
$('#myModal').modal('show');
});
At first I thought using data attributes would be slower since bootstrap probably scans the entire page on dom ready to see which (if any) elements are attached to what plugins, but then realized if this is the case bootstrap is doing this scanning regardless whether you attach plugins via data attributes of not in order to make the necessary check.
Is there any performance benefits of one over the other?