For those of you who haven't checked it out yet, the IUI is a great library created by Joe Hewitt (the same guy who brought us Firebug) for creating iPhone-like web applications. Overall, I love how easy it is to create screens, transition between screens, submit forms via AJAX and much more. However, while working on my first iPhone-targeted web project, I came across an issue.
There a few special hrefs that can be used to launch iPhone functionality such as the Google Maps application (using an href that begins with "http://maps.google.com") or prompting the user with a dialog box that allows them to dial the linked phone number (using an href that begins with "tel:"). Since the IUI intercepts the click event on links and prevents their default behavior, it ends up overriding this functionality.
While I was searching the web for a workaround, I found a few sites that said that the IUI code had to be modified in order to make these special hrefs work, but they didn't say exactly how. So, here's my solution:
For all links that launch iPhone functionality that you don't want the IUI to override, assign them a type of "iphone" like this:
<a href="tel:9043430030" type="iphone">Click to dial the number</a>
Then modify iui.js. I'm showing the whole block of code, so you can see the changes in context, but the only changes necessary are to lines 174 and 175. I'm using version 0.13 in the example below, so your line numbers may be different depending on the IUI version.
addEventListener("click", function(event)
{
var link = findParent(event.target, "a");
if (link)
{
function unselect() { link.removeAttribute("selected"); }
if (link.href && link.hash && link.hash != "#")
{
link.setAttribute("selected", "true");
iui.showPage($(link.hash.substr(1)));
setTimeout(unselect, 500);
}
else if (link == $("backButton"))
history.back();
else if (link.getAttribute("type") == "submit")
submitForm(findParent(link, "form"));
else if (link.getAttribute("type") == "cancel")
cancelDialog(findParent(link, "form"));
else if (link.getAttribute("type") == "iphone")
return;
else if (link.target == "_replace")
{
link.setAttribute("selected", "progress");
iui.showPageByHref(link.href, null, null, link, unselect);
}
else if (!link.target)
{
link.setAttribute("selected", "progress");
iui.showPageByHref(link.href, null, null, null, unselect);
}
else
return;
event.preventDefault();
}
}, true);
Share This
