jQuery Mobile的弹出犯规上提交表单开放 [英] Jquery mobile popup doesnt open on Submitting the form

问题描述

有一个 jQuery Mobile的提交表单这我使用的值保存到 SQL数据库。

一旦值被成功地存储在DB弹出打开。

There is a jquery mobile submit form which I am using to save values into the SQL database.
Once the values are stored successfully in DB a popup is opened.

问题在于当单击提交按钮时，弹出窗口不会打开。我需要点击2次弹出打开这反过来将增加2数据库条目。

The problem being that the popup doesn't open when the submit button is clicked. I need to click 2 times for the popup to open which in turn would have added 2 database entries.

code：

        <script type="text/javascript" >
        function BuyerDetails() {
            var keys = new Array();
            keys[0] = $('#boardingPassId').val();
            keys[1] = $('#MainContent_totalPrice').val();
            keys[2] = document.getElementById("select-choice-a").options[document.getElementById("select-choice-a").selectedIndex].text;
            keys[3] = $('#email').val();
            keys[4] = $('#Username').val();
            keys[5] = $('#Feedback').val();
            PageMethods.AddToBuyers(keys, onSuccess, onFailure);
        }

        function onSuccess(result) {
            $('#popupDiv').popup("open");
        }

        function onFailure(error) {
            alert(error);
        }
    </script>

HTML code

HTML code

<div id="page" data-role="page">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3 style="color: white;">Confirmation
        </h3>
        <a data-role="button" onclick="javascript:history.back()" class="ui-btn-left">Back</a>
        <a style="color: white;" data-role="button" data-ajax="false" href="Default.aspx">Home</a>
    </div>
    <div data-role="content">
        <div class="content-primary">
            <ul data-role="listview" data-inset="true">
                <li data-role="fieldcontain">
                    <label for="email">
                        Boarding pass Number</label>
                    <input id="boardingPassId" type="text" name="input" value="" />
                </li>
                <li data-role="fieldcontain">
                    <label for="email">
                        Name</label>
                    <input id="Username" type="text" name="input" value="" />
                </li>
                <li data-role="fieldcontain">
                    <label for="email">
                        Total Price</label>
                    <input type="text" name="input1" runat="server" id="totalPrice" readonly="readonly" />
                </li>
                <li data-role="fieldcontain">
                    <label for="email" class="select">
                        Payment Method</label>
                    <select name="select-choice-a" id="select-choice-a" data-native-menu="false" style="width: 500px;">
                        <option value="card">Card</option>
                        <option value="cash">Cash</option>
                    </select>
                </li>
                <li data-role="fieldcontain">
                    <label for="email">
                        Feedback(possible improvement/suggestions)</label>
                    <textarea cols="40" rows="8" name="textarea" id="Feedback"></textarea>
                </li>
                <li data-role="fieldcontain">
                    <label for="email">
                        Email id</label>
                    <input type="text" name="email" id="email" value="" />
                </li>
                <li class="ui-body ui-body-b">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a">
                            <button type="submit" data-theme="d">
                                Cancel</button>
                        </div>
                        <div class="ui-block-b">
                            <button type="button" onclick="BuyerDetails()" data-theme="a">
                                Submit</button>
                        </div>
                    </fieldset>
                </li>
            </ul>
        </div>

        <div class="content-secondary">
            <div data-role="popup" id="popupDiv" data-theme="d" data-overlay-theme="b" class="ui-content"
                style="max-width: 340px;">
                <span id="dialog_title_span">Thank You</span>
                <p>
                    Your order has been placed
                </p>
                <a id="productPrice" data-role="button" data-theme="b" data-icon="check" data-inline="true"
                    href="Default.aspx" data-mini="true">DONE</a>
            </div>
        </div>
    </div>



</div>

任何帮助将大大AP preciated。

Any help would be greatly appreciated.

推荐答案

jQuery Mobile的弹出是有点越野车，主要是如果Chrome浏览器下执行的。

jQuery Mobile popup is little bit buggy, mostly if executed under the Chrome browser.

经典的解决办法是把这个行：

Classic fix is to put this line:

$('#popupDiv').popup("open");

一个setTimeout函数里面：

inside a setTimeout function:

setTimeout(function(){
    $('#popupDiv').popup("open");
},100);

1毫秒应该够了，但你也应该与其他值来测试。

1ms should be enough, but you should also test with other values.

我也让你的工作示例： http://jsfiddle.net/Gajotres/4yvBK/

I also made you a working example: http://jsfiddle.net/Gajotres/4yvBK/

这篇关于jQuery Mobile的弹出犯规上提交表单开放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！