Trasmissione dei dati a una finestra di dialogo dell’interfaccia utente jQuery

Sto sviluppando un sito ASP.Net MVC e su di esso BookingId alcune prenotazioni da una query del database in una tabella con un ActionLink per cancellare la prenotazione su una riga specifica con un determinato BookingId come questo:

Le mie prenotazioni

 
Date Time Seats
2008-12-27 13:00 - 14:00 2 cancel change
2008-12-27 15:00 - 16:00 3 cancel change

Sarebbe bello se potessi usare la jQuery Dialog di jQuery Dialog per far apparire un messaggio che chiede se l’utente è sicuro di voler cancellare la prenotazione. Ho cercato di farlo funzionare ma continuo a rimanere bloccato su come creare una funzione jQuery che accetta i parametri in modo da poter sostituire il

cancel

con

cancel .

La funzione ShowDialog aprirà quindi la finestra di dialogo e passerà il parametro 10 alla finestra di dialogo in modo tale che se l’utente fa clic su Sì, pubblicherà l’href: https://stackoverflow.com/Booking.aspx/Change/10

Ho creato la finestra di dialogo jQuery in uno script come questo:

 $(function() { $("#dialog").dialog({ autoOpen: false, buttons: { "Yes": function() { alert("a Post to :https://stackoverflow.com/Booking.aspx/Cancel/10 would be so nice here instead of the alert");}, "No": function() {$(this).dialog("close");} }, modal: true, overlay: { opacity: 0.5, background: "black" } }); }); 

e il dialogo stesso:

  
Are you sure you want to cancel your booking?

Quindi alla fine alla mia domanda: come posso realizzare questo? o c’è un modo migliore di farlo?

Potresti farlo in questo modo:

  • segna il con una class, dì “cancella”
  • imposta la finestra di dialogo agendo su tutti gli elementi con class = “cancel”:

     $('a.cancel').click(function() { var a = this; $('#myDialog').dialog({ buttons: { "Yes": function() { window.location = a.href; } } }); return false; }); 

(più le altre opzioni)

I punti chiave qui sono:

  • renderlo il più discreto ansible
  • se tutto ciò di cui hai bisogno è l’URL, lo hai già nella href.

Tuttavia, ti consiglio di renderlo un POST al posto di un GET, dal momento che un’azione di annullamento ha effetti collaterali e quindi non è conforms alla semantica GET …

jQuery fornisce un metodo che memorizza i dati per te, non è necessario utilizzare un attributo dummy o per trovare una soluzione al tuo problema.

Vincola l’evento click:

 $('a[href*=/Booking.aspx/Change]').bind('click', function(e) { e.preventDefault(); $("#dialog-confirm") .data('link', this) // The important part .data() method .dialog('open'); }); 

E il tuo dialogo:

 $("#dialog-confirm").dialog({ autoOpen: false, resizable: false, height:200, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); }, 'Delete': function() { $(this).dialog('close'); var path = $(this).data('link').href; // Get the stored result $(location).attr('href', path); } } }); 

In termini di cosa stai facendo con jQuery, la mia comprensione è che puoi concatenare funzioni come hai e quelle interne hanno accesso a variabili da quelle esterne. Quindi la tua funzione ShowDialog (x) contiene queste altre funzioni, puoi riutilizzare la variabile x al loro interno e sarà presa come riferimento al parametro dalla funzione esterna.

Sono d’accordo con mausch, dovresti davvero considerare l’uso di POST per queste azioni, che aggiungeranno un tag

attorno ad ogni elemento, ma renderanno molto meno probabile la possibilità che uno script o uno strumento automatico inneschi l’evento Annulla. L’azione Cambia può rimanere così com’è (presumibilmente si apre solo un modulo di modifica).

Ora ho provato i tuoi suggerimenti e ho scoperto che funziona un po ‘,

  1. Il dialogo div è sempre scritto in testo in chiaro
  2. Con la versione $ .post funziona effettivamente in termini di chiamata al controller e in realtà annulla la prenotazione, ma la finestra di dialogo rimane aperta e la pagina non viene aggiornata. Con la versione get window.location = h.ref funziona alla grande.

Se il mio “nuovo” script qui sotto:

 $('a.cancel').click(function() { var a = this; $("#dialog").dialog({ autoOpen: false, buttons: { "Ja": function() { $.post(a.href); }, "Nej": function() { $(this).dialog("close"); } }, modal: true, overlay: { opacity: 0.5, background: "black" } }); $("#dialog").dialog('open'); return false; }); 

});

Qualche indizio?

oh e il mio link di azione ora appare così:

 <%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new { @class = "cancel" })%> 

