2

jquery mobile submit formに値を保存するために使用している がありSQL databaseます。
値が DB に正常に保存されると、ポップアップが開きます。

問題は、送信ボタンをクリックしてもポップアップが開かないことです。ポップアップを開くには 2 回クリックする必要があり、2 つのデータベース エントリが追加されます。

コード :

        <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 コード

<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>

どんな助けでも大歓迎です。

4

1 に答える 1

1

jQuery Mobile ポップアップは、Chrome ブラウザーで実行した場合に少しバグがあります。

古典的な修正は、次の行を配置することです。

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

setTimeout 関数内:

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

1 ミリ秒で十分ですが、他の値でもテストする必要があります。

また、実際の例を作成しました：http://jsfiddle.net/Gajotres/4yvBK/

于 2013-03-11T09:31:47.290 に答える