Dropdownlist SelectedIndexChanged event do not trigger inside jQuery ui-Dialog

StackOverflow https://stackoverflow.com/questions/22327561

Question

I have a Dropdownlist with SelectedIndexChanged event inside jQuery ui-Dialog, but when I select an item in the DropdownList, SelectedIndexChanged event is not triggering though I already set AutopostBack to true, what could be the caused of this problem? any idea?

Here is my sample code:

 $(document).ready(function () {

            init();

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                init();

            }
        });

javascript function:

function init() {

            $(".dialog-form").dialog({
                autoOpen: false,
                modal: true,
                draggable: false,
                width: 1000,
                height: 600,
                close: function () {

                    $('body').css('overflow', 'auto');
                    $(".dialog-form").dialog("close");
                }
            }).parent().appendTo("form1");

            $(".add_ppmp").click(function () {
                $(".dialog-form").dialog("open");
                $('body').css('overflow', 'hidden');
            });
}

aspx code:

  <div class="dialog-form" title="Item">
            <div class="formholderborder">
                <div class="subadetail">
                <div class="listtable" style="margin-right: 15px;">
                    <asp:DropDownList ID="DropDownList1" runat="server" OnInit="LoadItems"  AutoPostBack="true" OnSelectedIndexChanged="cmbItem_SelectedIndexChanged"></asp:DropDownList>
                </div>
                </div>
            </div>
        </div>
Was it helpful?

Solution

I'll explain this more generally to help googlers of the future.

If you view the source of the page, you may straight away slap your forehead and say "of course!"

When you create a dialog with jQuery UI the element you create the dialog out of comes out of the <form> and into the root of the <body> element. That's just how jQuery UI's dialog works.

The code behind the .aspx page is dependent on the form, anything outside the form cannot trigger the postback and therefore no code behind is run on any events that depend on elements outside the form.

The fix for this is thankfully quite simple :). After you create the dialog, simply append it to the <form>.

You have rightly tried to do that in your code, however the selector you've used $("form1") is looking for a <form1> type element - which doesn't exist.

You can fix it with this code: .parent().appendTo("form"); although to ensure you get the first form element only you can use .parent().appendTo("form:first");.

If form1 is the id of the form element you want to append to, then you would of course use $("#form1").

OTHER TIPS

    function init() {

            $(".dialog-form").dialog({
                autoOpen: false,
                modal: true,
                draggable: false,
                width: 1000,
                height: 600,
                close: function () {

                    $('body').css('overflow', 'auto');
                    $(".dialog-form").dialog("close");
                }
            }).parent().appendTo($("form:first"));

            $(".add_ppmp").click(function () {
                $(".dialog-form").dialog("open");
                $('body').css('overflow', 'hidden');
            });
}

Append the jquery ui dialog to form like above.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top