How to refresh part of a Django page <div> with AJAX?

[Xiaoyun Huang]

I am deploying a website using Django. There is an application called 'forum', supporting a discussion forum on my website.

The url of the discussion forum is 'XXX.com/forum/roomY'. I want to refresh a div id = ''chat'', which includes a message list, on this page when users click a refresh button. I want to use AJAX to do that.

But I find that I could not call the function updatestatementlist(request) to retrieve the updated message list so it can be passed to the on this page.

/forum/views.py def updatestatementlist(request):

log.debug("call statementlist function")
statements = Statement.objects.filter(discussion=discussion)
return render(request, 'forum/statementlist.html', {
    'statements': statements
    })

I cannot see the log info so I think by clicking the button I fail to call this function.

The main html page of the discussion forum is /forum/discussion.html, which is under the template folder. I extract the html code within the div id = "chat" to a separate html /forum/statementlist.htmlas suggested here and several other SO posts.

/forum/discussion.html

<button id = "Refresh"> Refresh </button>
<div id="chat">
{% include 'forum/statementlist.html' %}
</div>

/forum/statementlist.html

{% recursetree statements %}
{% endrecursetree %}

forum.js

//When users click the refresh button
    $("#Refresh").on("click", function(event){
    alert("Refresh clicked")
    $.ajax({
        url: '',
        type: "GET",
        success: function(data) {
            alert("success")
            var html = $(data).filter('#chat').html();
            $('#chat').html(html);
        }
    });
});

I also tried a few other url in this AJAX request: {% url updatestatementlist %}, {% url 'updatestatementlist' %}. But then I think it should be set to empty because I don't want to be redirected to another url. The discussion forum has a url of 'XXX.com/forum/roomY', by clicking the refresh button on this page I only want to refresh the div and fetch an updated statement list from the server.

BTW, I can see the two alerts after I click the button.

/forum/urls.py

urlpatterns = [
...
url(r'^(?P<label>[\w-]{,50})/$', views.discussion_forum, name='discussion_forum'),
url(r'^(?P<label>[\w-]{,50})/$', views.statementlist, name='statementlist'),

]

/forum/views.py def discussion_forum() is used to load all the information when the user first arrives at this forum.

I guess my problem might be that 1) the AJAX is wrong; 2) the url is wrong so that the updatestatementlist() can not be called.

Can anyone help me with that? Thank you so much.

[Joseph Bacchilega]

Do not use alerts to debug your JS code.

Use console.log() and/or debugger while keeping your Chrome/Firefox console (opens with F12) open.

In this case, try to see what "data" is set to in the response success callback function.

> But then I think it should be set to empty because I don't want to be redirected to another url.

$.ajax does not redirect you in any way (that's the point of using $.ajax over <form>). You must specify a URL. Default behavior for empty URL is, I think, to query the same URL as the page the user is currently visiting.

Your problem is likely in the URL structure: try to manually visit those URLs to see if your views.py log fires, then put that link manually in $.ajax and, finally, once you've verified that works, replace the manually typed link with the template tag {{ }}.

[Gil Obradors]

HI

I subscribe all @Joseph said, and add:

For url dispatcher, can you try with very different stamentlist regex? I think you can't have 2 same regex, or if you want, you may treat this route inside classview

About AJAX,I can't help no more, I'm newbie with AJAX,

I think that is more interesting return responses as JsonResponse,

Maybe now is complicated to restructure the code, but I think is more powerful at long time.

Only this suggestion

Thank you  :)

Missatge de Joseph Bacchilega <jos...@pulsewave.net> del dia dl., 19 d’ag. 2019 a les 23:10:

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/ac926768-d5af-4ac8-9215-217faedad245%40googlegroups.com.