下拉列表未触发索引更改事件

Question

My drop down list triggers code behind on index change when I use this,

$('#messagebox').show();

but NOT triggering event when I use,

 $.blockUI({message: $('#messagebox'), css: { width: '600px' } });

Here's my markup for div where drop down is, appears like a message box

<div id="messagebox" style="display: none; cursor: default">
   <asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>

How can I solve this issue ?

Answer 1

This is most likely because blockUI is appending the content to the body, instead of to the form tag. Asp.Net controls will not post back events if they are outside of the form tag, so you run into it often when appending elements to the body with javascript. You will most likely have to make a couple of amendments to BlockUI.

For more info, see this answer: https://stackoverflow.com/a/7929700/1346464 .

Edit:

Summarising the linked answer (based on blockUI v2.59.0-2013.04.05, which is the latest at time of writing):

On line 319 (search for var layers ), replace $('body') with $('form') .

On line 336 (search for $('html,body').css('height','100%'); ), replace $('html,body') with $('html,body,form') .

Edit 2:

Fixes unblocking:

On line 448 (search for els = $('body').children().filter('.blockUI').add('body > .blockUI'); ) replace both instances of body with form .

Answer 2

I'm not familiar with jQuery blockUI, but with jQuery Dialog, it removes any form fields from the form when it is displayed. Therefore, when the form is posted back, you don't have access to them.

With jQuery Dialog, you have to add some code to get the fields added back to the form. I'd recommend searching to see if blockUI has the same issue.

Answer 3

autopostbackproperty=true like  below

<asp:DropDownList ID="ddlName"  runat="server" AutoPostBack ="true"
    onselectedindexchanged="ddlName_SelectedIndexChanged" >
</asp:DropDownList>

protected void ddlName_SelectedIndexChanged(object sender, EventArgs e)
{

}