Small issue re: ModalPopupExtender - not firing ImageButton.Click event

[Blackred]

Hello, first post so be kind ;)

I'm using the ModalPopup to display a loading message when the user clicks on an imagebutton. The problem here is that while the ModalPopup is on screen, the button event doesn't fire so the page doesn't do anything - it just sits there with a loading message - here is my code...

<div id="pnlLoading" style="display: none;" class="modalPopup">
        <p><img src="/images/mde_loading.gif" /> Contacting Cinema...</p>
    </div>
    <asp:ImageButton ID="ibtnCalculate" runat="server" ImageUrl="~/images/ordertickets.gif" />
    <ajaxToolkit:ModalPopupExtender ID="mde1" runat="server"
        TargetControlID="ibtnCalculate"
        PopupControlID="pnlLoading"
        BackgroundCssClass="modalBackground"
        DropShadow="true" />

I need it to fire the ibtnCalculate.Click and show the modal popup :(

Thanks,
Greg.

[Blackred]

OK, I finally managed to get this cracked!

Basically you need an invisible button that you apply the ModalPopupExtender to, you then call the Click of this invisible button using javascript like this...

HTML:

<script type="text/javascript">
    function btnClick(id) {
        document.getElementById('ctl00_cpContent_btn' + id).click() // if you know of a better way to get this, let me know!
    }
</script>

<!-- Visible button -->
<asp:ImageButton ID="ibtnCancel" runat="server" ImageUrl="~/images/cancel.gif" />

<!-- Invisible button -->
<span style="display: none">
    <asp:Button ID="btnCancel" runat="server" />
</span>

<!-- Modal Popup Content -->
<div id="pnlLoading1" style="display: none;" class="modalPopup">
    <p><img src="~/images/mde_loading.gif" runat="server" /> Contacting Cinema...</p>
</div>

<ajaxToolkit:ModalPopupExtender ID="mde1" runat="server"
        TargetControlID="btnCancel"
        PopupControlID="pnlLoading1"
        BackgroundCssClass="modalBackground" />

Backend code:

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    ibtnCancel.Attributes.Add("onclick", "btnClick('Cancel')")
End Sub

That shows the Modal Popup and posts back to the server :cool:

Cheers,
Blackred.

[RChristian]

ibtnCancel.Attributes.Add("onclick", "btnClick('Cancel')") subs this line for: ibtnCancel.Attributes.Add("onclick", "btnClick('"+ibtnCancel.ClientID+"')") and remove the 'ctl00_cpContent_btn' + id
by id only.... :)

i didn't compile the code but i think that it works

[RChristian]

or i try this and work too...

remove the line ibtnCancel.Attributes.Add("onclick", "btnClick('Cancel')") from the PageLoad

and add this property to the button or imagebutton control OnClientClick="btnClick(this)" change the script to:

function btnClick(field) {            
            document.field.click() 
        }

[gauravkukreja06]

Hi, having same problem...Plz help me out from this

I have problem in ModalPopupExtender. Here is my code

   <ajaxtoolkit:modalpopupextender id="ModalPopupExtender" runat="server" 
            cancelcontrolid="LinkButton1" dropshadow="false" okcontrolid="btnSubmit"                 X="200" Y="100" popupcontrolid="Panel1" targetcontrolid="imgSchedul">
<asp:Panel id=Panel1 runat="server" style="display:none;">
<asp:Button ID="btnSubmit"  runat="server" Text="Submit" 
                           onclick="SubmitData" ValidationGroup="MainValidation"/>
</asp:Panel>

protected void SubmitData(object sender, EventArgs e)
{
//code for submit data.
}

I have written onclick event for btnSubmit in code behind file. Now my problem is, this event is not firing when I click Submit Button on Panel.