Execute JavaScript in a modal window

Question

I have the following JS code:

<script type="text/javascript">  
    $(document).ready(function () {  
        var items = "<option value='0'>Select</option>";  
        $('#DistrictID').html(items);  
    });  
</script>

This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.

But since it is mark as

$(document).ready

This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?

Thanks in advance!

Regards,

Why can't you put the code you need in a function and call that when the modal is initialized? — scrappedcola
– scrappedcola, Commented Jul 7, 2017 at 19:42

Zeeshan · Accepted Answer · 2017-07-07 19:50:49Z

3

You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:

$(document).ready(function () { 
     $('#myModal').on('shown.bs.modal', function (e) {
            var items = "<option value='0'>Select</option>";  
            $('#DistrictID').html(items); 
      });
});

For reference Please check bootstrap modal events.

answered Jul 7, 2017 at 19:50

Zeeshan

6395 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Luis Alberto Delgado de la Flo Over a year ago

Thanks for your answer, Question tho, why you included and (e) after the word function? What is it purpose?

Zeeshan Over a year ago

e is event data. which contains information about which element triggered this event and number of other things.

Luis Alberto Delgado de la Flo Over a year ago

Thanks! I have a question about this code in this post. If you could check it and give me a hand I'd really appreciate it, maybe you have the answer! stackoverflow.com/questions/45126066/…

Zeeshan Over a year ago

Let me see what I can do

Saghachi · Accepted Answer · 2020-08-03 06:33:50Z

0

A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.

function loadJS(lnk){
    $.getScript(lnk);
}

it can be a general way to load any script in a fully loaded page.

edited Aug 3, 2020 at 6:33

answered Aug 3, 2020 at 5:55

Saghachi

94512 silver badges21 bronze badges

Comments

marc_s · Accepted Answer · 2022-08-31 04:09:35Z

0

One solution is to use jQuery event.on from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html

I will quote the author, because I think it's a very neat explanation.

We can’t register a listener to an element that doesn’t exists.

A work around is to register the listener to an element that will always exist in the page context. The #modal-book is the closest element. It is a little bit more complex what happen, but long story short, the HTML events propagate to the parents elements until it reaches the end of the document.

More here: https://api.jquery.com/on/

edited Aug 31, 2022 at 4:09

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 30, 2022 at 14:52

Marcin Pasikowski

1

Comments

marc_s · Accepted Answer · 2022-08-31 04:09:43Z

-2

Try something like this:

$('#idofselectelement').change(function() {  
    //grab the selected option and then do what you want with it.
});

edited Aug 31, 2022 at 4:09

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 7, 2017 at 19:45

Difster

3,2802 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

Execute JavaScript in a modal window

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related