I find the function $.mobile.navigate.history.closest available, but cannot find how to use it. Is there any documentation?
I am looking for such a solution:
pages are all [data-role=page],
in which some (but not all) are root pages [data-my-role=root]
as navigating through many pages, a click on a button will go to the last root page.
$.mobile.navigate.history.closest(some_criteria) seems good for finding this last root page, but I don't know the syntax of some_criteria
$.mobile.navigate.history.closest searches for an entry either by id or url. You can create a custom function to loop through history entries $.mobile.navigate.history.stack and look for specific data.
Note that if you want to alter navigation and to determine navigation direction, you need to use pagecontainerbeforechange event - only when it returns string not object.
The below code loops (in reverse) through history entries and checks whether that entry has data-my-root="true" - .data("my-root"). This custom data is added to root pages.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string" && data.options.direction == "back") {
var i, active = $.mobile.navigate.history.activeIndex;
/* loop through history entries in reversed order */
for (i = active; i >= 0; i--) {
/* to avoid errors, "i" shouldn't equal 0
history entry shouldn't be current page */
if (i != 0 && $($.mobile.navigate.history.stack[i].hash).data("my-root") && !$($.mobile.navigate.history.stack[i].hash).hasClass("ui-page-active")) {
/* alter page */
data.toPage = $.mobile.navigate.history.stack[i].url;
/* optional */
data.options.transition = "flip";
break;
/* means first page is reached - there's no hash for first page
move to first page */
} else if (i === 0) {
data.toPage = $.mobile.navigate.history.stack[0].url;
data.options.transition = "flow";
}
}
}
});
Demo
Related
Normally a user interacts with MyApp, that is, first scrolls, and then select an employee in a scrollview. A new feature is 'deeplinking' from another application, and then the sequence is based on the id in the given URL, that is programmatically select the employee and then scroll to it.
I noticed a difference in the behaviour of the following situations/workflows.
1) user scrolls and select in a employee, the details are shown, then alter the id in the URL to view another employee, the listview select and scrolls down automatically.
2) After loading the app, and copy paste a url with an employee id and date, the employee in the listview is selected (selectObject), but there is no automatic scroll action.
So, we have a own routine, called scrollToSelection, but also an deprecated message.
I have a state (loading_state) with a representRoute and a enterStateByRoute function.
representRoute: 'employee/:id/:date',
enterStateByRoute: function(context){
if ( this.get('loadingState').get('requiredDataLoaded') == YES ){
this.get('statechart').sendEvent('showEmployee', context.get('params'));
}
},
And in the next state (main_state) the called showEmployee function.
showEmployee: function(routeParams){
if (! this.isCurrentState()){
return;
}
if ( routeParams.hasOwnProperty('id') ) {
var id = routeParams.id;
var item = MyApp.store.find(MyApp.Employee, id);
if (! SC.none(item) && (item.get('status') & SC.Record.READY) ){
MyApp.employeeController.selectObject(item);
MyApp.employeeController.scrollToSelection();
}
},
And in the employeeController
scrollToSelection: function(){
this.invokeLast('realScrollToSelection');
},
realScrollToSelection: function(){
return;
var viewItems = $('.employeeListView').view();
var selectedItem = this.get('selection').firstObject();
if (viewItems.length > 0 && ! SC.none(selectedItem)){
var viewItem = viewItems[0];
var targetView = viewItem.itemViewForContentObject(selectedItem);
viewItem.scrollToItemView(targetView);
}
}.observes('status', 'length'),
Question: Is it possible to get the second workflow (deeplinking) working the same way as it is working in workflow 1 (user is altering the id in the url? So no need for a own routine at all.
I saw several a postings with suggestions, of making it a firstresponder?, use SC.ViewFor?, etc etc. But I wonder what is the correct/simple/short solution. Thanks in advance.
employeeScrollView
..
contentView: SC.ListView
contentBinding: 'MyApp.employeeController.arrangedObjects'
selectionBinding: 'MyApp.employeeController.selection'
How to apply the scrollToIndex correct? I got now a message 'not a function'. In the main_state.js/showEmployee(routeParams)
var id = routeParams.id
var item = App.store.find(App.Employee.id)
var contentIndex = App.employeeController.indexOf(item);
App.employeeController.selectObject(item)
App.employeeController.scrollToIndex(contentIndex)
This did the trick:
var view = App.calendarOverviewPage.getPath('calendarOverviewMainPane.calendarOverviewSplitView.leftView.employeeScrollView.contentView');
view.scrollToContentIndex(contentIndex);
Here's my pagination/infinite scrolling scenario:
Load the initial N with startAt().limit(N).once('value'). Populate a list items.
On scroll, load the next N. (I pass a priority to startAt() but that's tangential.)
When a new item is added, I'd like to pop it to the top of items.
If I use a .onChildAdded listener for step 3, it finds all the items including those I've already pulled in thus creating duplicates. Is there a better way?
Another method would be to use the .onChildAdded listener for the initial N in step 1 instead of .once, but when the initial N items come in I do items.add(item) to sort one after the other as they are already in order, but with the new one that comes in after the fact I need to somehow know it's unique so I can do items.insert(0, item) to force it to the top of the list. I'm not sure how to set this up, or if I'm off the mark here.
EDIT: Still in flux, see: https://groups.google.com/forum/#!topic/firebase-talk/GyYF7hfmlEM
Here's a working solution I came up with:
class FeedViewModel extends Observable {
int pageSize = 20;
#observable bool reloadingContent = false;
#observable bool reachedEnd = false;
var snapshotPriority = null;
bool isFirstRun = true;
FeedViewModel(this.app) {
loadItemsByPage();
}
/**
* Load more items pageSize at a time.
*/
loadItemsByPage() {
reloadingContent = true;
var itemsRef = f.child('/items_by_community/' + app.community.alias)
.startAt(priority: (snapshotPriority == null) ? null : snapshotPriority).limit(pageSize+1);
int count = 0;
// Get the list of items, and listen for new ones.
itemsRef.once('value').then((snapshot) {
snapshot.forEach((itemSnapshot) {
count++;
// Don't process the extra item we tacked onto pageSize in the limit() above.
print("count: $count, pageSize: $pageSize");
// Track the snapshot's priority so we can paginate from the last one.
snapshotPriority = itemSnapshot.getPriority();
if (count > pageSize) return;
// Insert each new item into the list.
// TODO: This seems weird. I do it so I can separate out the method for adding to the list.
items.add(toObservable(processItem(itemSnapshot)));
// If this is the first item loaded, start listening for new items.
// By using the item's priority, we can listen only to newer items.
if (isFirstRun == true) {
listenForNewItems(snapshotPriority);
isFirstRun = false;
}
});
// If we received less than we tried to load, we've reached the end.
if (count <= pageSize) reachedEnd = true;
reloadingContent = false;
});
// When an item changes, let's update it.
// TODO: Does pagination mean we have multiple listeners for each page? Revisit.
itemsRef.onChildChanged.listen((e) {
Map currentData = items.firstWhere((i) => i['id'] == e.snapshot.name);
Map newData = e.snapshot.val();
newData.forEach((k, v) {
if (k == "createdDate" || k == "updatedDate") v = DateTime.parse(v);
if (k == "star_count") v = (v != null) ? v : 0;
if (k == "like_count") v = (v != null) ? v : 0;
currentData[k] = v;
});
});
}
listenForNewItems(endAtPriority) {
// If this is the first item loaded, start listening for new items.
var itemsRef = f.child('/items').endAt(priority: endAtPriority);
itemsRef.onChildAdded.listen((e) {
print(e.snapshot.getPriority());
print(endAtPriority);
if (e.snapshot.getPriority() != endAtPriority) {
print(e.snapshot.val());
// Insert new items at the top of the list.
items.insert(0, toObservable(processItem(e.snapshot)));
}
});
}
void paginate() {
if (reloadingContent == false && reachedEnd == false) loadItemsByPage();
}
}
Load the initial N with startAt().limit(N).once('value'). Populate a list items.
On the first run, note the first item's priority, then start an onChildAdded listener that has an endAt() with that priority. This means it'll only listen to stuff from there and above.
In that listener, ignore the first event which is the topmost item we already have, and for everything else, add that to the top of the list.
Of course, on scroll, load the next N.
EDIT: Updated w/ some fixes, and including the listener for changes.
As of now (Dojo 1.9.2) I haven't been able to find a Dojo autocomplete widget that would satisfy all of the following (typical) requirements:
Only executes a query to the server when a predefined number of characters have been entered (without this, big datasets should not be queried)
Does not require a full REST service on the server, only a URL which can be parametrized with a search term and simply returns JSON objects containing an ID and a label to display (so the data-query to the database can be limited just to the required data fields, not loading full data-entities and use only one field thereafter)
Has a configurable time-delay between the key-releases and the start of the server-query (without this excessive number of queries are fired against the server)
Capable of recognizing when there is no need for a new server-query (since the previously executed query is more generic than the current one would be).
Dropdown-stlye (has GUI elements indicating that this is a selector field)
I have created a draft solution (see below), please advise if you have a simpler, better solution to the above requirements with Dojo > 1.9.
The AutoComplete widget as a Dojo AMD module (placed into /gefc/dijit/AutoComplete.js according to AMD rules):
//
// AutoComplete style widget which works together with an ItemFileReadStore
//
// It will re-query the server whenever necessary.
//
define([
"dojo/_base/declare",
"dijit/form/FilteringSelect"
],
function(declare, _FilteringSelect) {
return declare(
[_FilteringSelect], {
// minimum number of input characters to trigger search
minKeyCount: 2,
// the term for which we have queried the server for the last time
lastServerQueryTerm: null,
// The query URL which will be set on the store when a server query
// is needed
queryURL: null,
//------------------------------------------------------------------------
postCreate: function() {
this.inherited(arguments);
// Setting defaults
if (this.searchDelay == null)
this.searchDelay = 500;
if (this.searchAttr == null)
this.searchAttr = "label";
if (this.autoComplete == null)
this.autoComplete = true;
if (this.minKeyCount == null)
this.minKeyCount = 2;
},
escapeRegExp: function (str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
},
replaceAll: function (find, replace, str) {
return str.replace(new RegExp(this.escapeRegExp(find), 'g'), replace);
},
startsWith: function (longStr, shortStr) {
return (longStr.match("^" + shortStr) == shortStr)
},
// override search method, count the input length
_startSearch: function (/*String*/ key) {
// If there is not enough text entered, we won't start querying
if (!key || key.length < this.minKeyCount) {
this.closeDropDown();
return;
}
// Deciding if the server needs to be queried
var serverQueryNeeded = false;
if (this.lastServerQueryTerm == null)
serverQueryNeeded = true;
else if (!this.startsWith(key, this.lastServerQueryTerm)) {
// the key does not start with the server queryterm
serverQueryNeeded = true;
}
if (serverQueryNeeded) {
// Creating a query url templated with the autocomplete term
var url = this.replaceAll('${autoCompleteTerm}', key, this.queryURL);
this.store.url = url
// We need to close the store in order to allow the FilteringSelect
// to re-open it with the new query term
this.store.close();
this.lastServerQueryTerm = key;
}
// Calling the super start search
this.inherited(arguments);
}
}
);
});
Notes:
I included some string functions to make it standalone, these should go to their proper places in your JS library.
The JavaScript embedded into the page which uses teh AutoComplete widget:
require([
"dojo/ready",
"dojo/data/ItemFileReadStore",
"gefc/dijit/AutoComplete",
"dojo/parser"
],
function(ready, ItemFileReadStore, AutoComplete) {
ready(function() {
// The initially displayed data (current value, possibly null)
// This makes it possible that the widget does not fire a query against
// the server immediately after initialization for getting a label for
// its current value
var dt = null;
<g:if test="${tenantInstance.technicalContact != null}">
dt = {identifier:"id", items:[
{id: "${tenantInstance.technicalContact.id}",
label:"${tenantInstance.technicalContact.name}"
}
]};
</g:if>
// If there is no current value, this will have no data
var partnerStore = new ItemFileReadStore(
{ data: dt,
urlPreventCache: true,
clearOnClose: true
}
);
var partnerSelect = new AutoComplete({
id: "technicalContactAC",
name: "technicalContact.id",
value: "${tenantInstance?.technicalContact?.id}",
displayValue: "${tenantInstance?.technicalContact?.name}",
queryURL: '<g:createLink controller="partner"
action="listForAutoComplete"
absolute="true"/>?term=\$\{autoCompleteTerm\}',
store: partnerStore,
searchAttr: "label",
autoComplete: true
},
"technicalContactAC"
);
})
})
Notes:
This is not standalone JavaScript, but generated with Grails on the server side, thus you see <g:if... and other server-side markup in the code). Replace those sections with your own markup.
<g:createLink will result in something like this after server-side page generation: /Limes/partner/listForAutoComplete?term=${autoCompleteTerm}
As of dojo 1.9, I would start by recommending that you replace your ItemFileReadStore by a store from the dojo/store package.
Then, I think dijit/form/FilteringSelect already has the features you need.
Given your requirement to avoid a server round-trip at the initial page startup, I would setup 2 different stores :
a dojo/store/Memory that would handle your initial data.
a dojo/store/JsonRest that queries your controller on subsequent requests.
Then, to avoid querying the server at each keystroke, set the FilteringSelect's intermediateChanges property to false, and implement your logic in the onChange extension point.
For the requirement of triggering the server call after a delay, implement that in the onChange as well. In the following example I did a simple setTimeout, but you should consider writing a better debounce method. See this blog post and the utility functions of dgrid.
I would do this in your GSP page :
require(["dojo/store/Memory", "dojo/store/JsonRest", "dijit/form/FilteringSelect", "dojo/_base/lang"],
function(Memory, JsonRest, FilteringSelect, lang) {
var initialPartnerStore = undefined;
<g:if test="${tenantInstance.technicalContact != null}">
dt = {identifier:"id", items:[
{id: "${tenantInstance.technicalContact.id}",
label:"${tenantInstance.technicalContact.name}"
}
]};
initialPartnerStore = new Memory({
data : dt
});
</g:if>
var partnerStore = new JsonRest({
target : '<g:createLink controller="partner" action="listForAutoComplete" absolute="true"/>',
});
var queryDelay = 500;
var select = new FilteringSelect({
id: "technicalContactAC",
name: "technicalContact.id",
value: "${tenantInstance?.technicalContact?.id}",
displayValue: "${tenantInstance?.technicalContact?.name}",
store: initialPartnerStore ? initialPartnerStore : partnerStore,
query : { term : ${autoCompleteTerm} },
searchAttr: "label",
autoComplete: true,
intermediateChanges : false,
onChange : function(newValue) {
// Change to the JsonRest store to query the server
if (this.store !== partnerStore) {
this.set("store", partnerStore);
}
// Only query after your desired delay
setTimeout(lang.hitch(this, function(){
this.set('query', { term : newValue }
}), queryDelay);
}
}).startup();
});
This code is untested, but you get the idea...
I am using single page AJAX loading of jQMobile. Each page is its own file.
I dynamically create a HOME button on my pages when I need to. Today I just use an <A> tag pointing back to "index.html". Is there any way I can check my web app jQueryMobile history to find the first time in history where my index.html page was loaded and call a window.history.back(-##); to the page instead of just adding to the history and navigation.
The code will be such that if there isn't a index.html in the history, I will just window.location.href to the page.
function
GoHome()
{
/* This is a function I don't know even exists, but it would find the first occurrence of index.html */
var togo = $mobile.urlHistory.find( 'index.html' )
var toback = $mobile.urlHistory.length -1 - togo;
if ( togo >= 0 )
window.history.back( -1 * toback )
else
$.mobile.changePage( '/index.html' )
}
If the history was index.html => profile.html => photos.html
The magic function of $.mobile.urlHistory.find('index.html') would return 0, the history length would be 3, so my calculation would be to window.history.back( -2 ) to get back to the index.html page. if that find function returned -1 then it wasn't found and I would just do a changepage call.
Thanks
/Andy
After reading and reading and reading and not really sure what I was reading anymore, I wrote this function. Not sure its correct or the best solution or even if it can be condensed down.
using this to call
console.log( 'FindHome: ' + FindHome( ["", 'index.html'] ) );
It will search though from the first entry to the current index in the jQueryMobile urlHistory.stack and see if it will find an index page or not. From there I can decide what to do if I want to load a new page or go back -xx to the one already in history. This way the history will be somewhat clean.
function
FindHome( _home )
{
var stk = $.mobile.urlHistory.stack;
var ai = $.mobile.urlHistory.activeIndex;
for ( var idx=0; idx <= ai; idx++ )
{
var obj = $.mobile.path.parseUrl( $.mobile.urlHistory.stack[idx].url );
if(typeof _home == "string")
{
if ( _home == obj.filename )
return( idx - ai );
}
else
{
for(var x in _home)
{
if ( _home[x] == obj.filename )
return( idx - ai );
}
}
}
return ( 0 );
}
I am trying to do a query everytime the user changes a page in a phonegap app. I am new to Phonegap/JQuery Mobile, but don't understand what is going on.
When I click a button, the pagebeforechange is getting called twice.
First time it works correctly. Next call, it does not run the dbshell.transaction, and no error is shown. So, if I click the overview page first, it works, but the other page does not. If I click the other page first, the overview page does not work. In both cases, re-visiting the same page does not re-do the query.
What's going on here? It must be something incorrect with the way I am calling dbshell?
//Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
alert("pagebeforechange");
// We only want to handle changePage() calls where the caller is
// asking us to load a page by URL.
if ( typeof data.toPage === "string" ) {
// We are being asked to load a page by URL, but we only
// want to handle URLs that request the data for a specific
// category.
var u = $.mobile.path.parseUrl( data.toPage ),
reOverviewPage = /^#overviewPage/,
reViewByType = /^#viewByType/,
pageUrl=data.toPage;
var params = parseParams(pageUrl.substr(pageUrl.lastIndexOf("?") + 1));
if ( u.hash.search(reOverviewPage) !== -1 ) {
alert("overview");
dbShell.transaction(function(tx) {
alert("doing query");
tx.executeSql("select _id, description from area where _id=?",[params['id']],renderOverview,dbErrorHandler);
},dbErrorHandler);
} else if (u.hash.search(reViewByType) !== -1 ) {
alert("viewByType");
dbShell.transaction(function(tx) {
try
{
alert("!");
tx.executeSql("select trip.* from trip, trip_type, trip_type_lookup where trip_type.trip_id = trip._id and trip_type_lookup._id = trip_type.trip_type_lookup_id and lower(trip_type_lookup.type_name) = ?",[params['type']],dbErrorHandler, renderViewByType);
}
catch(e)
{
alert(e.message);
}
},dbErrorHandler);
}
}
});