Jquery Modal Confirmation on Django form submit for deletion of object

Question

I am using Django with Crispy forms and am also using the Shopify Embedded Apps SDK. I am trying to have a modal window appear to let the user confirm that they want to delete an object.

My code is attached so far. I have the modal window appearing with the following code, however, the form is not submitted (and the object is not deleted) after the user selects 'delete' on the modal window:

It just closed the modal and nothing happens.

I have tried various methods from around the net, but haven't had any luck.

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 using 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>

rendered 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

Your delete button ( <input type="button" name="delete"... ) never gets sent.

A quick way for you to have debugged this would have been to examined the request.POST variable in django in your view.

Here you are submitting the form programmatically and so the "delete" never gets received.

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

I'd recommend either adding a field to the form via javascript before it gets submitted:

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

Or set your delete button to <input type="submit"... so it gets sent with the form.

Answer 2

I was able to get it working with this 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;
        }

    });
});