Question

在我的django模板中，我有一段代码如下：

{% block b %}
    { % for foo in foos %}
        { % if foo.some_variable % }            
            <form method="LINK" action="{% url "some_view" foo.id %}" id="button">
            <input type="submit" value="Button"/></form>
        { % else % }
            <form method="LINK" action="{% url "some_view1" foo.id %}" id="button">
            <input type="submit" value="Button1"/></form>  
            <form method="LINK" action="{% url "some_view2" foo.id %}" id="button">
            <input type="submit" value="Button2"/></form>      
        { % endif %}
        <br>
     { % endfor %}
{% endblock % }

我需要为所有这些按钮进行确认弹出。所以我试着添加

onclick = "return confirm("are u sure?")"

它有效，但它很难看。我想添加自定义按钮名称，标题等。所以我读到这在清晰的javascript中是不可能的，我应该使用jquery。

我尝试过类似的东西，但由于我不知道jquery既不是js也不行：

<script>
    function confirmAction(){
        var confirmed ; 
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Yes": function() {
                    confirmed = true;
                    $( this ).dialog( "close" );

                },

                "No": function() {
                    confirmed = false;
                    $( this ).dialog( "close" );

                }
            }
        });
        return confirmed
    }
</script>

<div id="dialog-confirm" title="Are you sure??">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        Are you sure you want to do this?</p>
</div>

当我点击按钮时，会出现弹出窗口，但它突然消失，无论如何我都会被重定向到视图。

你可以试着帮助我吗？最好的问候，

Answer 1

确认总是假的，因为javascript是asynchrone。

你需要使用一些闭包。这样的事情可以解决问题：

    $('input:submit').click(function() {
        // get form associated with the button
        var form = $(this).parents('form')
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Yes": function() {
                    $( this ).dialog( "close" );
                    // maybe set an hidden field to keep button value if needed
                    form.submit()
                },

                "No": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        return false;
    }

Answer 2

另一个问题是我在我的网站上也有这样设计的其他按钮（表单，提交）但是我已经使用了这段代码：

<script>
     $('.popup_button').click(function() {
         // get form associated with the button
         var form = $(this)

         $("#dialog-confirm").dialog({
             resizable: false,
             height:200,
             modal: true,
             buttons: {
                 "Yes": function() {
                     $( this ).dialog( "close" );
                     form.submit()
                 },

                 "No": function() {
                    $( this ).dialog( "close" );
                 }
             }
         });
         return false;
     });
</script>

<div id="dialog-confirm" title="Confirmation" style='display: none'>
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
        Are you sure?</p>
</div>

因此，只有那些具有“popup_button”类的按钮才会出现确认弹出窗口我唯一缺少的是如何获得每个按钮的自定义确认消息。

当我替换

$("#dialog-confirm").dialog

带

$(".new_button_class").dialog

然后将class ='new_button_class'和'title'属性添加到我的按钮表单中，奇怪的事情发生了。更重要的是，我现在不知道如何以这种方式设置对话框消息。

添加

$(".new_button_class", form).dialog

而不是导致弹出窗口根本不显示。

如何解决？

确认django模板中的多个按钮

2 个答案: