Ad

Jquery Modal Confirmation On Django Form Submit For Deletion Of Object

- 1 answer

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: enter image description here

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

Answer

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

    });
});
Ad
source: stackoverflow.com
Ad