CODEWITHSUNDEEP
javascripthtmldjangoajax
hkcode
hkcode

Reputation: 369

Attempting to change pages without full reloading in django and javascript

I have tried to do something with Django and javascript. So for example, if I want to go to my "about" page from my "home" page, I only want to load the contents of the page. There are many similar elements in both pages (such as a header image and navbar) that does not need to be reloaded. I have already 80% achieved what I want, my code is below:

javascript

function loadcontent(url, classname) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // below changes the url to the new page
      window.history.pushState(url, url, url);
      var htmlres = document.createElement("div");
      // get the html from the ajax response and then change the required parts.
      htmlres.innerHTML = this.response;
      document.querySelector(classname).innerHTML = htmlres.querySelector(
        classname
      ).innerHTML;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
window.addEventListener("popstate", function(e) {
  window.location.reload();
});

example link for about page

<a onclick = "loadcontent('{%url 'about_page'%}', '.content')" id = 'About'>About</a>

Django views.py about page

def about_page(request):
    if request.is_ajax():
        return HttpResponse('mainsite/about_page.html')

    return render(request, 'mainsite/about_page.html')

First, of all I would appreciate feedback if this is actually a good idea or not. I have just started learning web programming and this is a mini-project of sorts.

Secondly, my issue is with pressing the back button on my browser. With the current code, I cause it to reload the url because if I press the back button and go back to my "Home" page without reloading, the webpage still displays the same thing on my "About" page.

Having to reload is not ideal since I went through the trouble of creating a way to only load certain parts of my webpage. Is there any way to store what has changed, so that when I "popstate()", it will revert the changes? One possible way is to call my loadcontent() function when popstate happens. However as shown in my function, I need to pass it the url to go to, and class name of the "div" that I want to swap. Is there a way to store the previous URL and which classname was changed?

Thirdly, as shown in my load content function, I don't really know what the "state" parameter sent to history.pushState() is for... I understand that it is a key-value dictionary-like object, however, when is it stored and when will I need to access it? Is it useful for my case where I just need to reload content without any user-selected items?

The only thing I can think of now is to do something like to use {wasloaded: True} as my state parameter, so that when I do "popstate()", it is able to identify if the current page was loaded through my loadcontent() or not, and handle it as required. (I guess this is because if someone came to my page from a totally different website, I would need to reload their page instead of trying to do loadcontent().)

Thank you for taking the time to read this!

Upvotes: 0

Views: 743

Answers (1)

Ali k.
Ali k.

Reputation: 27

Your approach is not good for this. you have to follow following steps to achieve this;

  1. the DOM which you want to update on JS event should have a unique ID or class.
  2. make your ajax call which should return JSON response not HttpResponse and JSONResponse should have HTML field, rendered HTML of you template. You can use get_template and render methods for this.
  3. On success, you have to update the HTML of the page by selecting the unique DOM container.

Upvotes: 1

Related Questions