AJAX request to work in background while browsing the current page?

Is it possible to make Ajax request in background with Framework7 to work when still on that page so the loaded pages are faster to load with the first Ajax call and then when in that page I load the rest on background?

I am using tabs in my page and I have for instance:

overview / prices / offers

Overview it is the first call I need, then when in the page I need to load on background prices and offers to accelerate the loading but the problem the handlebars seems not to work with this proceeding… any way to handle this so when I click prices and offers the info is already there…

thanks for any tips!

Oh yes… Very possible… I developed a request intensive app with F7 recently… Works pretty well with components… sample!

<template>
   <div class="page">
        <div class="page-content">

                {{#if prices}}                  
                <div class="block">
                  ....<!--some-HTML-->
                </div>
                 {{else}}
                  ....<!--show preloader-->
                {{/if}}
        </div>
      </div>
</template>
<script>
    return {
    data: function () {
      return {
        prices: null,
      }
    },
    on: {
       pageInit: function(e, page) {

          var self = this;
          var app = self.$app;

              app.request({
                          url: 'something.php',
                          dataType: 'json',
                          method: 'GET',
                          cache: false,
                          crossDomain: true,
                          success: function (data) {
                              
                                   self.$setState({
                                         prices: data
                                      });
                                    //some-more-logic
                              }
                  });
      },
    }
  }
</script>
1 Like

I will check it works for me!!! thanks for the idea…

I think the magic to bring information missing to an already loaded page it will be using self.$setState, right?

:slight_smile:

Yes, $setState() is handy in updating the state of your data properties… once they are in the DOM, framework7 components are so powerful that they can be updated virtually as data changes, just like vue.js if you know it… reactive sort of… In my example above, price is a global property on my component, I can use it to control many things on my component… when you check in the data function(), it is already declared as null, so after my request is complete, I update it’s status using the this.$setState({ ....}), and even the in the dom, It is updated… You will need to prepare your html very well so that after the preloader, everything is beautiful… remember, var self = this; meaning you are accessing the global object on the component…

1 Like

Thanks for the useful tips! in my case I will be using tabs, the fist tab will be loaded first prior accessing the page, the others tabs must be loaded in background so when the user click the second or third tab the content is already there… I wonder now I must include a loader inside the tab so the user knows that data still loading for that tab if it is not completed… maybe something like you suggest above

{{#if prices}}                  
<div class="block">
....<!--some-HTML-->
</div>
{{else}}
....<!--show preloader-->
{{/if}}

but for each second and third tab content…
big thanks

Simple actually, let all your tabs be in the same template…

....etc.... F7 component parser looks at it as the same page... I can access every element in the dom,the ids... I have done exactly what you want some day....

Vague example but follow through

<template>
....
        <div id="tab-1" class="page-content tab tab-active"> <!-- tab1 -->
          <div class="block">
            ....
                
          <input type="text" id="something" value="{{something_data}}">
                                  
            ....

      </div>

      <div id="tab-2" class="page-content tab"><!-- Tab2 -->
            <div class="block">
            ....
            <strong class="text-color-black">MY PRICES MAYBE</strong>
              
              {{#if prices}}
                 <p><!-- Arrange Your HTML how you Like with how you wann have your prices shown --></p>
               {{else}}
               <p><!-- Preloader here --></p>
               {{#if}}
      </div>
  ...
</template>
<script>
  return {
      // Component Data
    data: function () {
      // Must return an object
      return {
          something_data: 'something_data',
          prices:null,
      }
    },
        on: {
       pageInit: function(e, page) {
          var self = this;
          var app = self.$app;

              app.request({
                  url: 'something.php',
                  dataType: 'json',
                  method: 'GET',
                  cache: false,
                  crossDomain: true,
                  success: function (data) {
                           self.$setState({
                                 prices: data
                              });
                            //some-more-logic
                      }
                });
      },
    }
  }
</script>
1 Like

Big thanks for all your ideas and samples!

Now I have to put them into work :slight_smile:
I guess they should work flawless! let you know if any …

I like these preloaders I will check if F7 has some support for similar ones:

https://materializecss.com/preloader.html

big thanks again!

1 Like

Framework 7 preloaders are the best man, you could use those too but I think these are even better…

Also, these progress bars look more material and native…than those…

1 Like

thanks :slight_smile: bravo!!! I did not see them there… thanks again…

what version of F7 are you using that has incorporated:

self.$setState

I tried not your sample and even if the data is loaded on pageInit it does not update the content …

I have installed version 3.1.5 of F7…

I found this for version 3.1.0 in my case it does not work… I do not know why… or only works in version 3.1.0 that does not make sense since I have 3.1.5 installed…

I found the issue I put the handlebars code outside the tabs and works but inside the tabs the content cannot be updated!!

curious!!! maybe a bug!

      {{#if offers}}

      yes offers

      {{else}}
      
      no offers

      {{/if}}

but this does not work!!! inside a tab

      <div class="tabs">

        {{#each tabs}}
...

      {{#if offers}}

      yes offers

      {{else}}
      
      no offers

      {{/if}}

 {{/each}}

It seems that self.$setState can only update the content not inside a tab… :frowning:

self.$setState({
                                 offers: data
                              });

any solution?

Bro, try to emulate this… Latest F7 (v3.5.1) works even better than the rest… No bug, its your code, something must be wrong…

<template>
 <div class="page">
  <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">Sample</div>
    </div>
  </div>
  <div class="toolbar tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Content 1</a>
      <a href="#tab-2" class="tab-link">Prices</a>
      <a href="#tab-3" class="tab-link">Content 3</a>
    </div>
  </div>
  <div class="tabs-animated-wrap">
    <div class="tabs">
      <div id="tab-1" class="page-content tab tab-active">
        <div class="block">
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
          
        </div>
      </div>
      <div id="tab-2" class="page-content tab">
        <div class="block">
          <p>Tab 2 content - Prices</p>

                      {{#if prices}}
                        <div class="list simple-list">
                          <ul>
                            {{#each prices}}
                            <li>Price - {{@index}}:  ${{this}}</li>
                            {{/each}}
                          </ul>
                        </div>
                      {{else}}
                        <div class="block block-strong text-align-center">
                          <div class="preloader"></div>
                        </div>
                      {{/if}}
        </div>
      </div>
      <div id="tab-3" class="page-content tab">
        <div class="block">
          <p>Tab 3 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
        </div>
      </div>
    </div>
  </div>
</div> 
</template>
<style>
  p {
    margin: 10px 0;
  }
</style>
<script>
  return {
    data: function () {
      return {
        prices: null,
      }
    },
    on: {
      pageInit: function(e, page) {
        var self = this;

        // Emulate Ajax request
        setTimeout(() => {
          self.$setState({
            prices: [10, 20, 30, 40, 50, 60, 70, 80, 90, 10],
          });
        }, 4000);
        
      },
    }
  }
</script>
1 Like

I did that!! yes something is wrong inside the tabs it is not working… outside the tabs yes

see this new topic I opened because it is not working on my side inside the tab

I will try to clean the whole page and put line by line to break the code and see why it is not working inside my tabs…

let you know…

Code I put up there runs well… try it… maybe you are missing something…

check this:

1 Like

Latest Framework7 v3.5.1 is here,

Also, kindly go through this short document on components… If you have some Vue.js experience, this is even way too easy then…but even without it, that guide should sort you out… Best of luck!

1 Like

Yes I am checking now let you know what is the problem…

I fix it… I think the main problem was that my tabs divisions were created also dynamically via handlebars and when I do that the content inside cannot be updated I guess I do not know why!

But if I use static blocks for the tabs divisions then the content is updated once loaded.
Thanks for all types of tips in this!
:+1: