Converting multipage application to single page

Question

I am building a TV application for Hbbtv, which works on the TV browser.

However now in my application, each page is specified in using anchor tag and every page loads when I click on a navigation menu.

How do I make this as a single page application as making the main page stay and only load the contents when I choose the menu options. I program works on key press

so this is how my javascript looks like

function keyFunction(e) {
switch(e) {
    case "OK":
        switch(menuPosition) {
            case 1:
                document.getElementById("msg").innerHTML = "<h2>Welcome to HbbTV Tutorials</h2>";
                break;
            case 2:
                document.getElementById("msg").innerHTML = "<h2> Internet </h2>";
                break;

Each page has a lot of image and contents, so I don't think I can make use of inner HTML

You can create SPA without any framework, it's just more work as you need to handle url change (routing) and write your code to display different "views" etc. — Goran.it, Feb 01 '19 at 19:44
What is the server side code? Is there any web api on the back off the UI? — Seyhmus Gokcen, Feb 01 '19 at 20:08
@Goran.it is correct, you dont **need** a framework... but without one you are going to be doing a lot of extra work. — Isaac Vidrine, Feb 01 '19 at 20:20
is there a way i can put all the contents of a page in a div and replace divs as i click on the menu option — user-6589801, Feb 01 '19 at 20:30

score 1 · Accepted Answer · answered Feb 01 '19 at 19:44

1

You could look at JQuery and AJAX. Storing your HTML pages and get the content through AJAX requests fired by user clicks.

This might help you : https://ilovecoding.org/courses/jquery/lessons/ajax-create-a-single-page-app-with-jquery

answered Feb 01 '19 at 19:44

Titouan Le Floch Riche

162
1
8

the tv doesnt support ajax – user-6589801 Feb 01 '19 at 19:50
Well you could still do it with jQuery only and use the template tag : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template – Titouan Le Floch Riche Feb 01 '19 at 19:58
I’ts like switching divs as you asked in the comments above. – Titouan Le Floch Riche Feb 01 '19 at 23:18
but i am not knowing how do i switch divs on key press – user-6589801 Feb 02 '19 at 10:15
suppose there is home and about tabs. when i press ok on home how do i get the home div displayed – user-6589801 Feb 02 '19 at 10:15
You could do the same as on the examples here : https://www.w3schools.com/tags/tag_template.asp – Titouan Le Floch Riche Feb 02 '19 at 22:56
To handle multiple templates, you could assign an id to all of them to get the right one when you need it. Like here :https://blog.teamtreehouse.com/creating-reusable-markup-with-the-html-template-element – Titouan Le Floch Riche Feb 02 '19 at 23:04

Converting multipage application to single page

1 Answers1