Is there an event that fires on Modal form ready? I need to set dropdownlist index there

Question

In a modal bootstrap form I just need to set a given item in a DropDownList already populated, using for example:

$("#MyDropDown").prop('selectedIndex', 1);

I tried using document ready event:

   <script type="text/javascript">
    $(document).ready(function () {
        $("#MyDropDown").prop('selectedIndex', 1);
    });
    </script>

But it's not working and i assume it's because that thinks I'm talking about the outer View, not the modal. What event can I use for Modal ready?

This is how I create the DropDownList (it's also populated using JQuery)

<select id="MyDropDown" name="ddlMyDropDown" class="form-control"></select>

EDIT: This is how it's populated using Ajax:

       function PopulateMyDropDown() {
        var procemessage = "<option value='0'>Seleccionar...</option>";
        $("#MyDropDown").html(procemessage).show();

        var data = JSON.stringify({
            idPedidoDisprofarma: idPedido
        });

        return $.ajax({
            url: "/RecepcionDisprofarma/PedidosDisproNoRecibidos",
            data: data,
            cache: false,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            type: 'POST',
            success: function (data) {
                var markup = "";

                markup += "<option value='0'>Seleccionar..</option>";;

                for (var x = 0; x < data.length; x++) {
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }
                $("#MyDropDown").html(markup).show();
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });
    }

Michael · Accepted Answer · 2019-01-22T00:05:44.640

2

Is the dropdown populated on the server or after an ajax call?

It might be that you've tried to select a value before any are available as it's still waiting on for a response to provide data.

You could wait until that response is received and then select the first option from that data set.

You could reference this example: https://stackoverflow.com/a/16746700/2835914

You could also try:

        success: function (data) {
            var markup = "";

            markup += "<option value='0'>Seleccionar..</option>";;

            for (var x = 0; x < data.length; x++) {
                markup += "<option value='" + data[x].Value + "' " + x === 0 ? "selected" : "" + ">" + data[x].Text + "</option>";
            }
            $("#MyDropDown").html(markup).show();
        },

edited Jan 22 '19 at 00:05

answered Jan 21 '19 at 23:40

Michael

1,028
18
25

1

I'm populating via Ajax (Edited and added to first post) and getting the items from controller, good point. I already tried setting the index in success: function (data) with no luck, i'll give it a try again now. – JCIsola Jan 21 '19 at 23:53
1

I'm not sure why it didn't work when i tried this before, but it works if i set the index just after getting the response in Success event, thank you! – JCIsola Jan 22 '19 at 00:14

score 0 · Answer 2 · answered Jan 21 '19 at 23:47

0

if you used jquery ajax you should do this

$(document).on("click", 'button',
  function() {
    $(".modal-body").load(YOURURL, function() {
      $("#MyDropDown").prop('selectedIndex', 1);
    });
    $("#myModal").modal();
  });

answered Jan 21 '19 at 23:47

Hossein Arbatan

31
5

Is there an event that fires on Modal form ready? I need to set dropdownlist index there

2 Answers2