Cancel ajax modalpopupextender using javascript

Question

I have a modalpopupextender with a targetcontrolid = buttCopyFormula. The buttCopyFormula is wrapped in a span tag for the user to verify they want to proceed. The button also has a javascript function that verifies there is text in one of the fields and if there is places it in a textbox within the modalpopup.

If there isn't text in the field I want to cancel the popup and display a message.

I've had the span around the button for a while, but am just adding the verification function. I would imagine there is a better way to do this, but just not sure what it is.

What is the best way to execute this functionality?

TargetControl Button

<span onclick="return confirm('Copy the selected formula?')">
   <asp:ImageButton ID="buttCopyFormula" ImageAlign="AbsBottom" OnClientClick="transferName()" runat="server" ImageUrl="~/images2020/copy_32.png" /> 
   <b style="color:White">Copy</b>
</span>

Modal Popup

 <asp:ModalPopupExtender ID="ModalPopupExtender2" Y="20" runat="server" 
        BackgroundCssClass="modalBackground" CancelControlID="buttFormulaCancel" 
        PopupControlID="Panel2" TargetControlID="buttCopyFormula">
 </asp:ModalPopupExtender>

 <asp:Panel ID="Panel2" runat="server" CssClass="modalQuestionBackground" 
        Style="display:none"><br />
        <h5>Enter a Name for the Formula</h5>
        <br /><br />
        Formula Name:&nbsp;
        <asp:TextBox ID="txtFormulaNameNew" CssClass="controltext" Width="65%" runat="server" Text=""></asp:TextBox><br /><br />
           <center>
               <asp:Button ID="buttFormulaSaveNew" runat="server" CssClass="button" 
               OnClick="buttFormulaSaveNew_Click" Text="Save Formula" />
               &nbsp;&nbsp;
               <asp:Button ID="buttFormulaCancel" runat="server" CssClass="button" 
               Text="Cancel" />
           </center>
        <br />
      </asp:Panel>

JavaScript Function

 function transferName() {
       var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
       var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
       if (v === "") {
           alert("Please select the formula you want to copy before proceeding");
           return false;
       }
       f.value = v
   }

I've been working on this and first removed the span around the button, put a fake hyperlink for the modal popup and added a behavior id to the popup. I have also changed the javascript as follows...

New Javascript

 function transferName() {

       var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
       var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
       if (f === "") {
           alert("Please select the formula you want to copy before proceeding");
           return false;
       } else {
           if (confirm('Copy selected formula?')) {
               f.value = v;
               var mod = $find("ModalPopupExtender2");
               alert(mod.id.toString);
               mod.show;
               return false;}
       }
   }

I still can't get the modalpopup to show. I imagine it's because it's wrapped in an update panel. Any ideas??

Answer 1

You may subscribe to showing event of ModelPopupExtender and cancel showing dependent on some conditions. Put script below at page AFTER THE ScriptManager control

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);

function pageLoadedHandler(sender, args){
    var popupExtender = $find("ModalPopupExtender2"); // BehaviorId of popup extender
    popupExtender.remove_showing(onPopupShowing);
    popupExtender.add_showing(onPopupShowing);
}

function onPopupShowing(sender, args) {
    var txtFormulaNameNew;
    var txtFormulaName = $get("<%= txtFormulaName.ClientID %>");

    if (formulaTextBox.value.length === 0) {
        alert("Please select the formula you want to copy before proceeding");
        args.set_cancel(true);
    } else {
        if (confirm('Copy selected formula?')) {
            txtFormulaNameNew = $get("<%= txtFormulaNameNew.ClientID %>");
            txtFormulaNameNew.value = txtFormulaName.value;
        }
    }
}