# Reload doesn't refresh data

**URL:** <https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575>\
**Category:** How-to Discussions\
**Created:** [October 7, 2016, 4:23pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575 "2016-10-07T16:23:49Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [October 7, 2016, 4:23pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/1 "2016-10-07T16:23:49Z")

</div>

Hi guys, i’m passing data from my home.js to a page using this code

```auto
  function navigationdata(arg){
    router.push("homechild", {data: arg.data})
  }

```

everything works great but i would like to refresh these data in that page , so i imported the home.js in my page javascript like this

`var home = require("home.js")`  
and added home.js to the unoproj file like this `"home.js:Bundle"`. and tried to reload by calling `home.loaddata()` , the function run , but the data don’t refresh.

```auto
  function laoddata(){
    var publication = new Parse.Query("Publication")
      geoLocation.getLocation().then(function(location){
        publication.withinKilometers("location", new Parse.GeoPoint(location), 5000)
        publication.notEqualTo("user", Parse.User.current())
        publication.equalTo("status", "offres")
        publication.include("user")
        publication.descending("createdAt")
        publication.find().then(function(results){
          data.refreshAll(results,
            function(oldItem, newItem){return oldItem.id == newItem.id; },
            function(oldItem, newItem){newItem.time = newItem.get("createdAt");},
            function(newItem){return new dataForm(newItem.id, newItem.get("nom"), newItem.get("description"), newItem.get("categories"), newItem.get("prix"), newItem.get("dates"), newItem.get("ville"), newItem.get("photo"), newItem.get("user"), newItem.get("createdAt"), newItem.get("location"), location, newItem);}
          )
        })
      })

  }

```

refreshing data only works when i call this function in the home page , but not on other pages

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [October 8, 2016, 8:42am UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/2 "2016-10-08T08:42:51Z")

</div>

Struggling with this , anyone to help me know how refresh works in that case?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 9, 2016, 1:31pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/3 "2016-10-09T13:31:29Z")

</div>

Hi,

Sorry, I don’t understand your code or question.

Generally, only bound `Observable`'s will respond to updates. It is not clear from your code what is observable and not, and how this data is used whithin the `homechild` page, so hard to tell what’s wrong.

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [October 9, 2016, 1:44pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/4 "2016-10-09T13:44:27Z")

</div>

Hi anders , thank you for taking time to answer,  
what do you mean with bound Observable? the purpose here is sample , for example if i have a settings page and profil page separated, i change my name and picture in the settings page and want the profil page to update (reload with a function) with those values set , how can i achieve that?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 9, 2016, 1:55pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/5 "2016-10-09T13:55:00Z")

</div>

The general answer is: Keep an `Observable` somewhere (e.g. in a global module) with that information, write to that observable, data-bind that observable wherever you need the information.

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [October 9, 2016, 4:30pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/6 "2016-10-09T16:30:37Z")

</div>

i made a little reproduction of my case. can you help me understand with the code what to do please.

> **[issue](https://www.dropbox.com/sh/i83hn5qrefd0grw/AADxM8fi4LN5nQvCGLevfaIra?dl=0)**
>
> Shared with Dropbox

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 9, 2016, 6:05pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/7 "2016-10-09T18:05:31Z")

</div>

You are not calling `loadData` more than once. When returning to your `profilPage.ux` you need to call `loadData()` one more time to load the up to date data. You can for example do:

```
<Activated>
     <Callback Handler="{loadData}" />
</Activated>
```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [October 9, 2016, 6:10pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/8 "2016-10-09T18:10:18Z")

</div>

You are also partially updating non-observable fields on your objects. That won’t work.

Do this instead:

```
    query.find().then(function(results){
	    object.refreshAll(results.map(function(x) {
	        return new objectform(x.id, x.get("name"), x.get("class"))
	      }
	    ))
	  })
```

---

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [October 9, 2016, 7:54pm UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/9 "2016-10-09T19:54:50Z")

</div>

works great many thanks , but maybe there is a performance with activated callback when you call a function with geolocation , the app freeze a bit

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [August 8, 2017, 12:56am UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/10 "2017-08-08T00:56:06Z")

</div>

How do I reload/refresh the observable with new fetch data?  
Header.ux

```
<Panel ux:Name="Header" >
<JavaScript File="Header.js"/>
<Rectangle Fill="#F20655" Height="55">
	<DockPanel>
	<Image File="Assets/menu.png" Height="30" Width="30" Alignment="Left" Clicked="
   {openLeftPanel}" Margin="5,25,5,0"/>
	<Text Value="{headerTitle}" TextColor="White" Alignment="Center" FontSize="20" 
  Margin="5,25,5,0"/>
	<Image File="Assets/loading.png" Height="25" Width="25" Alignment="Right" Clicked="
  {refreshButton}" Margin="5,25,5,0"/>
</DockPanel>
</Rectangle>

</Panel>

```

Seperate Header.js File

```
function refreshButton()
{

console.log("Ref button clicked");

 }
 module.exports = {
 refreshButton:refreshButton
 };

```

Now I have 2 js file Activity.js and Contact.js.

Activity.js

```
var Observable = require('FuseJS/Observable');
var activityData = Observable();
var ExtURL = require("ExternalURL.js");
fetch(ExtURL.NSA_ACTIVITY, {
	method: 'GET',
	cache: 'default',
	headers: { "Content-type": "application/json"}
})
   .then(function(result) {
    if (result.status !== 200) {
    console.log("Something went wrong :(");
    return;}
   	return result.json();
 })
    
   .then(function(data) {
   	var keys = Object.keys(data).sort().reverse();
    keys.forEach(function(key, index) {
      if (index >= activityData.length) {
         var value = data[key];
         activityData.add(value);
     }
    })
   });
function goToDetailPage(args) {
   var selectedItem = args.data.description;
router.push("ActivityDetail", selectedItem);
  }
  module.exports = {
  activityData:activityData,
  goToDetailPage:goToDetailPage

 };

```

Contact.js is also similar as activity.js. Difference is the data only.

My question is how to invoke refreshButton() function on each .js file so it update when user tap refresh button.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 8, 2017, 7:16am UTC](https://forums.fusetools.com/t/reload-doesnt-refresh-data/1575/11 "2017-08-08T07:16:25Z")

</div>

Hi Tom,

please don’t hijack old threads, and post your own with complete, minimal reproductions.

In your global modules (`Activity.js` and `Contact.js`), you want to have a function that you can access from the outside:

```auto
var Observable = require("FuseJS/Observable");
var activityData = Observable();
function refresh() {
	// do things, such as fetch()
}
module.exports = {
	refresh: refresh,
	activityData: activityData
};

```

Then in your viewmodels (`Header.js`), you want to include that global module you need, and call the function:

```auto
var Activity = require("Activity");
function refreshButton() {
	Activity.refresh();
}
module.exports = {
	refreshButton: refreshButton,
	activityData: Activity.activityData
};

```

[This tutorial section](https://www.fusetools.com/docs/tutorial/splitting-up-components) explains how to implement and work with JS models.