Stop Modal Closing When 'OnTextChanged' Fi

Question

I have an asp.net webform application and a user clicks a button, this then displays a modal with 3 fields in it. I have added an OnTextChanged and AutoPostBack="true" as i have code behind that checks if the name entered in the first currently exists or not. but when ever i tab out the field my modal closed and i need it stay open.

I had a very simular situation with an accordion which i got working by Jquery and asp:HiddenField but i have tried altering the code to no avail.

Part HTML For Modal

<div class="form-group">
     <asp:Label ID="lblPlace" runat="server" Class="col-sm-3 control-label" Text="Place" AssociatedControlID="fldPlace" />
     <div class="col-sm-6">
          <asp:TextBox ID="fldPlace" runat="server" class="form-control" AutoPostBack="true" OnTextChanged="fldPlace_TextChanged" />
     </div>
</div>

The code i used for my accordion was

HTML

<asp:HiddenField runat="server" ID="toKeepRemoveAccordionOpen" />
<div class="form-group">        
     <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
     <div class="col-sm-3">
          <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" AutoPostBack="true" OnTextChanged="txtRemoveUser_TextChanged" />
     </div>
</div>

JQuery

$('document').ready(function ()
{
    var hdnFldId = '<%= toKeepRemoveAccordionOpen.ClientID %>';
    $("#MainContent_txtRemoveUser").on("blur", function ()
    {
        //Sets value of hidden field to show panel after postback
        $('#' + hdnFldId).val(true);
    });

    if ($('#' + hdnFldId).val() == 'true')
    {
        showPanel();
        // Resets the value
        $('#' + hdnFldId).val(false);
    }

    function showPanel()
    {
        if ($('#MainContent_txtRemoveUser').val() != '')
        {
            $('.panel-collapse').removeClass('collapse').addClass('in');
        }
    }
});

I did try the following JQuery

$('document').ready(function () {
            var hdnFldId = '<%= toKeepRemoveAccordionOpen.ClientID %>';
            $("#MainContent_fldPlace").on("blur", function () {
                //Sets value of hidden field to show panel after postback
                $('#' + hdnFldId).val(true);
            });

            if ($('#' + hdnFldId).val() == 'true') {
                showPanel();
                // Resets the value
                $('#' + hdnFldId).val(false);
            }

            function showPanel() {
                if ($('#MainContent_fldPlace').val() != '') {
                    //$('.modal').addClass('in');
                    $('.modal').removeClass('fade').addClass('fade in');
                }
            }
        });

The main class for a modal is modal fade and when its displayed it changes to modal fade in.

Answer 1

Added the following to my aspx page

JQuery

function keepOpenSuggestPlaceModal()
{
    $('#placesModal').modal('show');
}

and added the following to my function call in my code behind

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "keepOpenSuggestPlaceModal();", true);

Answer 2

To reopen the modal after postback, you can use a hidden field and based on its value decide if to reopen the modal. Assuming you are using bootstrap modal the code can be something like the following:-

if ($('#' + hdnFldId).val() ==  "true") {
   $('#myModal').modal('show');
   $('#' + hdnFldId).val(false);
}

The problem with the method above is that as there is an animation (fade in) involved while showing the modal. That animation will be visible to user after each postback.

To overcome this we can use the following code:

if ($('#' + hdnFldId).val() ==  "true") {
   $('#myModal').addClass("in").attr("aria-hidden", false).css("display", "block");
   $('#myModal').modal('show');   //This will take care of adding all the other elements and classes which modal uses.
   $('#' + hdnFldId).val(false);
}

A better option would be to use the webmethod as suggested by Aleksey.

Answer 3

I would suggest you to make AutoPostBack="false" and on the OnTextChanged make ajax call to WebMethod (code behind that checks if the name entered in the first currently exists or not) to avoid adding UpdatePanel and reopen your modal each partial postback

you can see here how to post data to WebMethod http://www.aspsnippets.com/Articles/jQuery-AJAX-call-with-parameters-example-Send-parameters-to-WebMethod-in-jQuery-AJAX-POST-call.aspx