Przekaż zmienną do okna dialogowego interfejsu użytkownika JQuery

Question

Usuwam rekord używając PHP. Chcę użyć okna dialogowego interfejsu JQuery do potwierdzenia działania, ale nie wiem, jak przekazać zmienną (mój RecordID) do funkcji przekierowania URL lub zezwolić na dostęp do adresu URL pod adresem 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> 

Czy istnieje dobry sposób to zrobić?

Answer 1

Chcesz zmienić konfigurację okna dialogowego na kliknięcie (w tym przypadku zachowanie przycisku Ok). Do tego masz wiele rozwiązań, wszystkie są brzydkie (imo). radziłbym generowania okno w locie, a niszcząc ją, gdy zostały wykorzystane, coś takiego:

$("#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(); 
     } 
    }); 
}); 

Albo jeszcze lepiej, hermetyzacji dialogowym Potwierdzanie do funkcji, tak aby można je ponownie wykorzystać, tak jak :

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(); 
} 

a następnie używać go jak tak

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

Być może trzeba będzie sprawdzić, czy obiekt został odroczony odrzucone lub rozwiązane przed zamknięciem okna dialogowego, w celu zapewnienia potwierdzenia r wyrzuca przy zamknięciu (a nie tylko po naciśnięciu przycisku "Anuluj"). Można to zrobić przy warunku def.state() === "oczekuje".

Więcej informacji na temat jQuery odroczony: http://api.jquery.com/category/deferred-object/

Answer 2

można spróbować użyć metody .data(), aby przechowywać dane dla ciebie. Przyjrzeć się tej odpowiedzi Passing data to a jQuery UI Dialog

Na przykład przekazać zmienną, można przechowywać go za pomocą funkcji danych, przed otwarciem okna dialogowego

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

Następnie można dostać to z powrotem przez:

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

Answer 3

Usunięcie działań prawdopodobnie nie powinno odbywać się za pomocą GET, ale jeśli chcesz to zrobić, poleciłbym użycie $ .data w jQuery, więc każde łącze miało atrybut rekordu danych. Następnie kliknięciem jednego z linków wyskakuje okno dialogowe, a po potwierdzeniu dodaje je do adresu URL i przekierowuje. przykład:

$(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>