Question

I have a page that runs a jquery onclick event. The event loads an an external .aspx file into a div. The page that’s being loaded has a drop down list with an autopostback attribute that passes the selected item to a label.

Everything works fine except that the .aspx file that’s being loaded will only post back once. After that no more autopostback. Here’s my code

—– external.aspx ——

 <script> 
protected void ddlPrices_SelectedIndexChanged(object sender, EventArgs e)
   {
    lblPrice.Text = ddlPrices.SelectedValue.ToString();
   }
 </script>


<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
<asp:DropDownList ID="ddlPrices" runat="server" AutoPostBack="true" 
    onselectedindexchanged="ddlPrices_SelectedIndexChanged">
<asp:ListItem>Basic</asp:ListItem>
<asp:ListItem>Pro</asp:ListItem>
<asp:ListItem>Platinum</asp:ListItem>
<asp:ListItem>Baller!</asp:ListItem>
</asp:DropDownList> 

<asp:Label ID="lblPrice" runat="server"></asp:Label>          
</ContentTemplate>
</asp:UpdatePanel>

—- default.aspx ——

<script>
$(document).ready(function () {
$("li#empNav1").click(function () {
$("div.subItem").load('external.aspx');
});
});
</script>

 <ul class="nav-left">
<li id="empNav1" class="selected"><a href="#">Employer Overview</a></li>
<li id="empNav2"><a href="#">Why We're Better</a><span></span></li>
</ul>
<div class="subItem"></div>

---

As stated the div loads just fine, but external.aspx will only update lblPrice once. Then it no longer auto updates. Any help would be greatly appreciated specifics please….

UPDATE: I’ve tried putting an update panel in default.aspx around the div that being loaded that also didn’t cut it.

Answer 1

Well $.load() actually copies the HTML from the requested URL and “pastes” it into the target container. It’s possible that the ViewState of the parent page is conflicting with that of the page you are loading so the PostBack call to the ddlPrices_SelectedIndexChanged method is not being found.

I would suggest putting your dropdown code into a UserControl and just keep your ScriptManager and UpdatePanel on the parent page.

So you could make something like CTRLPriceList.ascx which would just have:

<asp:DropDownList ID="ddlPrices" runat="server" AutoPostBack="true" 
    onselectedindexchanged="ddlPrices_SelectedIndexChanged">
<asp:ListItem>Basic</asp:ListItem>
<asp:ListItem>Pro</asp:ListItem>
<asp:ListItem>Platinum</asp:ListItem>
<asp:ListItem>Baller!</asp:ListItem>
</asp:DropDownList> 

<asp:Label ID="lblPrice" runat="server"></asp:Label> 

And its Code Behind would be:

protected void ddlPrices_SelectedIndexChanged(object sender, EventArgs e)
{
    lblPrice.Text = ddlPrices.SelectedValue.ToString();
}

To really explore what’s happening, you should use an HTML debugger like Firebug or Chrome’s built-in one which let you see what’s being rendered in the DOM in real-time (eg. after the $.load() is processed). I have a feeling loading a full ASPX page into another will look very messy and is probably not a good idea even if you do get it to work.

Also check for Javascript errors.