.data("kendoMobileListView").refresh(); not working on view.. no update

[FitFan (Legacy Drophit Account)]

Calling a refresh(); does not work.


My code:

<!-- ============================================================================================ newsFeed -->
<div data-role="view" data-show="getNewsFeedData" data-title="myFitness" id="view-newsFeed">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="left" data-role="backbutton" class="nav-button" >Back</a>
<a data-align="right" data-role="button" class="nav-button" href="#view-addEvent">Add Event</a>
</div>

<div id="no-feed-content" style="display:none;">
<div class="km-navbar pullRefresh">No More Events | Pull to Refresh</div>
</div>

</header>
<div class="loginButtonWrapper">

<div id="showAllEventsButtonWrapper">
You are viewng Your Friends Events<br>
<a id="showAllEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="1">Show All Users</a>
</div>
<div id="showFriendEventsButtonWrapper" >
You are viewing All Users Events<br>
<a id="showFriendEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="0">Show Only Friends</a>
</div>
</div>

<ul id="newsFeed"></ul>

</div>

<!-- =================================================================================== newsFeed Template -->
<script id="newsFeed-template" type="text/x-kendo-template">

<div class="feed">

# if (type == '1') {# 
<img class="feed-user-image" src="http://gohhllc.com/fitfan/app/images/#= profile_image_url #
" alt="#= from_user #" />${feed_id}

