加載酒吧，同時提交jquery ajax後，不顯示

Question

我使用jQuery UI dialog modal form。

所有的偉大工程，但我發送一個ajax開機自檢，所以我加了這段代碼：

$("#dialog-form").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 550, 
      modal: true, 
      buttons: { 
       "Create an account": function() { 

        var bValid = true; 
        allFields.removeClass("ui-state-error"); 
        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ 
        if (bValid) { 
          $.ajax({ url: 'about.php', 
           data: {name: name.val(), email: email.val()}, 
          type: 'post', 
          async: false 
         }); 
            } 
           } 
          } 
         }); 

的$.ajax部分是我加的。 我想顯示加載條在處理後，我加入這個代碼：

$('#progress') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 

但它不工作，我的帖子都到了PHP腳本，一個需要在2秒的等待時間。 它只是不顯示#progress div，所以.hide正在工作。

此外，例如，如果我在$.ajax之前添加$("#dialog-form").dialog({ hide: "slide" });它不起作用，它會在所有按鈕功能完成後隱藏。

謝謝。

Answer 1

如果您的#progress div僅在此ajax調用期間顯示，爲什麼不將show/hide操作對您的按鈕操作進行操作？

像這樣：

$("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 500, 
     width: 550, 
     modal: true, 
     buttons: { 
      "Create an account": function() { 

       var bValid = true; 
       allFields.removeClass("ui-state-error"); 

       if (bValid) { 
         // show before ajax call 
         $('#progress').show(); 

         $.ajax({ url: 'about.php', 
          data: {name: name.val(), email: email.val()}, 
          type: 'post', 
          async: true, 
          complete: function() { 
           //hide on complete 
           $('#progress').hide(); 
          } 
        }); 
       } 
     } 
    } 
}); 

希望這會有所幫助。