Ben McCallum's Blog

Dissecting ASP.NET MVC3, CSS3, HTML5, jQuery and a whole lot of other things ending with numbers…

Archive for the tag “jQuery”

jQuery live() function and Safari mobile version bug

Recently I came across an interesting problem. As you can now see on my website @ http://reach4urPhone.com/player/weapons?gamertag=xBLACK%20V3N0Mx I have a table displaying a player’s weapon stats in a table. By pressing the arrows above the columns the user can roll through varying columns to show more stats, an effective way of cramming more stats into a mobile interface.

To do this I simply wrote a click handler with the appropriate functionality and bound it to the element via jQuery’s live() function.


$('#rightArrow').live('click', function () {
//...
});

It was necessary to use the .live() jQuery method to bind my click handler to elements inserted into the DOM after the initial page load (ie. via AJAX). Everything seemed to be working fine on my desktop development machine in Chrome, Safari, Firefox and IE9. But when I deployed the site and viewed it on my iPhone and iPad the click handler was never called. After some digging I found this jQuery bug report: http://bugs.jquery.com/ticket/5677

It seems that the live jQuery method is never executed in the Safari mobile environment, or at least does nothing. So until the jQuery team handles this situation I’ve implemented the following workaround…
Instead of binding a function to the event, use the old-fashioned way by adding this to your clickable elements:
onclick="functionName(this)"

and refactoring your existing code into functions with the appropriate names of course and the structure function functionName(obj) { ... }

Note: Passing this to the function enables you to identify the element which was pressed so you can perhaps give a clicked appearance through CSS by doing
$(obj).css('...', '...')

Finally, I realise this is not the “Unobtrusive JavaScript” way but hopefully the jQuery team will implement a solution soon. Full solution is available on my site as of this post.

reach4urPhone.com BETA released!

bungie logo

Recently, I’ve been working on a mobile phone web application for viewing Halo: Reach stats. Bungie and Microsoft (developers and publishers of the critically acclaimed and awesome game) have been kind enough and forward-thinking enough to expose an API (application programming interface) for us developers to extract data about the game, from player details to game history and fileshares.

I’ll be talking more about this website in the future, including how I’ve designed and maintained it, but for now go and visit it @ reach4urPhone.com and let me know what you think. This site is built using ASP.NET MVC3, HTML5, CSS3, jQuery and I hope you like it!

-Ben

A New Beginning

Hi Interwebs,

It’s been a while since I’ve posted anything on this blog. I’ve been busy finishing my Honours degree :|

But now that is out of the way I am going to start posting things I learn on here. Whether they be in the ASP.NET MVC framework, ASP.NET Web Forms, C#, CSS3, HTML5, jQuery and other fields. I’m extremely excited about these new technologies and have made the shift from web forms to MVC3 so I’m going to share everything I learn and find useful on this blog, for your sake and my memory.

Regards,
Ben

Post Navigation

Follow

Get every new post delivered to your Inbox.