添加一個新的對話框

必須有一個更清潔的方式做什麼，我想在這裏做一個編輯按鈕可以一個jQuery UI對話框，並加載...添加一個新的對話框

我有一個jQuery用戶界面對話框當我點擊FullCalendar插件中的eventClick處理程序時打開。

對話框包含事件的詳細信息。在窗體的底部應該有一個編輯按鈕，它將關閉對話框，並打開一個新窗體，並在窗體中添加一個可編輯窗體。

對於大多數情況下，我已經成功了，從編輯按鈕的確可以在對話框中調出編輯窗體的意義上說。但它不是一個新的對話框，它與第一次點擊時的對話框相同，並帶有OK和編輯按鈕。

我如何得到一個新的對話框打開編輯窗體？

下面是eventClick功能

eventClick: function(event) {     
       if (event.url) {       
        $('#details') 
         .load(event.url) 
         .dialog({        
          title: 'Event Details', 
          buttons: { "Ok": function() { $(this).dialog("close"); }, 
             "Edit": function() { 
             $(this).dialog("close"); 
             $('#details').load('/Events/Edit/' + event.id) 
                .dialog({ 
                 title: 'Edit' 
                  });             
                 } }         
          });         
         return false; 
        } 
       },

來源

2010-08-31 MrBliz

我看到兩個問題，可能會造成您的問題：

dialog('close')僅僅關閉對話，但不會清空它內容。如果要清空對話框並將其恢復爲乾淨的狀態，則要使用 dialog('destroy')。
你有幾個load()函數調用串在一起，但沒有任何回調。所以你的加載，試圖從/Events/Edit/eventID加載的內容是發射，但然後你立即再次顯示對話框。 load()功能有一個回調參數，將獲得執行時，內容從 URL返回load() 功能。這樣，一旦從服務器接收到內容，就會顯示對話框。

，我認爲你可以組織你的代碼，以便它是一個小更易於維護的（但它也涉及到打破了你的一些匿名函數爲命名的函數）的方法是如下：

eventClick: function(event) { 
    if(event.url) { 
     $("#details").load(event.url, loadDialog(event.id)); //call loadDialog once you get content back from your URL 
    } 
} 

function loadDialog(eventId) { 
    $("#details").dialog({ 
     title: "Event Details", 
     buttons: { 
      "OK" : function() { $(this).dialog("close"); }, //this just closes it - doesn't clean it up!! 
      "Edit" : function() { 
       $(this).dialog("destroy"); //this completely empties the dialog 
              //and returns it to its initial state 
       $("#details").load("/Events/Edit/" + eventId, loadEditDialog($(this))); 
      } 
     } 
    }); 
} 

function loadEditDialog(theDialogContainer) { //this is a simple dialog display function -- could be inlined 
    $(theDialogContainer).dialog({ 
     title: "Edit" 
    }); 
}

我希望這可以幫助！以上所有代碼都未經過測試，因此可能會出現拼寫錯誤 - 主要是僞代碼來解釋我的推理。如果有問題，請告訴我，我會相應更新我的問題。

來源

2010-08-31 17:30:27

乾杯隊友，我會測試它，當我回來的明天而努力，看看我的身體情況如何。 – MrBliz 2010-08-31 19:22:16

，你也可以嘗試這樣的事：

$("#details").dialog({ 
     title: "Event Details", 
     buttons: { 
      ... 
      "Edit" : function() { 
       $(this).dialog("option", "buttons", { "OK":...}); 
       $("#details").load("/Events/Edit/" + eventId); 
       $(this).dialog("option", "title", "Edit"); 
      } 
     } 
    });

來源

2010-09-01 12:09:45 katrin

添加一個新的對話框

回答

相關問題