Djquery Modal對Django表單的確認提交刪除對象

Question

我正在使用帶有脆皮表單的Django，並且還使用Shopify嵌入式應用SDK。我試圖讓模式窗口看起來讓用戶確認他們想要刪除一個對象。

我的代碼已附加到目前爲止。我有下面的代碼出現的模態窗口，但是，形式不後提交（和對象沒有被刪除）模態窗口的用戶選擇「刪除」：

它只是關閉模式沒有任何反應。

我已經嘗試過各種方法從網上，但沒有任何運氣。

form.py使用Shopify嵌入式應用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}) 

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

我能得到它的工作與這個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; 
     } 

    }); 
}); 

Answer 2

你刪除按鈕（<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"...所以它得到與形式發送。