jQuery Button und Dialogbox
dave
- javascript
Hi,
ich habe Datensätze die auf der Seite ausgegeben werden und gelöscht werden können.
Zum löschen gibts einen Button.
Sieht dann in etwa so aus:
<form action="?" method="POST">
<div>
<button type="submit" name="delete" value="datensatzPK">Löschen</button> - Titel des Datensatzes
</div>
<div>
<button type="submit" name="delete" value="datensatzPK">Löschen</button> - Titel des Datensatzes
</div>
...
</form>
Bevor das Formular allerdings abgeschickt wird möchte ich eine Sicherheitsabfrage (Wirklich löschen? JA/NEIN).
Dafür habe ich einen Eventhandler auf die Buttons gelegt:
$("button[name=delete]").click(function(){
$("#rlyDelete").dialog('open');
return false;
});
Soweit ich weis triggert der auch wenn man mit der Tastatur den Button auswählt und Enter drückt, aber das prüfe ich später noch genauer.
Das Problem ist jetzt, das die Funktion hier selbstverständlich nicht wartet bis der Dialog beendet wurde, und der Dialog auch keinen Rückgabewert hat.
Also gebe ich einfach immer false zurück, damit das Formular nicht abgeschickt wird.
Nur wie kann ich jetzt, nachdem ich im Dialog auf einen meiner Buttons gedrückt hab sagen das er doch abschicken soll?
Mein Ansatz war, das ich bei der .click Funktion noch den Button der geklickt wurde mit übergebe.
Allerdings gibts ja kein $("button[name=delete]").submit() oder ähnliches.
Meine Bemühungen sehen im Moment so aus:
/* Init des Dialogs */
$("#rlyDelete").dialog({modal:true,
buttons:{
'Nein':function(){
$(this).dialog('close');
},
'Ja':function(){
$(this).dialog('close');
$($(this).dialog('option','button')).button('option','submit')();
}
},autoOpen:false});
/* Init der Buttons */
$("button[name=delete]").button({
icons:{primary:'ui-icon-trash'},
text:false,
submit:function(){
/* Hier müsste irgendwas hin das dem Button sagt das er geklickt wurde... */
this.submit();
}});
/* Click Event der Buttons belegen */
$("button[name=delete]").click(function(){
$("#rlyDelete").dialog('option','button',this);
$("#rlyDelete").dialog('open');
return false;
});
Hi,
Nur wie kann ich jetzt, nachdem ich im Dialog auf einen meiner Buttons gedrückt hab sagen das er doch abschicken soll?
Mein Ansatz war, das ich bei der .click Funktion noch den Button der geklickt wurde mit übergebe.
Allerdings gibts ja kein $("button[name=delete]").submit() oder ähnliches.
Natürlich nicht, Buttons werden ja auch nicht abgeschickt.
Das zugehörige Formular kann aber abgeschickt werden.
MfG ChrisB
Hi,
Natürlich nicht, Buttons werden ja auch nicht abgeschickt.
Das zugehörige Formular kann aber abgeschickt werden.
Gibt es eine Möglichkeit dem Formular dann zu sagen das dieser Button mit diesem Wert gedrückt wurde?
Oder hast du eine Andere Idee wie ich das machen könnte?
"Getarnte" Radio-Buttons oder sowas?
~dave
Hi,
Gibt es eine Möglichkeit dem Formular dann zu sagen das dieser Button mit diesem Wert gedrückt wurde?
Nein.
Aber du kannst ja das für die serverseitige Auswertung benötige name=value-Paar auch mit einem hidden input übergeben.
MfG ChrisB
Hi,
Aber du kannst ja das für die serverseitige Auswertung benötige name=value-Paar auch mit einem hidden input übergeben.
Danke für den Tipp, hab das jetzt auch so umgesetzt.
Falls es jemanden interessiert:
<form action="?" method="POST">
<div><input type="hidden" name="delete"></div>
<div>
<button type="submit" name="delete" value="datensatzPK">Löschen</button> - Titel des Datensatzes
</div>
<div>
<button type="submit" name="delete" value="datensatzPK">Löschen</button> - Titel des Datensatzes
</div>
...
</form>
/* Init des Dialogs */
$("#rlyDelete").dialog({modal:true,
buttons:{
'Nein':function(){
$(this).dialog('close');
},
'Ja':function(){
$(this).dialog('close');
$($(this).dialog('option','button')).trigger('submit');
}
},autoOpen:false
});
/* Init der Buttons */
$("button[name=delete]").button({
icons:{primary:'ui-icon-trash'},
text:false
});
/* Click Event der Buttons belegen */
$("button[name=delete]").click(function(){
$("#rlyDelete").dialog('option','button',this);
$("#rlyDelete").dialog('open');
return false;
});
/* Submit Event für den Button erstellen */
$("button[name=delete]").bind("submit",function(){
$('input[type=hidden][name=delete]')[0].value = this.value;
$('Form').trigger('submit');
});