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

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

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

flora.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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/e8cf17fa-a7f7-4002-86dc-4b2460a3e140%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

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

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 {{ }}.

Il giorno domenica 18 agosto 2019 15:18:47 UTC+2, Xiaoyun Huang ha scritto:

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 <a href="https://stackoverflow.com/questions/3583534/refresh-div-element-generated-by-a-django-template" style="font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;color:rgb(0,89,153)" target="_blank" rel="nofollow" onmousedown="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F3583534%2Frefresh-div-element-generated-by-a-django-template\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNHLKsmEGiPaoEltqwlwGed-Q5L9Hg&#39;;return true;" onclick="this.href=&#39;https://www.google.com/url?q\x3dhttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F3583534%2Frefresh-div-element-generated-by-a-django-template\x26sa\x3dD\x26sntz\x3d1\x26usg\x3dAFQjCNHLKsmEGiPaoEltqwlwGed-Q5L9Hg&#39;;return true;">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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/ac926768-d5af-4ac8-9215-217faedad245%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

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

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 <[hidden email]> del dia dl., 19 d’ag. 2019 a les 23:10:
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 {{ }}.

Il giorno domenica 18 agosto 2019 15:18:47 UTC+2, Xiaoyun Huang ha scritto:

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.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/ac926768-d5af-4ac8-9215-217faedad245%40googlegroups.com.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAK-JoTQt3XNOFijrTFKabxLfzRiqxX-xCuU%2BMapiC%2B7qsLCBGg%40mail.gmail.com.