jquery 模式和自动完成功能不适用于回发按钮

Question

我在使用母版页的 asp.net 网站上遇到问题，我希望在其中有一个 jquery 模式，用户可以在其中搜索和提交文本。我想获取带有回发的插入文本以进行进一步处理。

如果表单没有模态，则代码可以通过回发正常运行，而如果表单没有提交模态，则代码可以正常运行。这是我的代码：

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

没有模态

<div id="myModal" title="Autocomplete Textbox" style="display:none;">

代码工作正常。

我尝试了

appendTo

表格，但这不起作用。有任何想法吗？谢谢

Answer 1

几个问题：

WebForms 页面仅允许在标记中使用一个表单标签。 （所以，你必须删除该表单标签）

当您点击“确定”时，jQuery.UI 对话框不会提交表单或页面。 （因此，您需要一个按钮，单击该按钮会进行提交，而 jQuery.UI 对话框按钮不会提交页面）。

并且不清楚为什么使用 HTML 控件，因为当您提交页面时，此类控件很难在后面的代码中处理。

另外，我不喜欢编写 jQuery 代码来将单击事件附加到按钮。这使得代码难以阅读，但更糟糕的是您有一个按钮，然后页面上的其他地方有代码来连接单击事件。

因此，使用上述所有信息，然后我建议使用以下代码：

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


        function mypopit() {

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

        }
    </script>

注意我如何在我们转换为对话框的 div 中包含一个按钮。并注意我如何设置显示=无。当我们点击“确定”按钮时，对话框中的 JavaScript 代码将点击此按钮。如果对话框关闭，那么当然不会发生提交。

有了那个隐藏的按钮，然后在代码隐藏中我享受了一个很好的单独的代码隐藏例程：

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

    }