JavaScript in Modals about laravel-enterprise-starter-kit HOT 5 CLOSED

Hey Matthew,

Initially I thought that it might be the nature of bootstrap modals: if a piece of JavaScript is loaded in a modal, all of it gets evaluated and if you happen to register an jQuery action against an HTML element such as a button, the action may get registered each time the modal is evaluated.

One work-around maybe to check to see if an event if already register for a given button before re-registering it.

But then I tried to reproduce it with a simple example (see https://jsfiddle.net/aq9Laaew/43366/) and could not get it to function improperly. Give it a try the alert shows up only once regardless of how many time you open and close the modal.

Can you help me understand your scenario a bit better? Ideally you would be able to reproduce it using a simple case with Fiddle. What kind of JavaScript is being sourced when the modal loads or is activated?

Also searching for an explanation I found bootstrap3-dialog (https://github.com/nakupanda/bootstrap3-dialog). Have a look, maybe something in there can help you.

Let me know.
/S

from laravel-enterprise-starter-kit.

Hey Sebastien,

So I just checked out your jsFiddle and fear that my explanation wasn't very concise. So the jsFiddle you provided is essentially my only workaround. I have to load all the HTML for the modal on pageload for the JavaScript to not be imported multiple times.

My example requires the use of Blade templates through an AJAX request to populate the HTML & JavaScript.

In this codebase (LESK) for an example.. you have many modal confirmation dialogues where the HTML is populated by a GET request to a controller that sets $body variable that is full of text. This is injected into a modal_confirmation.blade.php and shipped back. All of this is done via AJAX by using a route in the href that calls the modal.

I've used this awesome concept that I found in your project and extended it. Basically inside of that modal_confirmation.blade.php if you put some JavaScript like your SelectAll toggle code you use for checkboxes you can then observe the behavior. Basically the first time you call it, the JavaScript will work as intended. Every other call (2nd call then dismiss, 4th call then dismiss, etc.) to the modal will cause the SelectAll to not function at all during the duration that the modal is open.

I know there isn't any native code in your project that represents this as the dynamic modals you have in your code are all just text.. but I thought the idea was really neat and I would like to have those modals do far, far more.

You've mentioned checking to see if events are already registered. Maybe I can wrap the entirety of my JavaScript into a function and the first time I call a modal it gets loaded up, and any further calls I can check to see if that function is active?

I hope that cleared up the problem I'm having a little bit.

Thanks for the quick reply!

from laravel-enterprise-starter-kit.

The problem is, I can't have the code on the page that the modal gets called from because once the modal loads its like in its own scope. So if I want to initialize a Select2 box in the new modal I cannot just leverage existing JavaScript from the calling page. I need to actually include JavaScript with the modal template, otherwise there's no way to initialize the select box..

I have been experimenting with localStorage and other things to try and detect if the modal has run once before but just can't figure this one out.

I like making modals interactive it gives my web apps much more personality then having to refresh the page or move to another page. It's 2018, people expect AJAX on all the things.

from laravel-enterprise-starter-kit.

Holy crap I just had a stroke of genius and figured it out. This problem has been a plague since 2016.

Hopefully this bit of advice will help those down the road for posterity!

Okay, when utilizing event listeners in the modal dialogues that are populated via AJAX serverside, DO NOT attach the event listener to the document. Be sure you attach the listener to the ELEMENT.

For example:

This is NOT what you want to do.. and what has screwed me over these several years:

$(document).on('click', '#SelectAll', function() { // STUFF

This is what you want when it comes to modals:
$('#SelectAll').on('click', function() {// STUFF}

from laravel-enterprise-starter-kit.

Awesome find Matthew hopefully it will help others with the same issue.
Thanks.
/s

from laravel-enterprise-starter-kit.