Jak mogę zintegrować Django z oknem dialogowym JqueryUI?

Question

Chcę dodać funkcję do mojego projektu Django przy użyciu okna dialogowego jQueryUI, w którym po kliknięciu łącza (takiego jak link "usuń") pojawi się okno dialogowe jQueryUI z zapytaniem, czy naprawdę chcesz usunąć ten element. Następnie, jeśli klikniesz przycisk Usuń (znaleziono okno dialogowe jQuery), funkcja Django wykona zadanie usunięcia.

Jak ustawić przycisk usuwania (znajdujący się w oknie dialogowym jQuery) wysłać wiadomość pocztową (z odpowiednimi zmiennymi) do funkcji Django znalezionej w moim pliku views.py, która wykona zadanie usunięcia?

Rozważmy używam plik view.py (w Django) jak poniżej

def deletebook(request,book_id): 
    books=Book.objects.get(pk=book_id) 
    books.delete() 
    return redirect('/index/') 

Moje wymogiem jest, jeśli nacisnę usunąć opcję, natychmiast pojawi się okno dialogowe potwierdzenia z 2 pola w następujący sposób „TAK” albo nie".

Proszę pomóż mi zaprojektować stronę HTML i stronę view.py do opracowania z jQuery dla tego samego.

Moje strony HTML jest

<form action="/deletebook/{{ books.book_id}}/" method="POST"> {% csrf_token %} 
<table> 
    <tr> 
    <td align="right">Book Name :<br><br><br> </td> 
    <td align="left"><input type="text" name="book_name" value="{{books.book_name}}"></input><br><br><br></td> 
    </tr> 
    <tr> 
    <td align="right">Author Name :<br><br><br></td> 
    <td align="left"> <input type="text" name="author_name" value="{{books.author_name}}"></input><br><br><br></td> 
    </tr> 
    <tr> 
    <td align="right">Publisher Name : <br><br><br></td> 
    <td align="left"><input type="text" name="publisher_name" value="{{books.publisher_name}}"></input><br><br><br></td><br><br><br> 
    </tr> 
</table> 
<td><input type="submit" value="Delete"><td> 
</form> 

Answer 1

Należy przygotować div dla okna:

<div id="dialog"> 
    #some text here 
</div> 

oraz link, który init, otwarty dialog:

<a href='#' onclick='javascript:openDialog()'></a> 

i js function openDialog:

function openDialog(){ 
    $('#dialog').dialog('open'); 
} 

Definicja

i dialog:

$("#dialog-form-ajax").dialog({ 
    autoOpen: false, 
    buttons: { 
     "Delete": function() { 
      $.ajax({ 
       #ajax call for delete 
       #with url pointing to your delete function 
      }); 
      $(this).dialog("close"); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
});