# Changing template without reloading entire page **URL:** \ **Category:** Templates & Frontend\ **Created:** [July 21, 2020, 2:29am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538 "2020-07-21T02:29:49Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![jguo7](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jguo7/32/1698_2.png) [@jguo7](https://forum.djangoproject.com/u/jguo7)\ **Post date:** [July 21, 2020, 2:29am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/1 "2020-07-21T02:29:49Z")
In an HTML template, I have an interactive map (using google maps API), and when the user clicks on something in the map, I would like to change the information inside of a different on that page based on what the user clicks. Currently, I’m doing that by submitting a form on that click, which calls the same view (reloading the page), only now fetching different information to populate the context sent to the front end. I would like to be able to only change the contents of the without reloading the entire page because when the page reloads, it does not maintain the same map view the user had before. Additionally, I can’t just use javascript because fetching the data requires a database call. Would it be possible to do this? ---
**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\ **Post date:** [July 21, 2020, 2:39am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/2 "2020-07-21T02:39:34Z")
Yes, you can do this using JavaScript. Your JavaScript code can issue a request to a URL to get an HTML fragment. When the server returns that fragment to the JavaScript, the JavaScript can then replace the `div` (or whatever HTML component is supposed to be replaced). On the server side, you would create a view that renders a template and returns it. A template does _not_ need to be a complete page. This is actually a fairly common technique used in many places. ---
**Author:** ![jguo7](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jguo7/32/1698_2.png) [@jguo7](https://forum.djangoproject.com/u/jguo7)\ **Post date:** [July 21, 2020, 2:54am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/3 "2020-07-21T02:54:24Z")
I see, got it! I’ll try creating a new view that renders a template extending the original one. Thanks! ---
**Author:** ![jguo7](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jguo7/32/1698_2.png) [@jguo7](https://forum.djangoproject.com/u/jguo7)\ **Post date:** [July 21, 2020, 3:28pm UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/4 "2020-07-21T15:28:02Z")
Hi! So now I have a function in my views.py `details(request):` which my form is submitting the action to, and for now just returns an HTTPResponse of `

Hello World

`. I have also added a “original\_path/details/” path in my urls.py. However, when my form submits (I use `action="details/"` so I can send the request to that function in the view), it redirects the whole page to the original\_path/details/ url rather than staying on original\_path/ , and the only thing on my page is `

Hello World

`. Not sure if I’m supposed to send the action to just “#”, and handle return something else here if I see the certain request, or if using HTTPResponse is causing the page to reload to the new path. ---
**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\ **Post date:** [July 21, 2020, 3:38pm UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/5 "2020-07-21T15:38:34Z")
To do the other part of this requires JavaScript. Using the form submit action does a full page refresh. You need to use AJAX to issue the request, receive the result, and replace the component on the page. ---
**Author:** ![linehammer](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/linehammer/32/2275_2.png) [@linehammer](https://forum.djangoproject.com/u/linehammer)\ **Post date:** [September 7, 2020, 4:41pm UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/6 "2020-09-07T16:41:32Z")
jQuery.load() is probably the easiest way to load data asynchronously using a selector, but you can also use any of the jquery ajax methods (get, post, getJSON, ajax, etc.) Note that load allows you to use a selector to specify what piece of the loaded script you want to load, as in ```auto $("#mydiv").load(location.href + " #mydiv"); ``` Note that this technically does load the whole page and [jquery](http://net-informations.com/jq/iq/default.htm) removes everything but what you have selected, but that’s all done internally. ---
**Author:** ![thebjko](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/thebjko/32/14098_2.png) [@thebjko](https://forum.djangoproject.com/u/thebjko)\ **Post date:** [June 8, 2023, 6:51am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/7 "2023-06-08T06:51:00Z")
How can I integrate js code with django template language such as if or for tag? ---
**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\ **Post date:** [June 8, 2023, 11:18am UTC](https://forum.djangoproject.com/t/changing-template-without-reloading-entire-page/3538/8 "2023-06-08T11:18:22Z")
The short answer is, you don’t. Django templates are rendered on the server, while the JavaScript is running in the browser. Those processes run at two different times in two separate locations. Depending upon what exactly it is you’re thinking of doing, the [`json_script`](https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-script) tag exists to provide a clean way to pass data between the two.