[SOLVED] Requesting content pages from web services


#1

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


#2

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
        })
      },
    }
  }

#3

ok, I’ll try thanks!


#4

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!


#5

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


#6

I have edited my post with this code


#7

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>

#8

Yes! Now that is working.

Thanks!