I am having trouble with the AJAX ModalPopupExtender control. What I am trying to do is click a button, trigger a postcode lookup using Yahoo API with the button click event, display this in an asp panel in the ShowModalDialog box, and then close the dialog. I also need a separate button on the page to submit information using a form that is completely separate from this.
I have set the target button up as follows:
<asp:Button ID="btnStockist" runat="server" BackColor="#2C3473" OnClick="btnStockist_Click" />
The modalpopup is as follows:
<ajax:ModalPopupExtender ID="mpeStockist" runat="server" okcontrolid="btnOkay" targetcontrolid="btnStockist" popupcontrolid="pnlDisplay"
popupdraghandlecontrolid="PopupHeader" drag="true" backgroundcssclass="ModalPopupBG" ></ajax:ModalPopupExtender>
What is actually happening is that when clicking the target button, the popup opens but the event does not trigger (no postcode lookup is done). However, clicking the separate, unrelated button on the same page DOES trigger the event, and the lookup works perfectly. I am able to close the dialog as normal. I have tried hiding the target button with CSS as a quick workaround, but the problem is that any other buttons on the page seem to trigger the lookup method and modalpopup no matter what their click event is programmed to do, and I need them to work separately.
In case it's of any use, the panel code is here:
<asp:Panel ID="pnlDisplay" style="display:none" runat="server">
<div class="PopupContainer">
<div class="PopupBody">
<div align="center">Local Suppliers</div>
<br /><br />
<asp:label ID="lblError" runat="server"></asp:label>
<asp:UpdatePanel ID="upAlternatives" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="dlStockist_Select" runat="server">
<HeaderTemplate>
<table cellpadding="5" width="680">
<tr>
<td>Name</td>
<td>Address</td>
<td>Town/City</td>
<td>Miles (Approx)</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "CNAM") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD1") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "CADD3")%></td>
<td align="center"><%# DataBinder.Eval(Container.DataItem, "Distance")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="btnOkay" runat="server" visible="true" Text="Close" CommandName="Update" BorderColor="#FFFFFF" BackColor="#000000"
BorderWidth="3" BorderStyle="Double" ForeColor="White" Font-Size="13pt" style="cursor: pointer; padding: 1px 15px 1px 15px;
margin-top: 10px;" Font-Underline="False"></asp:LinkButton>
</div>
</div>
</asp:Panel>
Thanks in advance for the help
Add one more button as per below
<asp:Button Text="targetbutton" ID="tgtbtn" runat="server" Style="display: none" />
Set id of this button in targetcontrolid of modulpopup (because it can not be null)
and in click event of btnStockist
open your modulapopup by code
protected void btnStockist_Click(object sender, EventArgs e)
{
mpeStockist.Show();
}