-1

I have a single page dynamic webpage. When the user clicks some buttons the entire layout of the app changes.

My current approach to do this is, clear the entire contents of the page, and hard code each line of html that needs to be added.

In other words, I have a javascript/jquery script that clears everything and manually adds each element one by one. Rather than parsing a pre-existing file or something more clever.

I would like to have a template written in html and jinja (if possible), and just load that information. I.e, clear the entire contents of the page then set them to the template.

But I am unsure on how to do that.

This would be for example, an attempt at creating a page:

function setResume() { setElementToFile("MainText", "static/resume.txt"); $('head').empty(); $('head').append('<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>'); $('head').append('<link rel="stylesheet" type="text/css" href="static/general.css"/>'); $('head').append('<link rel="stylesheet" type="text/css" href="static/resume.css"/>'); $(".TopHeader").css("margin-left", "10%"); $("article").empty() var more_info = $('<div class="TopHeader"></div> id="SecondHead"'); more_info.append( $('<a target="_blank" href="https://github.com/Makogan">\ <img src="static/images/GitHub-Mark.png" width="64px" height="64px" alt="github">\ </a>')); more_info.append( $('<a target="_blank" href="https://gitlab.com/Makogan">\ <img src="static/images/gitlab_logo.png" alt="github" width="64px" height="64px">\ </a>')); more_info.append( $('<a target="_blank" href="https://www.linkedin.com/in/camilo-talero-3906a9167/">\ <img src="static/images/linkedin_logo.png" alt="github" width="64px" height="64px">\ </a>')); more_info.append( $('<a target="_blank" href="https://www.linkedin.com/in/camilo-talero-3906a9167/">\ <img src="static/images/mail.png" alt="github" width="64px" height="64px">\ </a>')); $(".TopHeader").after(more_info); clearButtons(); document.getElementById("resume_button").style.backgroundColor = "rgba(25, 129, 190, 0.7)"; } function clearButtons() { var x = document.getElementsByTagName("button"); var i; for (i = 0; i < x.length; i++) { var color = getComputedStyle(document.body).getPropertyValue('--button_background_color'); x[i].style.backgroundColor = color; } } function setElementToFile(elementID, file) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById(elementID).innerHTML = this.responseText; } }; xhttp.open("GET", file, true); xhttp.send(); }
Improve this question
1
  • Can you please provide some code? It's going to be a rocky road to an answer letting StackOverflow do all the work... Commented Oct 21, 2018 at 16:13

2 Answers 2

Reset to default
1

Perhaps you are looking for the jquery ".load()" function http://api.jquery.com/load/

You can use different html files and load them dinamically when a button is clicked:

<button type="button" id="button1" name="button1">Load content 1</button> <button type="button" id="button2" name="button2">Load content 2</button> <div id="content_div"> </div> <script> $(function() { $("#button1").click(function () { $("#content_div").load("content1.html"); }) $("#button2").click(function () { $("#content_div").load("content2.html"); }) }); </script>

If you need the "content_div" to have something by default when you access the page, you can use:

<script> $(function() { $("#content_div").load("content_default.html"); }); </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Would this work if those files have jinja templates inside of them?
Could you give an example of the file you are trying to load? Maybe this could be of help: stackoverflow.com/questions/42746801/…
$.load() does not do templating. You could point it to an endpoint though that pre-renders your templates so that it returns the HTML you need which it then loads into your page.
0

I recommend you take a look at a JS templating engine, e.g. Handlebars or Mustache.

This will let you define your page content/layouts in separate template files, and on user interaction you call the framework to pull in whatever template you need and render it.

Sorry for not being more specific, should you require assistance with any of these libs I suggest you post a spearate question; this on is quite broad already.

Improve this answer

2 Comments

Would either of this refresh the page or load the contents dynamically?
It would load them dynamically, but there would have to be an AJAX request to retrieve any external templates from the server. What is done occasionally is that all possible templates are delivered to the client, e.g. in <script> elements, and then these "inline templates" can be retrieved via element IDs from within JS. That way you save making a request to the server at the expense of inflating the overall response. Your call I guess.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.