I can use ajax from /edit but not from /detail
<p>Django 1.10.</p>

<p>From DetailView I want to update the model object via ajax. Well, the model object is updated. But the ajax success function can't get data from the post method. I occur in failure function.</p>

<p>In other words, in Django in UpdateView I can stop at a breakpoint in form_valid, control that it returns an HttpResponse with code 200. And later if I refresh page with detail information, I can see that the model object has changed.</p>

<p>But in In Chrome dev tools while debugging js I occur in fail function. And jqXHR.status=0, textStatus = "error", errorThrown="".</p>

<p>I have prepared a simulation of my real situation:
<a href="https://Kifsif@bitbucket.org/Kifsif/ajax_update.git" rel="nofollow">https://Kifsif@bitbucket.org/Kifsif/ajax_update.git</a></p>

<p>There is a difference: this UpdateView renders the general_detail.html. In real life it should render partial_detail.html. Well, it is ajax, we don't need to reload the whole page.</p>

<p>So, this simulation renders the whole page. What does it mean? It means that:</p>

<p>1) If I'm in <code>http://localhost:8000/1/detail</code>, pressing AjaxEdit link leads me to the failure. Not working. In Chrome developers tools I occur in failure function.</p>

<p>2) I return to <code>http://localhost:8000/1/detail</code>, press Edit. I occur in <code>http://localhost:8000/1/edit</code>. This is ordinary editing without ajax. But the view is organized so that to render a response without redirect. So, I save the model and stay in <strong><code>http://localhost:8000/1/edit</code></strong>. And I can see the whole details as if I were looking at the result of a proper DetailView. There are two control links: Edit and AjaxEdit. <strong>And now AjaxEdit starts working.</strong> </p>

<p>In other words, at <code>http://localhost:8000/1/edit</code> ajax works, at <code>http://localhost:8000/1/detail</code> it doesn't.</p>

<p>I've just started learning ajax. I can't cope with this. I would say that a redirect may influence. But there is no redirect. </p>

<p>Via ajax I address to the get method of the view and get a proper data. What is the difference compared to post.</p>

<p>Could you comment on it and help me break through. </p>

<p><strong>views.py</strong></p>

<pre><code>class GeneralUpdate(UpdateView):
    model = General
    fields = ['char']

    def form_valid(self, form):
        self.object = form.save()
        return render(self.request, 'general/general_detail.html', {"object": self.object})
</code></pre>

<p><strong>models.py</strong></p>

<pre><code>class General(models.Model):
    char = models.CharField(max_length=100)

    def get_absolute_url(self):
        return reverse("detail", kwargs={"pk": self.id})
</code></pre>

<p><strong>urls.py</strong></p>

<pre><code>urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^create$', GeneralCreate.as_view(), name="create"),
    url(r'^(?P&lt;pk&gt;\d+)/detail$', GeneralDetailView.as_view(), name="detail"),
    url(r'^(?P&lt;pk&gt;\d+)/edit$', GeneralUpdate.as_view(), name="edit"),
]
</code></pre>

<p><strong>general_form.html</strong></p>

<pre><code>&lt;form id="form" action="" method="post"&gt;{% csrf_token %}
    {{ form.as_p }}
    &lt;input id="submit" type="submit" value="Save" /&gt;
&lt;/form&gt;
</code></pre>

<p><strong>general_detail.html</strong></p>

<pre><code>&lt;p id="char"&gt;{{ object.char }}&lt;/p&gt;

&lt;a href="{% url "edit" object.id %}"&gt;Edit&lt;/a&gt;
&lt;a id="ajax_edit" href="javascript:void(0)"&gt;AjaxEdit&lt;/a&gt;


&lt;script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script&gt;
    $( document ).ready(function() {
    var ajax_edit = $("#ajax_edit");
    var char = $("#char");

    function show_get(data){
        $(data).insertAfter(char);
        var submit_link = $("#submit");
        submit_link.click(post);
    }

    function show_post(data){
        debugger;
    }

    function failure(jqXHR, textStatus, errorThrown){
        debugger;
    }

    function post(){
        $.ajax({
                method: "post",
                data: $("form").serialize(),
                url: 'http://localhost:8000/2/edit',
                success: show_post,
                error: failure,
                }
        )
    }

    function get(){
        $.ajax({
                method: "get",
                url: 'http://localhost:8000/2/edit',
                success: show_get,
                }
        )
    }

    ajax_edit.click(get);

    });
&lt;/script&gt;
</code></pre>

<p>If I understand it correctly...</p>

<ol>
<li>You click <code>AjaxEdit</code> - it fetches response from <code>UpdateView</code> and loads it directly into your <code>/detail</code> page. You technically still on <code>detail</code> page now.</li>
<li>You check your form in chrome dev and see that form <code>action</code> attribute points to nothing.</li>
<li>You click <code>Save</code> and your ajax request updates data as planned.</li>
<li>Then default submit happens and your <code>POST</code> request goes to <code>/detail</code> url since technically you are still on <code>details page</code>.</li>
<li>Django's <code>DetailView</code> forbids <code>POST</code> requests and kick it with 405 HTTP status (Method not Allowed), check it in chrome inspector.</li>
</ol>

<p>So that's the main reason.</p>

<p>As a fix you can disable default submit action by adding </p>

<pre><code>$("#form").submit(function(event){
      event.preventDefault();
});
</code></pre>

<p>before <code>submit_link.click(post);</code></p>

python ajax django