/ / Come posso invocare azioni diverse per istanze diverse della stessa finestra di dialogo jquery? - javascript, jquery, jquery-ui

Come posso richiamare azioni diverse per istanze diverse della stessa finestra di dialogo jquery? - javascript, jquery, jquery-ui

Sto solo prendendo confidenza con jquery-ui e la funzione di dialogo. Ho le basi che funzionano in questo modo:

$("#jquery-confirm").dialog({
dialogClass: "jQdialog",
autoOpen : false,
modal: true,
buttons: {
Yes: function() {
$(this).dialog("close");
// do something for yes;
},
No : function() {
$(this).dialog("close");
// do something for no;
}
}
});

Quindi posso richiamare la finestra di dialogo:

$("#button1").click(function() {
OpenCustomDialog("Title 1");
});

function OpenCustomDialog(title) {
$("#jquery-confirm").dialog("option", "title", title);
$("#jquery-confirm").dialog("open");
}

Questo va bene, ma ora voglio usare la stessa finestra di dialogo, ma specificare diverse azioni associate ai pulsanti Sì / No:

$("#button2").click(function() {
OpenCustomDialog("Title 2");
});

Come posso modificare l'azione dei pulsanti Sì / No, a seconda dell'elemento HTML (button1 / button2) che ha chiamato la finestra di dialogo?

Le mie ipotesi migliori sono le funzioni di callback e / o le chiusure, ma non riesco a pensarci.

risposte:

0 per risposta № 1

Il modo classico e semplice è quello di creare un nuovodialogo invece di riutilizzare quello vecchio. Dal momento che non lo stai facendo nella domanda, suppongo che tu non voglia farlo per qualsiasi motivo; quindi, invece, puoi usare un data attributo:

var callbacks = {
yes: {
b1: function() { /*do something*/ }
b2: function() { /*do something*/ }
},
no: {
b1: function() { /*do something else*/ }
b2: function() { /*do something else*/ }
}
};

// ... etc.

buttons: {
Yes: function() {
$(this).dialog("close");
callbacks.yes[$(this).data("callback-target")]();
},
No : function() {
$(this).dialog("close");
callbacks.no[$(this).data("callback-target")]();
}
}

// .. etc.

$("#button1").click(function() {
OpenCustomDialog("Title 1", "b1");
});

function OpenCustomDialog(title, callback) {
$("#jquery-confirm").dialog("option", "title", title);
$("#jquery-confirm").data("callback-target", callback);
$("#jquery-confirm").dialog("open");
}

Considera anche che vincolante il title e callback parametri in OpenCustomDialog poiché gli attributi dei dati sui pulsanti renderanno il gestore più pulito