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>
2
Answers
I was able to get it working with this js:
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.
I’d recommend either adding a field to the form via javascript before it gets submitted:
Or set your
delete
button to<input type="submit"...
so it gets sent with the form.