Framework7: [V2] dynamical content loaded via ajax? router ajax sync : any working sample for this?

[rapgithub]

because no DOC yet for the v.2 i am lost here with the ajax to dynamically update content of the page because it is not as in the v.1.6.5 that in my case it was working fine...

for the v.2 and the guides online are not clear and no working samples for this yet...

I use the one explained in the
https://blog.framework7.io/framework7-v2-beta-41f983d6e89d

and it does not work either...

I just need to update the content in my component page via ajax when going to that page... just simple like that but nothing seems to work in this aspect, i am using the router async and all data is in the console fine but is not not passed to the page ...

any clues Vladimir all samples of pages for v.2 does not have a sample of ajax content for a page..
thanks

how to load via ajax dynamical content for the component page requested in v2? no samples yet for router or pageinit available to know ... :(

[ghost]

Hi @rapgithub,

It's works for me:

routes: [
  // Load via Ajax
  {
    path: '/about/',
    url: './pages/about.html',
  },
  // Dynamic page from content
  {
    path: '/news/',
    content: `
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p>This page created dynamically</p>
          </div>
        </div>
      </div>
    `,
  },
  {
    path: '/something/',
    async: function (resolve, reject) {
      // Get external data and return template7 template
      $.getJSON('http://some-endpoint/', function (data) {
        resolve(
          // How and what to load: template
          {
            template: '<div class="page">{{users}}</div>'
          },
          // Custom template context
          {
            context: {
              users: data,
            },
          }
        );
      });
    }
  }
],

More informations here, It is very useful and cleary.

https://blog.framework7.io/mastering-v2-router-958ea2dbd24f

[rapgithub]

To show you the cases these are:

case 1

this make the ajax request call and if user=0 return all users, and in this scenario the template: works but it shows only the template as a new page...

I just need to load an specific page for instance a component page like this componentUrl: './pages/contacts.html' and in that page update the content...

this component page has this form where contacts is my json object with all the contacts

< template >
{ {#each contacts }}
{{ this.name }} {{ this.address }}
{{ / each }}

this code below works but it is not what i need, i need my contact page that has a lot of external js and styles to be updated dynamically and I cannot include all that js in the index.html because it works only for that page.

this works but i need the component contacts.html page to be updated when i make this ajax call

path: '/contacts/',
name: 'contacts',
async: function (resolve, reject) {
    dataf = {users:'0'};
    app.request({
          url: './path-to-scripts/script-file',
          dataType: 'json',
          data: dataf,
          method: "POST",
          crossDomain: true,
          statusCode: {
              404: function(xhr) {
                  console.log('page not found');
              }
          },
          complete: function(){
              console.log('complete');
          },
          success: function(response) {
              console.log(response);
              resolve(
              {
                template: '<div class="page">{{response}}</div>'
              },
              {
              context: {
                response,
              },
              });
          },
          error: function(){
              console.log('error');
          }
      })
  }

this doesn't work

also i tried to use this to send via component: all the objects as specified in the Router information to the following page componentUrl: './pages/users.html', and it goes to that page but it does not send the params to that page...

path: '/users/',
componentUrl: './pages/users.html',
name: 'users',
component: {"user":"vladimir","userId":"123","posts":"about-me","postId":"1"},

this works but it is not what i need

< a href = "/users/vladimir/123/about-me/1/ " >users< / a >

path: '/users/:user/:userId/:posts/:postId/',
name: 'users',
componentUrl: './pages/users.html',

all my data is dynamic this is why i need that that i mentioned! update the content of a specific page template with ajax dynamically! :)

[nolimits4web]

Added option to extend component context, should be:

path: '/users/',
componentUrl: './pages/users.html',
name: 'users',
options: {context: {"user":"vladimir","userId":"123","posts":"about-me","postId":"1"}},

[rapgithub]

thank I will try this way!! and let you know I just need to pass an entire json object to the destination component page after ajax request returned it..

my component page it is a < template > component page with handlebars waiting for the json object to be available when entering the page.!

thanks
I hope this work for me!

[rapgithub]

Hi vladimir!

I tested and for sending static params it works and then in the following page I show them using

$router.router.options.context

But i need these params to be updated after ajax success because it is a big json object and I tried to put these options: {context: {"user":"vladimir","userId":"123","posts":"about-me","postId":"1"}} for instance, after ajax success inside resolve function and without it and not working... not passing this params this way... :(

I need to pass params dynamically to the following page in this case it is a big json object... so the conclusion:

this works but only if the data is previously specified static but it does not work if i add this

options: {context: {... after the ajax success...in a dynamic way

path: '/users/',
componentUrl: './pages/users.html',
name: 'users',
options: {context: {"user":"vladimir","userId":"123","posts":"about-me","postId":"1"}},

If I pass these params I need then to be dynamic something like this :

resolve(
// How and what to load: template
{
options: {data},
},
// Custom template context
{
context: {
users: data,
},
}

where data is context: {"user":user,"userId":userId,"...}

is that possible? Another solution will be using template7 after ajax success like in 1.6.5 that worked fine but in v.2 it is not working the same way...

what is the alternative code for doing this that in 1.6.5 worked just fine to add content to a template with handleblars in the following page after ajax complete and success?

This worked in 1.6.5 (how to do it in v.2?) what is the equivalent method for this in v.2?

var template = $ $ ( '#template-name' ).html();
var compiledTemplate = Template7.compile ( template ) ;
var html = compiledTemplate({response});
$ $( " #div-element " ).html(compiledTemplate( response) );

I need to retrieve a large object after ajax response and put the content in the following page... it is a component page and inside the < template > tags I have my handlebars.

thanks for your help!

[nolimits4web]

Fixed in latest beta

[rapgithub]

thanks!

[caique0202]

Hi

Any solution for this?