Django表单上的Jquery模式确认提交删除对象

Question

我正在使用带有Crispy表单的Django，也正在使用Shopify Embedded Apps SDK。 我正在尝试显示一个模式窗口，以使用户确认他们要删除对象。

到目前为止，我的代码已附加。 我在模态窗口中显示以下代码，但是，在用户在模态窗口中选择“删除”后，表单未提交（并且未删除对象）：

它只是关闭了模态，什么也没发生。

我从网上尝试了各种方法，但是没有运气。

表格

class MyForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper(self)

        self.helper.form_id = 'edit_form'

        self.helper.layout = Layout(        
            [... some input fields...]
        )

        # Add delete button
        self.helper.layout.append(Button('delete', 'delete'))

        # Normal submit button
        self.helper.layout.append(Submit('save', 'save'))

views.py

@login_required
def edit_object(request, *args, **kwargs):
    # Form handling logic
     with request.user.session:
         object = get_object_or_404(models.Object, pk=kwargs['object_id'], ...)

        if request.method == "POST":
            form = forms.MyForm(request.POST, request=request, instance=object)

            if not form.is_valid():
               [... do some stuff ...]

            if form.is_valid():

                # If the save button is pressed
                if request.POST.get('save'):
                    [... do some stuff to save and redirect to url of my choice ...]

                # If the delete button is pressed <<<< The Modal should appear prior to this
                if request.POST.get('delete'):
                    [... delete to object and redirect to url of my choice ... ]
        else:
            form = forms.MyForm(request=request, instance=supplier)

        return render(request, 'template.html', {'form': form})

使用Shopify嵌入式应用程序SDK的template.html：

    <script type="text/javascript">
        [...]
        ShopifyApp.ready(function() {
            ShopifyApp.Bar.initialize({});

            $("#button-id-delete").click(function(ev){
                ShopifyApp.Modal.confirm({message: "Are you sure you want to delete?"}, function(result){
                    if(!result){
                        result.preventDefault();
                    }
                    else {
                        alert("Contine");
                        $("form#edit_form").submit();
                    }
                });
            });
        });
    </script>

<form enctype="multipart/form-data" method="post">
    {% crispy form %}
</form>

渲染的HTML

<form enctype="multipart/form-data" method="post">
    <form  id="edit_form" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='.......' /> 
       [.... various input fields .....]
       <input type="button"
          name="delete"
          value="delete"
          class="btn destroy btn"
          id="button-id-delete"
          />
       <input type="submit"
          name="save"
          value="save"
          class="btn btn-primary"
          id="submit-id-save"
          />
    </form>
</form>

Answer 1

您的删除按钮（ <input type="button" name="delete"... ）永远不会发送。

一种快速调试此问题的方法是，在您的视图中检查django中的request.POST变量。

在这里，您以编程方式提交表单，因此“删除”从未收到。

                else {
                    alert("Contine");
                    $("form#edit_form").submit();
                }

我建议您在提交表单之前通过javascript将一个字段添加到表单中：

                else {
                    alert("Continue");
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'delete'
                        value: 'delete'
                    }).appendto('#edit_form');
                    $("form#edit_form").submit();
                }

或将您的delete按钮设置为<input type="submit"...以便将其与表单一起发送。

Answer 2

我能够使用此js进行操作：

$("#submit-id-delete").click(function(ev){
    ev.preventDefault();

    var deleteBtn = $(this);

    ShopifyApp.Modal.confirm(
        {
            title: "Delete?",
            message: "Are you sure you want to delete this?",
            okButton: "Yes, delete",
            style: "danger"
        },
            function(result){

        if(!result){
            return false;
        }
        else {
            deleteBtn.parents('form').append('<input type="hidden" name="delete" id="delete" value="delete" />').submit();
            return true;
        }

    });
});