I’m trying to open a dialog which shows information about an event. There one can use the buttons to open another dialog which allows to edit the event and one that deletes the event.
The problem is that on the first attempt to open the editing-dialog, nothing happens, while the delete-dialog functions perfectly. After closing the main dialog and reopening, the editing-dialog shows as well when clicking the button.
I suppose it has something to do with the view of the editing-dialog, because the delete-dialog has none and opens correctly.
It’s no ajax problem (the event is fetched from a database), it’s loaded before initialisation of the dialogues.
The dialogues are called within the same Element “eventDialog” and correctly removed after closing the main dialog.
Thanks in advance 🙂
Heres some of the code:
Main Dialog
$.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");
},
});
});
Editing Dialog
$.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
},
});
});
Delete Dialog
$.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() {
}
});
});
Problem solved, after a lot of googling and looking at xmlHttpRequests I realized it was a synchronisation problem. The views had been loaded before even the data has been fetched, which should actually not happen.
Using the
$.when(fetchItems()).done(function(itemsFetched) { //doSomething })function offered by the jquery.Model plugin made the view wait for the data to be loaded and initialized it afterwards.