How can I integrate Django with a JqueryUI dialog box?

Question

I want to add a feature on my Django project using jQueryUI dialog box where when you click on a link (like a "delete" link) a jQueryUI dialog box will pop up asking you if you really want to delete that item. Then if you click on the delete button (found the jQuery dialog box) a Django function will do the delete job.

So how do I make the delete button (found the jQuery dialog box) send a post message (with respective variables) to a Django function found in my views.py that will do the delete job?

Consider I am using a view.py file (In Django) as below

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

My requirement is if I press delete option,immediatly a confirmation dialog box will appear with 2 field as follows "YES" or "NO".

Please help me to design a html page and a view.py page to develop with jQuery for the same.

My HTML Page is

<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

You should prepare div for dialog:

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

and link which init open dialog:

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

and js openDialog function:

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

and dialog definition:

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