Reload doesn't refresh data

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

  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.

  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

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

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.

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?

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.

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

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>

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"))
	      }
	    ))
	  })

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

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.

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:

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:

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

This tutorial section explains how to implement and work with JS models.