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…
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…
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
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>
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…
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!
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!