<div class="feed-content">${from_user} # if (attendees != null && attendees.length >= 1) {
for (var i = 0; i < attendees.length; i++) { #
and ${attendees[i].name} # }
# are attending a # }
else {
if (from_user == 'You') {
# are attending a # }
else { #
is attending a #}
}
#  #= title #
class at #= loc #
on #= event_stamp # </div>
<div>
<img class="mini-icon news-feed-mini-icon" src="styles/icons/ClassICON.png"  />
</div>
#}#

# if (type == '2') {#
<img class="feed-user-image" src="http://gohhllc.com/fitfan/app/images/#= profile_image_url #
" alt="#= from_user #" />${feed_id}

<div class="feed-content">${from_user} # if (attendees != null && attendees.length >= 1) {
for (var i = 0; i < attendees.length; i++) { #
and ${attendees[i].name} # }
# are doing a # }
else {
if (from_user == 'You') {
# are doing a # }
else {
# is doing a #}
}
#  #= title #
routine at #= loc #
on #= event_stamp # </div>
<div>
<img class="mini-icon news-feed-mini-icon" src="styles/icons/RoutineICON.png"  />
</div>
#}#    

#if (user_id == localStorage.getItem("userID")) { #
<div id="newsID_${feed_id}" class="feed-join-wrapper">
<a data-role="button" class="feed_cancel_join_button"  data-rel="actionsheet" data-actionsheet-context="${event_id}|${feed_id}" href="\\#cancelActionSheet">CANCEL</a>
</div> #}#

#if (share == '1' && user_id != localStorage.getItem("userID")) { #
<div id="newsID_${feed_id}" class="feed-join-wrapper">
<a data-role="button" class="feed_cancel_join_button"  data-rel="actionsheet" data-actionsheet-context="${event_id}|${feed_id}" href="\\#joinActionSheet">JOIN</a>
</div> #}#


<ul data-role="actionsheet" id="joinActionSheet">
<li>
<a data-action="joinConfirm">Confirm Join</a>
</li>
</ul>

<ul data-role="actionsheet" id="cancelActionSheet">
<li>
<a data-action="cancelConfirm">Confirm Cancel</a>
</li>
</ul>

</div>
</script>

<!-- ===================================================================================== newsFeed script -->
<script>

function joinConfirm(e) {
//console.log(e.target);
//send join request
//post join
$.ajax({
url: endpoint + "app/api/join_event.php",
data: { userID: userID, event_id: e.context},
dataType: "jsonp",
type: "GET",
success: function (data) {
newsID = '#newsID_' + e.target;
console.log("<= joinEvent - " + newsID);

$(newsID).html("<div class=\"eventStatusUpdate\">You are Attending this event</div>");
//app.navigate("#view-myEvents");
}
});
}

function cancelConfirm(e) {
//console.log(e.context);
//send cancel request
//split the context var
values = e.context.split('|');
eventID = values[0];
newsID = values[1];

//post cancel
$.ajax({
url: endpoint + "app/api/cancel_event.php",
data: { userID: userID, event_id: eventID},
dataType: "jsonp",
type: "GET",
success: function (data) {
newsID = '#newsID_' + newsID;

$(newsID).html("<div class=\"eventStatusUpdate\">This Event is Now Cancelled</div>");
//app.navigate("#view-myEvents");
}
});
}

//define newsfeed data
var newsFeedDataSource = null;
                            

function getNewsFeedData() {
console.log("<= getNewsFeed =>");     
//check if we show news for all users (even non-friends)

if (localStorage.getItem("showAllEvents") == "1") {
showAllEvents = 1;
console.log("<= showing all events =>");
//show/hide buttons
$("#showFriendEventsButtonWrapper").show();
$("#showAllEventsButtonWrapper").hide();
}
else {
showAllEvents = 0;
console.log("<= showing only friend events =>");
//show/hide buttons
$("#showFriendEventsButtonWrapper").hide();
$("#showAllEventsButtonWrapper").show();
}

newsFeedDataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 2,
cache: false,

change: function (e) {
//if no more results turn off endlessscroll
if (e.items.length < e.sender._pageSize) {
//show pull to refresh header
$("#no-feed-content").show();

var list = $("#newsFeed").data("kendoMobileListView");
if (list && list._scrollerInstance) {
list._scrollerInstance.unbind('scroll');
}
}
else {
//hide pull to reresh header
$("#no-feed-content").hide();
}
},
transport: {
read: {
url: endpoint + "app/api/show_feed.php", // the remote service url
data: { userID: userID, showAllEvents: showAllEvents},
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
return {
userID: options.userID,
page: options.page,
rpp: options.pageSize,
showAllEvents: options.showAllEvents,
since_id: options.since_id, //additional parameters sent to the remote service
max_id: options.max_id //additional parameters sent to the remove service
};
}
},
schema: { // describe the result format
data: "results", // the data which the data source will be bound to is in the "results" field,
}

});
                            
$("#newsFeed").kendoMobileListView({
dataSource: newsFeedDataSource,
template: $("#newsFeed-template").text(),
pullToRefresh: true,
//addition parameters which will be passed to the DataSource's read method
pullParameters: function(item) { //pass first data item of the ListView
return {
max_id: item.max_id,
page: 1
};
},
endlessScroll: true,
//scrollThreshold: 60,
//addition parameters which will be passed to the DataSource's next method
endlessScrollParameters: function(firstNewsID, lastNewsID) {
if (lastNewsID) {
return {
since_id: lastNewsID.since_id
};
}
}
});
}

function showEventsSwitch(e) {
//get button vars
var data = e.button.data();

if (data.show == '1') {
console.log("<= all users button clicked");
localStorage.setItem("showAllEvents", 1);

//show/hide buttons
$("#showFriendEventsButtonWrapper").show();
$("#showAllEventsButtonWrapper").hide();
}

if (data.show == '0') {
console.log("<= only friend button clicked");
localStorage.setItem("showAllEvents", 0);

//show/hide buttons
$("#showFriendEventsButtonWrapper").hide();
$("#showAllEventsButtonWrapper").show();
}

//now refresh news feed
console.log("<= refreshing news feed =>");
newsFeedDataSource.read();
                            
console.log(newsFeedDataSource);
$("#newsFeed").data("kendoMobileListView").refresh();
//app.navigate("#view-Home"); 
} 

[Steve]

Hello Zachary,

We cannot say what is wrong from the provided code only. Can you specify how do you add more records to the list view? By default when you insert a record through the DataSource API, the list view bound to it will refresh automatically and new item will be displayed. We would appreciate if you isolate the problem in a small http://jsfiddle.net/ example, that way we would be able to examine your case and advice you further.

You might also consider asking for advice in StackOverflow or if you have commercial license for Kendo UI Mobile you can post to their forums, as they can provide an expert help on the matter.

Kind regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.

[FitFan (Legacy Drophit Account)]

Not really adding anything to the data set actually. But more calling the data set from a button here:

//----------------------------------------- 
<div id="showAllEventsButtonWrapper">
You are viewng Your Friends Events<br>
< a id="showAllEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="1">Show All Users</a>
< /div>
< div id="showFriendEventsButtonWrapper" >
You are viewing All Users Events<br>
< a id="showFriendEventsButton" class="k-button" data-click="showEventsSwitch" data-role="button" data-show="0">Show Only Friends</a>
< /div>
//-------------------------

This should call:

//---------------------------
   function showEventsSwitch(e) {
                           
              
    //get button vars
    var data = e.button.data();
   
    if (data.show == '1') {
     console.log("<= all users button clicked");
     localStorage.setItem("showAllEvents", 1);
   
     //show/hide buttons
     $("#showFriendEventsButtonWrapper").show();
     $("#showAllEventsButtonWrapper").hide();
    }
   
    if (data.show == '0') {
     console.log("<= only friend button clicked");
     localStorage.setItem("showAllEvents", 0);
   
     //show/hide buttons
     $("#showFriendEventsButtonWrapper").hide();
     $("#showAllEventsButtonWrapper").show();
    }
                           
    //now refresh news feed
    console.log("<= refreshing news feed =>");
    newsFeedDataSource.read();
    $("#newsFeed").data("kendoMobileListView").refresh();
    //app.navigate("#view-Home");
   }
//-----------------------

But it does not seem to do so, also i see something in there now from Telerick( a new event) looks like you guys ran it on your side to test.. Please advise..

Z

[Steve]

Hi Zachary,

We can't really grasp the idea behind the refresh you expect. We see that you're doing some operations with the localstorage, but how does this relate to the datasource? Since you're using a json transport for the newsFeedDataSource, we suspect there might be problem with the logic there. With that said can you test whether this works in a regular browser?

On a side note, invoking read method would read the data from the datasource and render the listview, so there is no need to invoke refresh after it.

Regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.

[FitFan (Legacy Drophit Account)]

I want to to refresh the view - ie re-post to the endpoint and get back new results, then see the view refresh with the new results. What happens instead, when this reload or refresh method is used with any view that may have pullToRefresh or endless scroll enabled, the data is not replaced. 

[Steve]

Hi Zachary,

Can you confirm that the problem only occurs when you have pullToRefresh or endless scroll enabled? In any case as previously advised, we would appreciate if you isolate the problem in a small http://jsfiddle.net/ example, that way we would be able to examine your case and advice you further.

Greetings,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Kendo UI Dojo.