Geek asks and answers

How can I integrate Django with the JqueryUI dialog box?

I want to add a function to a Django project using the jQueryUI dialog box, where when you click the link (for example, the "delete" link), the jQueryUI dialog box will appear asking you if you really want to delete this element. Then, if you click on the delete button (find the jQuery dialog box), the Django function will execute the delete task.

So, how to make a delete button (jQuery dialog box detected) send a message with messages (with the corresponding variables) to the Django function found in my view.py that will execute the delete task?

Note that I am using the view.py file (in Django) as shown below

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

My requirement: if I click the "Delete" button, a confirmation dialog box will immediately appear with 2 fields as follows "YES" or "NO".

Please help me create an html page and a view.py page for development using jQuery for the same.

My html page

<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>
+5
source share
1 answer

You should prepare a div for the dialog:

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

and a link that opens the opening dialog:

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

and js openDialog function:

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

and definition of dialogue:

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

More articles:


All Articles