iUI - modify Back button target and behavior

[David Ethell]

I searched the list for a while to see if anyone already has a
solution to my problem, but I didn't find one.

I'd like to override the back button behavior in certain situations.
Instead of going back to the previous page I'd like to skip back to a
specific page. I've been able to add some attributes to the tag to
provide an override to the behavior such that if an override is in
place it will return to that specific page using iui.showPageById.
This works well as far as getting the desired page to load, but the
browser history is all messed up now so that clicking Back again from
the newly loaded page just goes back to where I started at the sub
page rather than to the parent of the page I went back to.

iui is splicing its own pageHistory so that it will be correct if you
go back to a page several places back in the history, but of course
the javascript history object still has the history that I want to
drop off.

Any ideas? I could of course just use innerhtml and replace the
contents of my present pages so that they bypass the iui paging
mechanism altogether and that's likely what I'll end up doing, but I
was hoping for something a little simpler using the main iui paging
functions.

Thanks,
David

[Spencer Holman]

[asimrafi]

1. Place these variables in starting of iui.js file
var cancelButtonHTML = new Array();
var cancelButtonHref = new Array();
var cancelButtonType = new Array();
var toolbarButtonHTML = new Array();
var toolbarButtonHref = new Array();
var toolbarButtonType = new Array();

2. Place this code in last of function updatePage(page, frompage)

// @@ Added on 12/5 by asim - replace Back button
var cancelButton = $("cancelButton");
if (cancelButton)
{
if (page.getAttribute("cancelButtonText") ||
page.getAttribute("cancelButtonHref") ||
page.getAttribute("cancelButtonType"))
{
cancelButton.style.display = "inline";
if (backButton)
backButton.style.display = "none";
}
else
{
cancelButton.style.display = "none";
}

var len = cancelButtonHTML.length;
if (page.getAttribute("cancelButtonText"))
{
cancelButtonHTML.push(cancelButtonHTML[len-1] == null ?
cancelButton.innerHTML : cancelButtonHTML[len-1]);
cancelButton.innerHTML = page.getAttribute("cancelButtonText");
}
else if (cancelButtonHTML[len-1])
{
cancelButton.innerHTML = cancelButtonHTML.pop();
}

len = cancelButtonHref.length;
if (page.getAttribute("cancelButtonHref"))
{
cancelButtonHref.push(cancelButtonHref[len-1] == null ?
cancelButton.getAttribute("href") : cancelButtonHref[len-1]);
cancelButton.setAttribute("href",
page.getAttribute("cancelButtonHref"));
}
else if (cancelButtonHref[len-1])
{
cancelButton.setAttribute("href", cancelButtonHref.pop());
}

len = cancelButtonType.length;
if (page.getAttribute("cancelButtonType"))
{
cancelButtonType.push(cancelButtonType[len-1] == null ?
cancelButton.getAttribute("type") : cancelButtonType[len-1]);
cancelButton.setAttribute("type",
page.getAttribute("cancelButtonType"));
}
else if (cancelButtonType[len-1])
{
cancelButton.setAttribute("type", cancelButtonType.pop());
}
}
// *******

// @@ Added on 8/1 by gh - change ToolBar button
var toolbarButton = $("toolbarButton");
if (toolbarButton)
{
toolbarButton.className = 'button';
if (!page.getAttribute("hideToolbarButton"))
toolbarButton.style.display = "inline";
else
toolbarButton.style.display = "none";

if (page.getAttribute("toolbarButtonText") ||
page.getAttribute("toolbarButtonHref") ||
page.getAttribute("toolbarButtonType"))
{
toolbarButton.className = 'button blueButton';
}

var len = toolbarButtonHTML.length;
if (page.getAttribute("toolbarButtonText"))
{
toolbarButtonHTML.push(toolbarButtonHTML[len-1] == null ?
toolbarButton.innerHTML : toolbarButtonHTML[len-1]);
toolbarButton.innerHTML = page.getAttribute("toolbarButtonText");
}
else if (toolbarButtonHTML[len-1])
{
toolbarButton.innerHTML = toolbarButtonHTML.pop();
}

len = toolbarButtonHref.length;
if (page.getAttribute("toolbarButtonHref"))
{
toolbarButtonHref.push(toolbarButtonHref[len-1] == null ?
toolbarButton.getAttribute("href") : toolbarButtonHref[len-1]);
toolbarButton.setAttribute("href",
page.getAttribute("toolbarButtonHref"));
}
else if (toolbarButtonHref[len-1])
{
toolbarButton.setAttribute("href", toolbarButtonHref.pop());
}

len = toolbarButtonType.length;
if (page.getAttribute("toolbarButtonType"))
{
toolbarButtonType.push(toolbarButtonType[len-1] == null ?
toolbarButton.getAttribute("type") : toolbarButtonType[len-1]);
toolbarButton.setAttribute("type",
page.getAttribute("toolbarButtonType"));
}
else if (toolbarButtonType[len-1])
{
toolbarButton.setAttribute("type", toolbarButtonType.pop());
}
}
// *******

3. Now you change the Cancel/Back button (left one) as well as Toolbar
button (right one). Just use the following in your <ul> tags

<ul id="your_id" title="your_title"
cancelButtonText="Cancel"
cancelButtonHref="javascript:{window.iui.showPageById('home');}"
toolbarButtonText="Confirm"
toolbarButtonHref="javascript:
{window.iui.showPageByHref('mypage.html');}">

you can also hide toolbar button by setting hideToolbarButton="true".

Hope this will help

[David Ethell]

This is great. I just got around to implementing this and it works
well. One thing, maybe you didn't mention it, but I had to update the
"click" event listener as follows:

else if (!link.target)
{
if ( link.href.indexOf('javascript') >= 0 ) {
eval(link.href);
}
else {
link.setAttribute("selected", "progress");
iui.showPageByHref(link.href, null, null, null,
unselect);
}
}

Without that change it was catching that there was no target attribute
and it was trying to call showPageByHref. Did you happen to add
anything to your code to help it eval the javascript in the
cancelbuttonhref? Interestingly, FireFox worked with no modifications,
but MobileSafari did not.

Thanks so much for this code. This solves a major headache for me with
needing to step back in history to a certain page.

David

[tech...@gmail.com]

Does this code still work properly? I tried applying it to an app I
was using, with no success; I then tried making the changes on a
fresh iUI package, to which there was still no change in my back
button text or URL.