jquery移动弹出不打开提交表格

Question

有一个jquery mobile submit form，我正在使用它将值保存到SQL database。
将值成功存储在数据库中后，会打开一个弹出窗口。

问题在于点击提交按钮时弹出窗口未打开。我需要点击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> 

任何帮助将不胜感激。

Answer 1

jQuery Mobile弹出窗口是一点点小错误，大部分是如果在Chrome浏览器下执行。

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

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

一个setTimeout函数内部：

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

1ms的应该是足够的，但你也应该与其他值来测试。

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