0

So I have this update view:

class UpdateRules(UpdateView):
    model = BlackList
    form_class = AddRules       
    template_name= 'blacklist_form.html'
    success_url = reverse_lazy('posts:list')

which displays this template blacklist_form.html:

<form class="well contact-form" method="post" action="">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Editing Number</h3>
    </div>
    <div class="modal-body">
       {% csrf_token %}
       {{form.as_p}} 
    </div>
    <div class="modal-footer">
       <input class="btn btn-primary" type="submit" value="Save" />
    </div>
</form>

Then in the template where the modal is called/rendered I have this link for each object to be edited:

<a class="contact" href="#" data-form="{% url 'posts:update_rules' obj.pk %}"
title="Edit">

And this div to display the modal:

<div class="modal" id="contactModal">
</div>

Lastly, the jQuery:

$(document).ready(function() {

    $(".contact").click(function(ev) { // for each edit contact url
        ev.preventDefault(); // prevent navigation
        var url = $(this).data("form"); // get the contact form url
        console.log(url);
        $("#contactModal").load(url, function() { // load the url into the modal
            $(this).modal('show'); // display the modal on url load
        });
        return false; // prevent the click propagation
    });

    $('.contact-form').on('submit',function() {
        $.ajax({ 
            type: $(this).attr('method'), 
            url: this.action, 
            data: $(this).serialize(),
            context: this,
            success: function(data, status) {
                $('#contactModal').html(data);
            }
        });
        return false;
    });
});

My problem is this: I'm able to get the update view form to display in the modal when I click the edit link for each object, but the submit button doesn't do anything. When I save the form from the actual updateview template, it works just fine, so I'm thinking it must be something wrong with the jQuery. I'm not getting any errors, the modal just disappears and the page doesn't reload. Any pointers on what going on?

Adam Yui
  • 139
  • 11
  • 1
    Going off of the assumption that it's a jQuery issue, can you tell me if you still have the problem if you remove the 'return false' from the contact-form submit function? It's possible that you're returning false before that ajax call is complete, and in doing so preventing the rest of the function from executing.https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done – Robert Townley Jul 27 '17 at 20:41
  • I tried removing it but still having the issue, I think the page may be reloading but its not updating the object or redirecting to the success url specified in the view – Adam Yui Jul 27 '17 at 20:57
  • 1
    Ah I didn't think about how there might be a redirect to the success URL. You do have to specifically handle that with jQuery. You can respond to the request with a change to window.location, like mentioned in Mixo's answer on this post: https://stackoverflow.com/questions/29137910/redirecting-after-ajax-post-in-django – Robert Townley Jul 27 '17 at 21:05

0 Answers0