0

Amateur here.I am working on a project. I wanted to display the html file in the div.I came across this How do I load an HTML page in a <div> using JavaScript? . I have come across issue here. In

function load_home()
         {
                document.getElementsByClassName("Analytic_area").innerHTML='<object type="html" data={% static 'app1\Venues_location.html' %}" ></object>;' 
         }

The problem is with

data={% static 'app1\Venues_location.html' %}"

It asks me to put ';' where there is need and because of this, on runtime the path doesn't parse correctly.

Here is Vscode

Home is the button ,clicking on which a html will be displayed in the div below

Foreverlearner
  • 5
  • 1
  • 7
  • Yeah that is wrong on multiple levels. Do you want to load the html dynamically with Ajax? or just include it in the page when the page renders? – lucutzu33 Jun 14 '21 at 19:59
  • @EneP Well Html is generated dynamically in my project.So i added a button which when clicked loads the webpage.So dynamically it is. – Foreverlearner Jun 14 '21 at 20:02

1 Answers1

0
# views.py
def venues_location(request):
    return render(request, 'app1\Venues_location.html')

Then in your js:

function load_home(){

fetch('/venues_location') // or whatever url you assign to that view
  .then(response => response.text())
  .then(data => document.getElementsByClassName("Analytic_area").innerHTML=data);
}
lucutzu33
  • 3,470
  • 1
  • 10
  • 24
  • Do I need to add anything to urls.py? Only issue right now is getting the address right. – Foreverlearner Jun 14 '21 at 20:48
  • If am getting right , the function load home sending the request fetch the html I want inn the div.This request goes to url.py in which i have added of the view, from there it goes to view.py where venues_location(request) is accessed and returns the desired html file. I am getting 404 even though the url is correct. – Foreverlearner Jun 15 '21 at 09:09
  • Try to use {% url '' %} template tag then. – lucutzu33 Jun 15 '21 at 09:20
  • this worked in resolving the url but html file still isn't visible on the div.In Terminal window code returned is 200. I am really grateful to you for helping me out , its annoying to keep taking your time. – Foreverlearner Jun 15 '21 at 11:14
  • Inspect the html source code and see if the code is actually there. – lucutzu33 Jun 15 '21 at 11:48
  • ` async function load_home() { let url = "{% url 'venues_location' %}" Analytic_area.innerHTML = await (await fetch(url)).text(); } ` and it was able to load the elements but couldn't display it, maybe because it contained many scripts. but loading a simple html file was displayed successfully. – Foreverlearner Jun 15 '21 at 19:35