[SOLVED] Render Ajax data on same template page using Template7

Questions
1

I am using ajax request for data, then i want to render it on the same page where i had executed ajax request.

I am able to do it via keeping template on index then post template processing append it to some id or class but i want it to iterate on the same HTML template.

Is there any way or any example snippet to help?

2

$setState will be best way

3

@hongfu can you please provide a snippet because I am not able to understand clearly with your reply? Thank you.

4

@sjkushwaha21, in all honesty, there is a full page in docs on what you are trying to achieve… Read through the router component. If you have used vue.js before, especially the .vue single file components, it is way so very similar. The this.$setState() method is very similar to the way vue updates components.

This page here is probably one of those pages you do’t really wanna miss out in the whole documentation as it really will ease your life with f7. Thanks

5

Thank you @Max and @hongfu you both helped. :slight_smile: It worked properly.

6

@Max @nolimits4web @hongfu Can anyone of you suggest me on the following issue related to same.

I am trying to add another key node at the root of JSON response variable.
E.g.
HTML Template

{{#each catalogEntryView}}
        <div class="col-50 tablet-33">
          <div class="card demo-card-header-pic">
            <a href="/product-display/{{uniqueID}}/{{catalogEntryTypeCode}}" class="no-fastclick">
              <div valign="bottom" class="card-header text-align-center">
                <div class="img-container">
                  <img data-src="https://my13.digitalexperience.ibm.com/073f3882-34a2-4535-b2bc-b0471e2fedbb/dxdam/sit/media/images/products{{rewriteURL thumbnail}}?resize=200px:200px" class="lazy">
                </div>
              </div>
              <div class="card-content card-content-padding text-align-center">
                <p class="product-name text-color-black25">{{name}}</p>
                <p class="product-price text-color-customorange">{{price[1].currency}} {{price[1].value}}</p>
              </div>
            </a>
            <div class="card-footer">
              <a href="/product-display/{{uniqueID}}/{{catalogEntryTypeCode}}" class="link no-fastclick">
                <i class="material-icons text-color-customorange">add_shopping_cart</i>
              </a>
              <a class="link dynamic-sheet" href="#">
                <i class="material-icons text-color-customorange">favorite_border</i>
              </a>
            </div>
          </div>
        </div>
        {{/each}}

JSON response: (it is a demo json just to understand the scenario)

{
imgsrc: "https://xyz.com/img/"
catalogEntryView: {
{
name: 'sk',
id: '1',
imgName: 'xyz.jpg'
},
{
name: 'sr',
id: '2',
imgName: 'xyz.jpg'
}
}
}

I am passing the variable “catalogEntryView” for iteration in template but in between of each loop I need to access imgsrc node which I am not able to.

Any suggestions will be helpful.

Thank you.

7

{{…/imgsrc}}
can help you

8

Hi @hongfu,

Thank you for your response, but the suggestion you gave is working absolutely fine when I am rendering dynamic HTML template and append it to any ID or Class which I had already achieved.

But when I am rendering data on HTML page itself in that scenario it is not working because I am using $setState only to pass catalogEntryView node of JSON response not the parent one.