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 );
}
Related
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
I installed this cool demo http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/ on this website http://wedding.halocommunication.com
What I try to do, with no success, is to update url (like in this site wild.as) when a slide changes.
This demo use dragdealer plugin skidding.github.io/dragdealer
One of my experiment was to add this line at the end of this function, but generates errors
/**
* DragDealer plugin callback: update current value
*/
DragSlideshow.prototype._navigate = function( x, y ) {
// add class "current" to the current slide / remove that same class from the old current slide
classie.remove( this.slides[ this.current || 0 ], 'current' );
this.current = this.dd.getStep()[0] - 1;
classie.add( this.slides[ this.current ], 'current' );
window.location.href = 'http://test.com/' + this.slides.attr('data-content');
}
Anyone could help me with some hints?
Thank you
options.dataUrl = urlObj.href;
$.mobile.changePage( $page, options );
dataUrl contains the complete url with parameters
http://example.com/#sales?p=page
but the above code only updates the url with hash only, after the new page loads... the url changes to
http://example.com/#sales
and does not apply ?p=page.
Here is the complete function, check the last few lines....
function getSPList( urlObj, options ){
var pageName = urlObj.hash.replace( /.*p=/, "" ),
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
$.ajax({
url:"getSPList.php",
dataType: 'json',
data: {p: pageName},
success:function(result){
if ( result ) {
var $page = $( pageSelector ),
$header = $page.children( ":jqmData(role=header)" ),
$content = $page.children( ":jqmData(role=content)" ),
markup = "<ul data-role='listview' data-filter='true' data-filter-placeholder='Search Salesperson...'>";
for ( var i = 0; i < result.sp.length; i++ ) {
markup += "<li><a href='#addClient?p="+ result.sp[i].id +"' data-transition='slide'>" + result.sp[i].name + "</a></li>";
}
markup += "</ul>";
$content.html( markup );
$page.page();
$content.find( ":jqmData(role=listview)" ).listview();
options.dataUrl = urlObj.href;
options.changeHash = true;
$.mobile.changePage( $page, options );
}
}
});
return
}
I have experienced the same problem and here is what I've found as of version 1.3.2:
Inside $.mobile.changePage(toPage, options) options.dataUrl is passed through path.convertUrlToDataUrl() before being stored and used.
Inside path.convertUrlToDataUrl() everything before and including the '#' as well as everything after and including the '?' is stripped.
Further down inside of $.mobile.changePage() before the url is passed to $.mobile.navigate() I see this:
// rebuilding the hash here since we loose it earlier on
// TODO preserve the originally passed in path
if( !path.isPath( url ) && url.indexOf( "#" ) < 0 ) {
url = "#" + url;
}
So it seems to be a bug in jQm. For my app I'm adding this inside the bottom of the previously mentioned if statement:
var query_index = (settings.dataUrl || '').indexOf('?');
if (query_index > -1) {
url += settings.dataUrl.substring(query_index);
}
This solves the initial problem but I'm unsure about potential negative side effects or if there is a better workaround out there.
When having called .before on elements that are detached from the DOM, .end behaves differently than it does with attached elements:
var $div1 = $("div");
console.log($div1.after("foo").end()); // [document]
$div1.detach();
console.log($div1.after("foo").end()); // [<div></div>]
(Fiddle: http://jsfiddle.net/R2uc7/2/)
Apparently, .before causes different behaviour to .end depending on the node being attached or detached. I don't see the logic and I'm not sure what I can rely on.
Could someone enlighten me on the defined behaviour of .end combined with .before?
jQuery v1.7.2 uses pushStack to build the new DOM elements.
pushStack adds items to the jQuery object's stack (go figure!), and end pops the last one off, returning the rest of the stack (whatever remains).
jQuery v1.7.2 line #5860:
annotation mine
before: function() {
if ( this[0] && this[0].parentNode ) {
return this.domManip(arguments, false, function( elem ) {
this.parentNode.insertBefore( elem, this );
});
} else if ( arguments.length ) {
var set = jQuery.clean( arguments );
set.push.apply( set, this.toArray() );
return this.pushStack( set, "before", arguments ); //pushStack in use
}
}
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);
}
}
});