Create and Load Dynamic Page

1

Hello,

In v1.7.1, creating and navigating to a dynamically created page was extemely easy:

var html= ‘

blablabla
’
_mainView.router.load({ content: html, animatePages: isAnimated });

Now, how can I create and navigate as before in v5?
I couldn’t achieve doing it?
There is no “routes” structure in our document, how can we achieve it by old way?

Regards,

2

Forum changed my content as it contains HTML tags, here it is for “html” variable:

[div id=“mypage” class=“page” data-page=“mypage”]
[div class=“page-content”]
blablabla
[/div]
[/div]

3

Hello,
I am interested too because I want to add dynamic pages.

Thank you.

4

Use the content property as seen in https://framework7.io/docs/routes.html#route-properties

1 Like
5

Thank you. I found It. But next question is, is it possible to show page from another view? I thought it’s possible but I cannot find how to set routes for it. From current view (or main view), I can load pages easily.

6

Did you ever figure out how to get this to work? I tried using navigationView.router.navigate and pass in the html content, but I’m not able to load the content like how it was in V1.

7

Can you provide an example? I tried many variations, but none of them work.

8

Hi all

I’ve been rooting around in the framework for an answer to this myself, as my app generates almost all of its content based upon dynamic configuration files and database data, and I have a couple of solutions, neither is particularly robust as one uses an (from an admittedly non-exhaustive search) undocumented router.navigate() parameter and one uses an undocumented function of router.load() the two solutions are below, use whichever you feel is more maintainable for yourself.

The main issue is how do we get runtime dynamically generated content into a route so that we can load it. The content and el properties are fine for defining your pages ahead of time, but what if that’s not possible? We need a way to feed content into the page load process itself.

Method the First

Firstly you need to define a route in your routes.js thats not doing anything in particular. In the example I’ve used /dynamicLoad/

routes = [
  {
    path: '/',
    url: './index.html',
  },
  {
    name: "dynamicLoad",
    path: "/dynamicLoad/"

  },
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

Next in your navigate function, specify the parameter of route as an object with the properties of content or el. In the code this utils.extend's your original route with the new properties on the fly.

app.views.main.router.navigate({url:"/dynamicLoad/", route:{content:"<div class='page'>woof</div>"}});

Also works for el:

let testElement = document.createElement("div");
testElement.classList.add("page");
testElement.innerHTML = "woof";

app.views.main.router.navigate({url:"/dynamicLoad/", route:{el:testElement}});

Method the Second

You can hook directly into the router.load function. You don’t need to create any routes here, and the advantage is your URL can be whatever you want it to be (it doesn’t need to match anything). Disadvantages are I’m not sure what very important logic you’re missing from router.navigate as I’m new to the framework. So proceed with caution.

Note that you must include the url parameter, even if you don’t actually need to reference it for anything.

let testElement = document.createElement("div");
testElement.classList.add("page");
testElement.innerHTML = "woof";

app.views.main.router.load({url:"anythingYouWant", el:testElement});

This method should also work replacing el with content and passing it an html string

Happy Apping.