locked
ModalPopupExtender triggering Client Side Validation RRS feed

  • Question

  • User-1487497583 posted

    Hi,

    I have a modal popup extender which is triggered when a link button is clicked, code below:

    <ajaxToolkit:ModalPopupExtender ID="modalPopupConfirm" runat="server" BehaviorID="mdlPopup"
    CancelControlID="btnConfirmNo" OkControlID="btnConfirmOk" OnCancelScript="cancelClick();"
    OnOkScript="okClick();" PopupControlID="divConfirmDelete" TargetControlID="divConfirmDelete" />
    <div id="divConfirmDelete" runat="server" align="center" class="modalPopUp"> Are you sure you want to submit the timesheet? <asp:Button ID="btnConfirmOk" runat="server" Text="Yes" /> <asp:Button ID="btnConfirmNo" runat="server" Text="No" /> </div>
    <asp:LinkButton ID="btnSubmit" runat="server" Text="Submit Time Log | " OnClick="btnSubmit_Click" OnClientClick="showConfirm(this); return false;" CausesValidation="false" />
    //Modal Popup
    //  keeps track of the delete button for the row
    //  that is going to be removed
    var _source;
    // keep track of the popup div
    var _popup;
    
    function showConfirm(source) {
        this._source = source;
        this._popup = $find('mdlPopup');
    
        //  find the confirm ModalPopup and show it   
        this._popup.show();
    }
    
    function okClick() {
        //  find the confirm ModalPopup and hide it   
        this._popup.hide();
        //  use the cached button as the postback source
        __doPostBack(this._source.name, '');
    }
    
    function cancelClick() {
        //  find the confirm ModalPopup and hide it
        this._popup.hide();
        //  clear the event source
        this._source = null;
        this._popup = null;
    }

    I also have a validation summary control and list view control on the page which contains various validation controls. The list view also has a couple of cascasding drop down controls, validation summary below:

    <asp:ValidationSummary ID="valSum" runat="server" EnableClientScript="true" HeaderText="Please correct the following errors:" ValidationGroup="valInsert" />

    The modal popup displays when I click btnSubmit however when I click btnConfirmOk instead of carrying on to the btnSubmit_Click event the client side validation I have stored in the list view is activated (validation group "valInsert" are used on the validation controls in the list view). It is only on the second attempt of clicking btnSubmit (this time no popup appears) is the btnSubmit_Click triggered. The same is also true if I populate all the controls to be valid so the client side validation is not triggered it still takes two clicks in order to activate btnSubmit_Click.

    I'm really not sure where I am going wrong and any help would be greatly appreciated.

    Thanks,

    Daniel




    Monday, October 10, 2016 10:26 AM

All replies

  • User-1487497583 posted

    After a bit more testing I have noticed if I change the link button to a button control the popup and submit code both trigger correctly.

    Does anyone know if it is possible to use a link button with a modal popup control without having the issue of it only triggering on the 2nd click?

    Monday, October 10, 2016 10:53 AM
  • User1324658857 posted

    google and get it ,hope it useful to you!

    http://stackoverflow.com/questions/21873409/i-have-to-click-twice-a-link-button-to-change-page

    Tuesday, October 11, 2016 10:00 AM
  • User-1838255255 posted

    Hi Dan_no7,

    As far as I know , you can try to remove return false from your onclientclick event , since it will not post your page back and prevent the button click being fired for the first time.

    Best regards,

    Eric Du

    Tuesday, October 11, 2016 1:33 PM
  • User-1487497583 posted

    Hi, unfortunately removing the return false results in the btnSubmit_Click event being fired without the need for the confirm button being clicked in the modal popup.

    Wednesday, October 12, 2016 9:25 AM
  • User-1838255255 posted

    Hi  Dan_no7,

    According to your description , I make a sample for your reference , when you click linkbutton , trigger Confirm event and you click ok or cancel ,then send value to code behind , then make a response! For more detail , you  can reference my code .

    Sample Code:

    <head>
        <title></title>
        <script type = "text/javascript">
            function Confirm() {
                var confirm_value = document.createElement("INPUT");
                confirm_value.type = "hidden";
                confirm_value.name = "confirm_value";
                if (confirm("Do you want to save data?")) {
                    confirm_value.value = "Yes";
                } else {
                    confirm_value.value = "No";
                }
                document.forms[0].appendChild(confirm_value);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:LinkButton ID="btnConfirm" runat="server" OnClick = "OnConfirm" Text = "Raise Confirm" OnClientClick = "Confirm()">LinkButton</asp:LinkButton>
        </form>
    </body>
    
    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class CS : System.Web.UI.Page { public void OnConfirm(object sender, EventArgs e) { string confirmValue = Request.Form["confirm_value"]; if (confirmValue == "Yes") { Response.Write(confirmValue); } else { Response.Write("cancel"); } } }

    ScreenShot:

    Best Regards,

    Eric Du

    Wednesday, October 19, 2016 3:24 AM