DMXzone Cordova Builder Support Product Page


Pull-To-Refresh Not Refreshing or Terminating

Asked 11 Aug 2015 04:56:25
has this question
11 Aug 2015 04:56:25 Brad Lawryk posted:
I manage to get the Pull-to-Refresh working from the code in your 'Kitchen Sink' demo files. However it just keeps running the loading graphic. It doesn't refresh the page or terminate. Just goes on reloading forever.

So I assume that it is not actually refreshing the page. The pull seems to just activate the spinner. How do I set the pull to refresh the data and then terminate the spinner?


Replied 11 Aug 2015 08:52:44
11 Aug 2015 08:52:44 Teodor Kuduschiev replied:
Hello Brad,
Pull to refresh option integrated in the Framework 7 requires some events to be attached to it in order to reload the data-bindings data and then, when the data is loaded to remove the preloader.
I will try to setup a quick step-bys-step guide how to achieve that and will send it to you.
Replied 11 Aug 2015 09:32:35
11 Aug 2015 09:32:35 Teodor Kuduschiev replied:
So this is how to achieve this:

1. First you need to change your default .page-content div so it becomes:
<div class="page-content pull-to-refresh-content" data-ptr-distance="55">

Where the data-ptr-distance="55" is an additional attribute that allows to set custom pull to refresh trigger distance. By default (if not specified) it is 44px.

2. Add the following code just after the .page-content opening div:
<div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>

3. In order to get the code, that refreshes the Data Binding, as well as to place the required code on your app page do the following:
- In code view add some dummy anchor tag anywhere on the page: <a>dummy anchor</a>
- Click the dummy anchor and select Behaviors > Add New > DMXzone > Control HTML5 Data Bindings
- Select Action - Refresh Data and select your data source, then click OK
- This adds an onclick event in the anchor tag with some action inside and some code in the head tags of your page. Cut the action that is placed in the onclick event. It should be something like:

4. Open the my-app.js located in the Framework7 > js fodler of your site definition folder.
- Paste the following code, just after the myApp.init(); (line 13):
var ptrContent = $$('.pull-to-refresh-content');
ptrContent.on('refresh', function (e) {
	dmxDataBindingsAction('refresh','dataSourceName',{}) // THIS IS THE ACTION THAT YOU'VE JUST CUT FROM THE ONCLICK EVENT

- Save the my-app.js file

5. Go back to your app page and open the data bindings UI
- Open the data bindings Behaviors
- Select the update Event
- Select Add custom code
- Enter this: myApp.pullToRefreshDone() and click OK

You are done.

Replied 11 Aug 2015 14:44:31
11 Aug 2015 14:44:31 Brad Lawryk replied:
Much appreciated! I was so close, step 4 was where I was stuck. I'll give this a try this evening.
Replied 11 Aug 2015 15:37:17
11 Aug 2015 15:37:17 Brad Lawryk replied:
I am stuck on number 5 ..... What update event?
Replied 11 Aug 2015 15:48:54
11 Aug 2015 15:48:54 Teodor Kuduschiev replied:
Here it is:
Replied 12 Aug 2015 00:15:24
12 Aug 2015 00:15:24 Brad Lawryk replied:
That worked, thank you.

However you must be using a newer version that is not released yet as your screenshot looks nothing like what I have.
Replied 12 Aug 2015 08:46:05
12 Aug 2015 08:46:05 Teodor Kuduschiev replied:
Not sure what exactly do you mean by: " your screenshot looks nothing like what I have."
The UI of the extension has not been changed since months
Replied 12 Aug 2015 14:55:53
12 Aug 2015 14:55:53 Brad Lawryk replied:
Today's update of Data Bindings brought the UI to same as yours. Thanks ;-)

Loving this extension. Would love to see more tutorials on some of the other app specific features such as adding a home screen and app icons. Still can't get that to work no matter what I do. Same with preloader.

Reply to this topic