Passa una variabile all'interfaccia utente JQuery

Question

Sto cancellando un record utilizzando PHP. Voglio utilizzare una finestra di dialogo dell'interfaccia utente JQuery per confermare l'azione, ma non so come passare una variabile (il mio RecordID) alla funzione di reindirizzamento dell'URL o consentire all'URL di accedere a window.location.href.

$("#confirm").dialog({ 
resizable: false, 
autoOpen: false, 
modal: true, 
buttons: { 
    'OK': function() { 
      window.location.href = 'url and myvar??'; 
     $(this).dialog("close"); 
     }, 
    'Cancel': function() { 
     $(this).dialog("close"); 
     } 
    } 
}); 


$("#delete").click(function() { 
    $("#confirm").dialog("open").html ("Are U Sure?"); 
    return false; 
}); 

HTML

<a href='index.php?recordid=$row[recordid]' id='delete'>DELETE</a> 

C'è un buon modo per fare questo?

Answer 1

Si desidera modificare la configurazione della finestra di dialogo al clic (in questo caso, il comportamento del pulsante Ok). Per questo hai molte soluzioni tutte brutte (imo). Vorrei consigli generare una finestra di dialogo al volo, e distruggendo una volta che è stato utilizzato, qualcosa di simile:

$("#delete").click(function(ev) { 
    ev.preventDefault(); // preventDefault should suffice, no return false 
    var href = $(this).attr("href"); 
    var dialog = $("<div>Are you sure?</div>"); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       window.location = href; 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
}); 

O, meglio ancora, incapsulare la finestra di dialogo di conferma in una funzione in modo da poter riutilizzare, in questo modo :

function confirmDialog(msg) { 
    var dialog = $("<div>"+msg+"</div>"); 
    var def = $.Deferred(); 

    $(dialog).dialog({ 
     resizable: false, 
     autoOpen: true, 
     modal: true, 
     buttons: { 
      'OK': function() { 
       def.resolve(); 
       $(this).dialog("close"); 
      }, 
      'Cancel': function() { 
       def.reject(); 
       $(this).dialog("close"); 
      } 
     }, 
     close: { 
      $(this).remove(); 
     } 
    }); 
    return def.promise(); 
} 

e quindi utilizzarlo in questo modo

confirmDialog("are your sure?").done(function() { 
    window.location = $(this).attr("href"); 
}).fail(function() { 
    // cry a little 
}); 

potrebbe essere necessario verificare se l'oggetto differita è stata respinta o risolti prima di chiudere la finestra di dialogo, per garantire la conferma r espelle da vicino (e non solo premendo il pulsante 'Annulla'). Questo può essere fatto con un condizionale def.state() === "in attesa".

Per ulteriori informazioni su jquery differita: http://api.jquery.com/category/deferred-object/

Answer 2

Puoi provare a utilizzare il metodo .data() per memorizzare i dati per voi. Date un'occhiata a questa risposta Passing data to a jQuery UI Dialog

Ad esempio, per passare una variabile, è possibile memorizzare tramite la funzione di dati, prima di aprire la finestra di dialogo

$("#dialog_div") 
.data('param_1', 'whateverdata') 
.dialog("open"); 

allora si può ottenere questo ritorno da:

var my_data = $("#dialog_div").data('param_1') 

Answer 3

L'eliminazione di azioni probabilmente non dovrebbe essere eseguita utilizzando un GET, ma se si volesse farlo in questo modo, si consiglia di utilizzare $ .data in jQuery in modo che ogni collegamento avesse un attributo ID record-record. Quindi, facendo clic su uno dei collegamenti, viene visualizzata la finestra di dialogo e, quando confermata, la aggiunge all'URL e reindirizza. Esempio:

$(function(){ 
    $(".deleteLink").click(function(){ 
     var id = $(this).data("record-id"); 
     var myHref = $(this).attr('href'); 
     $("#confirmDialog").dialog({ 
      buttons:{ 
      "Yes": function() 
       { 
        window.location.href = myHref + id; 
       } 
      } 
     }); 
    }); 

});

<a class="deleteLink" data-record-id="1">Delete</a> 
... 
<div id="confirmDialog"> 
    <p>Are you sure?</p> 
</div>