JQuery UI对话框在第一次尝试时不会打开

我试图打开一个显示有关事件信息的对话框。可以使用按钮打开另一个允许编辑事件的对话框和一个删除事件的对话框。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() { 

} 


}); 

});

来源

2012-08-14 Lord Leicester

你可以在jsfiddle.net上设置演示吗？谢谢。 – Abraham 2012-08-14 10:16:39

我不知道这是否有效，我使用Javascript MVC进行开发，它需要很多外部包：/我会尽我所能;） – 2012-08-14 10:24:29

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

问题解决了，很多谷歌搜索和寻找的XMLHttpRequest的，我意识到这是一个同步的问题后。甚至在数据被提取之前，视图都被加载，实际上应该不会发生。

使用由jquery.Model插件提供的$.when(fetchItems()).done(function(itemsFetched) { //doSomething })函数使视图等待数据加载并在之后进行初始化。

来源

2012-08-20 10:07:10

JQuery UI对话框在第一次尝试时不会打开

回答

相关问题