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

    });
});