Guardando il tuo codice, quello che devi fare è aggiungere la funzionalità per chiudere la finestra e aggiornare la pagina. Nella tua funzione “Sì” dovresti scrivere:

  buttons: { "Ja": function() { $.post(a.href); $(a). // code to remove the table row $("#dialog").dialog("close"); }, "Nej": function() { $(this).dialog("close"); } }, 

Il codice per rimuovere la riga della tabella non è divertente da scrivere, quindi ti permetterò di gestire i dettagli nitidi, ma in pratica devi dire al dialogo cosa fare dopo averlo postato. Potrebbe essere un dialogo intelligente, ma ha bisogno di un qualche tipo di direzione.

Dopo diverse ORE di try / catch sono finalmente arrivato con questo esempio di lavoro, il suo funzionamento su AJAX POST con nuove righe si aggiunge al TABLE al volo (quello era il mio vero problema):

La magia è venuto con il collegamento questo:

 remove remove remove 

Questo è l’ultimo lavoro con AJAX POST e Jquery Dialog:

   

This company will be permanently deleted and cannot be recovered. Are you sure?

Questo lavoro per me:

SPOSTA

 function sposta(id) { $("#sposta").data("id",id).dialog({ autoOpen: true, modal: true, buttons: { "Sposta": function () { alert($(this).data('id')); } } }); } 

Quando si fa clic su “Sposta” nella finestra di dialogo di avviso 100

Ok il primo problema con il tag div è stato abbastanza semplice: ho appena aggiunto uno style="display:none;" ad esso e poi prima di mostrare la finestra di dialogo ho aggiunto questo nel mio script di dialogo:

 $("#dialog").css("display", "inherit"); 

Ma per la versione post sono ancora sfortunato.

Solo darti un’idea potrebbe aiutarti, se vuoi il controllo completo della finestra di dialogo, puoi provare a evitare l’uso delle opzioni dei pulsanti predefinite e aggiungere pulsanti da solo nel tuo div di #dialog. Puoi anche inserire dati in qualche attributo fittizio di link, come Click. chiama attr (“data”) quando ne hai bisogno.

Una soluzione ispirata a Boris Guery che ho impiegato assomiglia a questo: Il link:

 This is my clickable link 

associare un’azione ad esso:

 $('.remove').live({ click:function(){ var data = $('#'+this.id).metadata(); var id = data.id; var name = data.name; $('#dialog-delete') .data('id', id) .dialog('open'); return false; } }); 

E poi per accedere al campo id (in questo caso con valore 15:

 $('#dialog-delete').dialog({ autoOpen: false, position:'top', width: 345, resizable: false, draggable: false, modal: true, buttons: { Cancel: function() { $(this).dialog('close'); }, 'Confirm delete': function() { var id = $(this).data('id'); $.ajax({ url:"http://example.com/system_admin/admin/delete/"+id, type:'POST', dataType: "json", data:{is_ajax:1}, success:function(msg){ } }) } } }); 

Spero che aiuti

 $("#dialog-yesno").dialog({ autoOpen: false, resizable: false, closeOnEscape: false, height:180, width:350, modal: true, show: "blind", open: function() { $(document).unbind('keydown.dialog-overlay'); }, buttons: { "Delete": function() { $(this).dialog("close"); var dir = $(this).data('link').href; var arr=dir.split("-"); delete(arr[1]); }, "Cancel": function() { $(this).dialog("close"); } } }); Delete