2012-08-14 132 views
0

我試圖打開一個顯示有關事件信息的對話框。可以使用按鈕打開另一個允許編輯事件的對話框和一個刪除事件的對話框。JQuery UI對話框在第一次嘗試時不會打開

問題是,在第一次嘗試打開編輯對話框時,沒有任何反應,而刪除對話框功能完美。關閉主對話框並重新打開後,單擊按鈕時也會顯示編輯對話框。

我想它與編輯對話框的視圖有​​關,因爲刪除對話框沒有並且正確打開。
這不是ajax問題(事件是從數據庫中提取的),它在對話初始化之前加載。

對話框在相同元素「eventDialog」中調用,並在關閉主對話框後正確刪除。

感謝提前:)

繼承人一些代碼:

主對話框

$.Controller('COPD.Controller.PatientHeader.Dialog', 
/** @Static */ 
{ 
defaults: { 
    patientID: 2, 
    eventID: 0, 
}, 

}, 
/** @Prototype */ 
{ 
/* 
* All of this class' work is done in this constructor 
*/ 

init : function(){ 

    this.element.append('<span id=\"eventDialog\"></span>'); 
    $('#eventDialog').html('COPD/controller/patient_details/controller/patient_header/views/patientHeaderDialog.ejs', 
      {event: COPD.Models.TreatmentEvent.findOneDebug({behandlungsEventID: this.options.eventID}, 
      this.proxy(function(success) { 
       $("#eventDialog").dialog({ 
        show:"fade", 
        hide:"fade", 
        height:"auto", 
        width:500, 
        draggable:false, 
        resizable:false, 
        modal:true, 
        position:"center", 
        title:success[0].behandlungskategorie.name, 
        create: this.proxy(function(){this.initDialogs(success);}), 
        close: this.proxy(function(){this.destroy();}), 
        buttons: [{text:"Bearbeiten", click: this.proxy(function() {this.openEditEvent();})}, 
           {text:"Löschen", click: this.proxy(function() {this.openDeleteEvent();})}, 
           {text:"Schließen", click: function() {$(this).dialog("close");}},], 
       }); 

      }))}); 
}, 

// Standard destroy()-Funktion 
destroy : function() { 
    $('#eventDialog').copd_patient_header_dialog_edit("destroy"); 
    $('#eventDialog').copd_patient_header_dialog_delete("destroy"); 
    $('#eventDialog').remove(); 
    this._super(); 
}, 

initDialogs : function(event) { 
    $('#eventDialog').copd_patient_header_dialog_delete({event: event}); 
    $('#eventDialog').copd_patient_header_dialog_edit({event: event}); 
}, 

openEditEvent : function() { 
    $('#editEvent').dialog("open"); 
}, 

openDeleteEvent : function() { 
    $('#deleteEvent').dialog("open"); 
}, 


}); 

}); 

編輯對話框

$.Controller('COPD.Controller.PatientHeader.Dialog.Edit', 
/** @Static */ 
{ 
defaults: { 
    patientID: 2, 
    eventID: 0, 
    event: null, 
}, 

}, 
/** @Prototype */ 
{ 
/* 
* All of this class' work is done in this constructor 
*/ 

init : function(){ 
    console.log("Der Edit-Event-Dialog wird jetzt initialisiert!"); 
    this.element.append('<span id=\"editEvent\"></span>'); 
    $("#editEvent").html('COPD/controller/patient_details/controller/patient_header/views/patientHeaderDialogEdit.ejs', { 
     behandlungskategorien: COPD.Models.TreatmentCategory.findAll(), 
     event: this.options.event[0], 
    }, this.proxy(function() { 
     $("#editEvent").dialog({ 
      show:"fade", 
      hide:"fade", 
      height:"auto", 
      width:500, 
      draggable:false, 
      resizable:false, 
      modal:true, 
      autoOpen:false, 
      title:this.options.event[0].behandlungskategorie.name + " bearbeiten", 
      buttons: [{text:"Speichern", click: this.proxy(function(){this.updateEvent();})}, 
         {text:"Schließen", click: function(){$(this).dialog("close");}},], 

     }); 
    })); 
    console.log("Event:", this.options.event[0]); 
}, 

// Standard destroy()-Funktion 
destroy : function() { 
    $('#editEvent').remove(); 
    this._super(); 
}, 

updateEvent : function() { 
//updates the event 
}, 


}); 

}); 

刪除對話框

$.Controller('COPD.Controller.PatientHeader.Dialog.Delete', 
/** @Static */ 
{ 
defaults: { 
    patientID: 2, 
    eventID: 0, 
    event: null, 
}, 

}, 
/** @Prototype */ 
{ 
/* 
* All of this class' work is done in this constructor 
*/ 

init : function(){ 
    console.log("Der Delete-Event-Dialog wird jetzt initialisiert!"); 
    this.element.append('<span id=\"deleteEvent\"></span>'); 
    $("#deleteEvent").html('<br>Wollen Sie wirklich das Behandlungsevent löschen?<br><br>\''+ this.options.event[0].behandlungskategorie.name + '\'<br>' + this.options.event[0].hinweisText); 
    $("#deleteEvent").dialog({ 
     show:"fade", 
     hide:"fade", 
     height:"auto", 
     width:500, 
     draggable:false, 
     resizable:false, 
     modal:true, 
     autoOpen:false, 
     position:"center", 
     title:"Wirklich Löschen?", 
     buttons: [{text:"Ja", click:function() {this.hideEvent(this.options.event);}}, 
        {text:"Nein", click:function() {$(this).dialog("close");}},], 
    }); 
}, 

// Standard destroy()-Funktion 
destroy : function() { 
    $('#deleteEvent').remove(); 
    this._super(); 
}, 

hideEvent : function() { 

} 


}); 

}); 
+1

你可以在jsfiddle.net上設置演示嗎?謝謝。 – Abraham 2012-08-14 10:16:39

+0

我不知道這是否有效,我使用Javascript MVC進行開發,它需要很多外部包:/我會盡我所能;) – 2012-08-14 10:24:29

+0

看看你是否可以設置一個最小的例子。 – Abraham 2012-08-14 10:25:21

回答

0

問題解決了,很多谷歌搜索和尋找的XMLHttpRequest的,我意識到這是一個同步的問題後。甚至在數據被提取之前,視圖都被加載,實際上應該不會發生。

使用由jquery.Model插件提供的$.when(fetchItems()).done(function(itemsFetched) { //doSomething })函數使視圖等待數據加載並在之後進行初始化。