使用JQuery UI對話框與提交按鈕

Question

我想使用JQueryUI對話框，以便我可以在內部Web應用程序中獲得一個漂亮的格式化確認對話框。我有一個事件監聽器附加到提交按鈕，然後將獲取數據並將其顯示在對話框中。 到目前爲止，我可以在對話框中得到它，它的格式很好，但它看起來好像提交操作正在傳播，而不是等待用戶選擇一個選項（確認或取消），即該對話框閃爍屏幕，然後在頁面處理提交操作時消失。

我可能錯過了一些小東西，但我不知道是什麼，任何人都可以幫忙嗎？我應該以某種方式添加stopProagation（）函數嗎？提前致謝。

下面是我在做什麼（我希望代碼插入正確的）一個片斷：

var StripyTables ={ 
init: function(){ 


    // hook into the Accept and Exit button 
    var acctUpdate = $("#finishShipment"); 

    for (var i = 0, ii = acctUpdate.length; i < ii; i++) 
    { 
     $(acctUpdate).bind("click", StripyTables.finishListener); 
    } 
}, 

finishListener: function(event){ 
    var id = document.getElementById('session_id').value; 
    var url = 'http://'+window.location.hostname+'/truck/webServices/verifyCarr.svc.php'; 
    var args = 'id='+id; 
    var retval = StripyTables.doAjax(url, args); 
    var len = retval.length; 
    if(retval==null || retval==""){ 
     event.preventDefault(); 
    } 
    else{ 
     if(len<100){ 
      event.preventDefault(); 
      alert(retval); 
     } 
     else{ 
      $('#dialog').html(retval); 
      var $dialog = $('<div></div>') 
      .html(retval) 
      .dialog({ 
       autoOpen: false, 
       width: 700, 
       height: 350, 
       title: 'Final Detail for Route: '+id, 
       buttons: { 
        "Confirm Route": function() { 
         $(this).dialog("close"); 
         // with a form with an ID of 'frm_processRoute', will this work? 
         $('#frm_processRoute').submit(); 
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
         event.preventDefault(); 
        } 
       } 
      }); 
      $dialog.dialog('open'); 
     } 
     }, 
doAjax: function(url, args){ 
    var retVal; 
    retVal = $.ajax({ 
        type: "GET", 
        url: url, 
        data: args, 
        async: false 
       }).responseText; 
    if(retVal==null || retVal=="")retval=99; 
    return retVal; 
} 
} 
}StripyTables.init(); 

Answer 1

它不會出現形態從打開的對話框時，提交防止。而且，你也許能夠簡化finishListener功能：

finishListener: function(event){ 
    event.preventDefault(); //stop form submit here 
    var id = document.getElementById('session_id').value; 
    var url = 'http://'+window.location.hostname+'/truck/webServices/verifyCarr.svc.php'; 
    var args = 'id='+id; 
    var retval = StripyTables.doAjax(url, args); 
    var len = retval.length; 
    if(retval==null || retval==""){ 
     //show error message 
    } 
    else{ 
     if(len<100){ 
     //show error message 
     alert(retval); 
    } 
    else{ 
     $('#dialog').html(retval); 
     var $dialog = $('<div></div>') 
     .html(retval) 
     .dialog({ 
      autoOpen: false, 
      width: 700, 
      height: 350, 
      title: 'Final Detail for Route: '+id, 
      buttons: { 
       "Confirm Route": function() { 
        //$(#your-form).submit(); 
        $(this).dialog("close"); 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
     $dialog.dialog('open'); 
    } 
    }