iPhone HTML 5 App Mode jQuery Undefined URL Link Error…

So I figured I would write a post about this because I could not find any information regarding this type of error except lots of confusion on multiple forums, hopefully this post will shed some light on the error and will help you fix yours :)

If you are developing HTML 5 Apps for mobile devices and are using jQuery you are most likely going to run in a few errors which you’re going to have to debug. In this case I am going to talk about an error inside Full Screen mode (App mode) for the iPhone which takes you to an “undefined URL” error page when clicking on a link…

image

When using using <a href> links in APP mode you have 2 issues:

  • App Mode Minimizes and opens up Safari to open the selected page
  • You get an undefined URL Page Error

If you’re having problems like the first error description (closing app mode and opening safari when clicking page links) you are going to want to use some jquery to handle the loading of the link internally, this can be done with the following line of code:

[cc lang=jquery]
$( document ).on(“click”, “a”, function( event ){

event.preventDefault(); location.href = $( event.target ).attr( “href” );

});
[/cc]

But what if you are using <a> links without a “href” attribute as triggers for slide effects in jquery? This will give you an “underfined URL” error page. In my case it was due the code above, because jQuery was looking for an href attribute that was not present inside the <a> element and was not able to “define” a valid URL. To fix this I rewrote my script in order to first check if the <a> element had a “href” attribute, if it did then proceed with the internal loading, If not then prevent the default behavior of the <a> element, after all I was simply using an “<a>” (<a class=””></a>) element as a trigger to slide in and out a sub menu. To fix this and control both “href” and non href links use the following code:

[cc lang=jquery]

$( document ).on(“click”, “a”, function( event ){

if($( event.target ).attr( “href” ))
{

event.preventDefault(); location.href = $( event.target ).attr( “href” );

}
else
{

event.preventDefault();

}

});

[/cc]

This will allow you to use <a> elements as triggers and regular internal links without sending you to an undefined URL error page. Anyways I hope this helps :)
If you need further assistance use the comment functionality on this post.

Regards,