2014-03-28 73 views
0

我有了一些確認的東西,在它作爲一個形式的結果的對話窗口提交:jQuery的對話框中添加按鈕Ajax調用後

$('#newUserDialog').dialog({ 
     autoOpen: false, 
     width: 600, 
     modal: true, 
     resizable: false, 
     close: function() { 
      window.location.reload(true); 
     }, 
     buttons: { 
      "Complete": function() { 
        $.ajax({ 
          type: "POST", 
          url: "checkData.php", 
          data: formData+"&complete=1", 
          success: function(result){ 
          alert(result); 
          $('#newUserDialog').html('User has been built'); 
          } 
        }); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
當用戶點擊完成

,它觸發關閉Ajax調用做checkdata.php的東西。當完成時,我想刪除「完成」和「取消」並添加一個按鈕「繼續」。繼續按鈕將重新加載頁面。我怎麼能做到這一點?

目前在此代碼中,它的工作原理如下,但如果用戶不喜歡他在確認窗口中看到他點擊完成之前所看到的內容,如果他點擊取消,它將重新加載頁面。我只想在ajax調用後重新加載頁面。

+0

你在這個例子中使用JavaScript框架? –

+0

jquery ......... – bart2puck

+0

@ bart2puck你可以看到我的答案,在演示中我沒有說明ajax部分,但是當你點擊完成時,你可以看到新的按鈕添加了名爲「繼續」 –

回答

1

您可以使用以下方法在ajax回調中添加新按鈕;

var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset'); 
var newButton = $('<button>Continue</button>'); 
newButton.button().click(function() { 
    window.location.reload(true); 
}); 
buttonSet.html(newButton); 

你可以看到演示的位置:jsfiddle

0
<script> 
    var myModalExample; 
    $(function() { 


    myModalExample = $("#newUserDialog").dialog({ 
     autoOpen: true, 
     width: 600, 
     modal: true, 
     resizable: false, 
     close: function() { 
      window.location.reload(true); 
     }, 
     buttons: { 
      "Complete": function() { 
        $.ajax({ 
          type: "POST", 
          url: "checkData.php", 
          data: formData+"&complete=1", 
          success: function(result){ 

           myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $(this).dialog("close"); } } ] }); 

          } 
        }); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    }); 
    </script>