如何将Django与JqueryUI对话框集成？

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.

我想使用jQueryUI对话框在我的Django项目中添加一个功能,当你点击链接(如“删除”链接)时,会弹出一个jQueryUI对话框,询问你是否真的要删除该项。然后,如果单击删除按钮(找到jQuery对话框),Django函数将执行删除作业。

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?

那么如何使删除按钮(找到jQuery对话框)发送一条消息(带有相应的变量)到我的views.py中的Django函数,它将执行删除作业?

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

考虑我正在使用view.py文件(在Django中),如下所示

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".

我的要求是如果我按下删除选项,立即出现一个确认对话框,其中包含2个字段,如下所示“是”或“否”。

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

请帮我设计一个html页面和一个用jQuery开发的view.py页面。

My HTML Page is

我的HTML页面是

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

1 个解决方案

#1

You should prepare div for dialog:

您应该为对话框准备div:

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

and link which init open dialog:

并链接哪个init打开对话框:

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

and js openDialog function:

和js openDialog函数:

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

#1