How to open/close modal in tailwind-elements with javascript function? - javascript

I use modal from https://tailwind-elements.com/docs/standard/components/modal/
in laravel/alpinejs app and looking at these examples I see that modal is opened/closed with
data-bs-target link .
How can I open/close this modal with javascript?
I need to assign on Save button javascript function and run axios request.
On succes I need to hide this modal
Thanks!

Related

jQuery remove script effect came from ajax

I have customised nested modal script (jQueryModal) to better match project need, but I'm facing some weird issue that I am unable to get
I call that modal to load some contents via ajax, and response from that ajax contains some javascript code along with html and appneds to modal body.
All those javascript code (from ajax response) works perfectly.
Then, when that modal is closed I remove whole modal block and it's content (that ajax responded html + javascript)
But when I reopen same modal, old script has left effect
Example, Modal A opened with ajax content, in that content there's [BUTTON] to call another ajax (will open another modal), lets call it Modal B
In Modal B, there's select dropdown which calls ajax on change, which is fine so far.
Now I close Modal B and reopen it by clicking that same [BUTTON] on Modal A, and then Modal B opens but this time Modal B's select dropdown will call twice upon change
I doubt remove js code on modal close is not enough
What could be problem and solution for that?
Thanks for any help in advance
Thanks to #Taplar for help, I got the problem and could able to solve it by little googleing and solution was to use jQuery's off
example:
$('.button').off('click').on('click', function(){ ... });
same way for select dropdown:
$('select').off('change').on('change', function() { ... });

close two modals at same time (modal inside a modal)

I have a View/Edit button in my angular application which shows the details of user in a modal when clicked In modal it has Save and delete buttons. When they click on delete button the user will be deleted. Before they delete, I want to show a delete confirmation.
So, I'm showing the delete confirmation modal inside the first modal.
Now, I want to dismiss the two modals when they click on final delete button. I tried using
data-dismiss= "modal" so that the modal closes automatically, but this is closing only the second modal which is above the first modal. How would I close both modals at a time?
And also I feel that this is not a good idea to have 2 modals like this. Is there any alternative to this?
Thanks!
Please let me know if any code or more information is needed

Bootstrap Modal closing when any modal inside is closed

I am using basic bootstrap modal inside which there is a summernote text area. Problem is when I click on the insert picture button in summernote, it again opens a modal to choose the picture, but if I click on the modal close button of the summernote picture modal without choosing the picture, it closes the main modal too.
I don't want to close the main modal when modal close of the picture modal is clicked. Any help would be appreciated....
Check that these modals do not share the same id attribute
Also check that they do not share the same name attribute
you can give them separate names manually (like numbers: modal1)
you can also name them automatically with your server-side language when creating them, or with JavaScript upon load, but remember to reference these names correctly in the references, buttons & functions that close them.
#argon 's solution didn't work for me.
But I found this solution (provided here):
('#HtmlContent').summernote( {
dialogsInBody: true,
});

Bootstrap modal window does not close

I am using Bootstrap modal in a react application . I have a requirement that the modal window should not close when clicking on modal backdrop . For this I am using
$(".modal").modal("backdrop":"static");
which works perfectly fine . But in the next scenario , I want the same modal to close on clicking on backdrop using the following code.
$(".modal").modal("backdrop":true);
But this is not working .
I tried this too
$('#modal').modal('hide');
Please provide a feasible solution for the same.
To close bootstrap modal you can pass 'hide' as option to modal method as follow
$('#modal').modal('hide');
Bootstrap also provide events that you can hook into modal functionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event you can read more about modal methods and events here in Documentation
When you pass an object to the modal function, you can pass these properties
For closing the modal, you should use $(".modal").modal("hide") link

jQuery magnific-popup submit button

Is it possible to make an extra button on the jquery magnific-popup component, with the functionality to close the dialog?
I'm using the component to add a description to a photo, therefor I'll need a submit button that will add the description via ajax to the photo (this happens already) but the dialog isn't closing...
After reading the doc closely you can do it like:
$.magnificPopup.close(); // Close popup that is currently opened (shorthand)
$('.element-with-popup').magnificPopup('close'); // Will closethe popup

Categories

Resources