使用javascript取消ajax modalpopupextender

Cancel ajax modalpopupextender using javascript

本文关键字：modalpopupextender ajax 取消 javascript 使用      更新时间：2023-09-26

我有一个targetcontrolid=buttCopyFormula的modalpopupextender。buttCopyFormula被包装在一个span标记中，供用户验证是否要继续。该按钮还有一个javascript函数，用于验证其中一个字段中是否有文本，如果有，则将其放置在modalpopup内的文本框中。

如果字段中没有文本，我想取消弹出窗口并显示一条消息。

我已经在按钮周围设置了一段时间，但我只是添加了验证功能。我想有更好的方法可以做到这一点，但只是不确定它是什么

执行此功能的最佳方式是什么？

TargetControl按钮

<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>

模式弹出菜单

 <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 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
   }

我一直在做这件事，首先删除了按钮周围的跨度，为模式弹出窗口放置了一个假超链接，并在弹出窗口中添加了一个行为id。我还更改了javascript如下。。。

新的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;}
       }
   }

我仍然无法显示modalpopup。我想这是因为它被包裹在一个更新面板中。有什么想法吗？？

您可以订阅ModelPopupExtender的showing事件，并根据某些条件取消显示。在ScriptManager控制之后，将下面的脚本放在页面上

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;
        }
    }
}
相关文章：
  • 没有找到相关文章