jquery modal and autocomplete not working with button for postback

Question

I have a problem with an asp.net site using masterpage in which I would like to have a jquery modal where user can search and submit text. I would like to get the insert text with an postback for further processing.

The code is running fine with postback if the form is without the modal, with the modal the form is not submitting. Here is my code:

<button id="openModalButton" type="button">Open Modal</button>

<div id="myModal" title="Autocomplete Textbox" style="display:none;">
    <form id="autocompleteForm" method="post" action="Website.aspx">
        <input type="text" id="autocompleteTextbox" name="autocompleteTextbox" />
        <input type="submit" id="submitDataButton" value="Submit" />
    </form>
</div>

<script>
$(document).ready(function () {
    var availableTags = ["ActionScript", "AppleScript", "And so on"];

    $("#autocompleteTextbox").autocomplete({
        source: availableTags
    });

    $("#openModalButton").click(function () {
        $("#myModal").dialog({
            modal: true,
            width: 400,
            buttons: [
                {
                    text: "Submit",
                    click: function () {
                        $("#autocompleteForm").submit();
                    }
                }
            ]
        });
    });

    $("#autocompleteForm").submit(function () {
        var value = $("#autocompleteTextbox").val();
        if (!value) {
            alert("Please enter a value.");
            return false; // Prevent form submission
        }
        return true; // Allow form submission
    });
});

Without the modal <div id="myModal" title="Autocomplete Textbox" style="display:none;"> the code is working fine.

I tried appendTo the form but this doens't work. Any ideas? Thanks

Answer 1

A few issues:

A WebForms page only allows one form tag in the markup. (so, you have to remove that form tag)

A jQuery.UI dialog does NOT submit the form nor page when you hit ok. (so, you need a button that when clicked does a submit, the jQuery.UI dialog button does not submit the page).

And it not clear why you using HTML controls, since when you submit the page, such controls are difficult to deal with in the code behind.

Also, I don't like writing jQuery code to attach a click event to a button. This makes code hard to read, but worse means you have a button, and then some place else on the page, you have code to wire up the click event.

So, using all of the above information, then I suggest this markup:

    <asp:Button ID="cmdTestPop" runat="server" Text="Test popup"
        CssClass="btn btn-lg"
        OnClientClick="mypopit();return false;"
        
        />

    <div id="mypopdiv" style="display:none">

        <h3>Please enter your favorate development language</h3>

        <asp:TextBox ID="autoCompleteTextBox" runat="server"
            ClientIDMode="Static">
        </asp:TextBox>

        <asp:Button ID="cmdPopSubMit" runat="server" Text="submit"
            style="display:none"
            ClientIDMode="Static"
            OnClick="cmdPopSubMit_Click"
            />

    </div>

    <script>

        $(document).ready(function () {

            var availableTags = ["ActionScript",
                "APL", "Algolw", "AppleScript",
                "VBA", "Pascal", "Visual Basic"];

            $("#autoCompleteTextBox").autocomplete({
                source: availableTags,
                appendTo: $("#mypopdiv")
            })
        })


        function mypopit() {

            $("#mypopdiv").dialog({
                modal: true,
                width: 400,
                height: 450,
                buttons: [
                    {
                        text: "Submit",
                        click: function () {
                            $("#cmdPopSubMit").click();
                        }
                    }
                ]
            });

        }
    </script>

Note how I included a button in the div we convert into a dialog. And note how I set the display = none. This button will be clicked by the JavaScript code in our dialog when we hit the ok button. If the dialog is closed, then of course no submit occurs.

And with that hidden button, then in code behind I enjoy a nice sepertate code behind routine:

    protected void cmdPopSubMit_Click(object sender, EventArgs e)
    {
        // server side code runs when you hit ok button in dialog

    }

The end result looks like this:

Note also that we have to "append" the auto complete box to the popdiv, else your dropdown list will appear behind the dialog. This also (unfortunately) means that the dialog box must be sized large enough and have room for the autocomplete dropdown list.

If the dialog box is not given additional height, then you will have to scroll in that dialog to see the dropdown list, since by default, then dialog box will be sized too small in the vertical when it opens.