Django表单上的Jquery Modal Confirmation提交删除对象

Question

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

到目前为止，我的代码已附上。我的模态窗口出现了以下代码，但是，在用户在模态窗口上选择“删除”后，表单没有提交（并且对象没有被删除）：

它只是关闭了模式，没有任何反应。

我尝试了网上的各种方法，但没有任何运气。

form.py

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

template.html 使用 Shopify Embedded App SDK：

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

    });
});