[SOLVED] Requesting content pages from web services

Hello

Which is the best router option to link pages whose content is requested through ajax request?

I’ll get the page content through an url like this: http://domain.com?id=10, where the id param is the content identifier. This service will return the html content the page must show.

Thanks

Yo can do something like this:

  {
    path: '/aboutparams/:userName',
    componentUrl: './pages/about-params.html',
    name: 'about-param',
    on: {
      pageInit: function (e, page) {
        // do something when page initialized
        var id = page.route.params.userName
        app.request.json('https://jsonplaceholder.typicode.com/posts/' + this.id, function (res){
          console.log(res)
          // your magic code
        })
      },
    }
  }
1 Like

ok, I’ll try thanks!

Ok, in routes.js I have type the next code:

{
    path: '/articulo/:articleId',
    componentUrl: './pages/articulo.html',
    on: {
        pageInit: function (e, page) {    
            var id = page.route.params.articleId;
            alert("id: " + id);
        },
    }
}

And I have this link in my app:

<a href="/articulo/32/" class="item-content item-link panel-close">
     <div class="item-inner">
             <div class="item-title">Venue</div>
     </div>
</a>

And this is my articulo.html code:

<div class="page" data-name="articulo">
  <div class="navbar">
     <div class="navbar-inner sliding">
        <div class="left">
           <a href="#" class="link back">
            <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
           </a>
        </div>
        <div class="title">Articulo</div>
  </div>
</div>

When I click the link nothing happens.

If I inspect the XHR requests I can see the one corresponding to articulo.html but in my app the page articulo.html is not shown. The page doesn’t changed.

I don’t know if this is important, but after the first click, no more request happens if I click again. I have to refresh to make the request happen.

May I have to do something else?

Thanks!

can you share your "articulo.html " full code, plz

I have edited my post with this code

ok, so if this is your full articulo.html code;

<div class="page" data-name="articulo">
  <div class="navbar">
     <div class="navbar-inner sliding">
        <div class="left">
           <a href="#" class="link back">
            <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
           </a>
        </div>
        <div class="title">Articulo</div>
  </div>
</div>

try wrapping the html whith <template></template> tag, since now its a component,

<template>
<div class="page" data-name="articulo">
  <div class="navbar">
     <div class="navbar-inner sliding">
        <div class="left">
           <a href="#" class="link back">
            <i class="icon icon-back"></i>
              <span class="ios-only">Back</span>
           </a>
        </div>
        <div class="title">Articulo</div>
  </div>
</div>
</template>
1 Like

Yes! Now that is working.

Thanks!