javascript - Django 表单上的 Jquery 模态确认提交以删除对象

Question

我正在使用 Django 和 Crispy 表单，并且还使用 Shopify 嵌入式应用 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})

使用 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"... ) 永远不会被发送。

调试此问题的一种快速方法是在您的 View 中检查 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"...因此它会与表单一起发送。