jQuery.data() works in Mac OS WebKit, but not on iPhone OS?

Question

I'm playing around with jQTouch for an iPhone OS app that I've been toying with off and on for a while. I wanted to try my hand building it as a web app so I started playing with jQTouch. For reference, here is the page+source (all my code is currently in index.html so you can just "View Source" to see it all):

http://rpj.me/doughapp.com/wd/

Essentially, I'm trying to save pertinent JSON objects retrieved from Google Local into DOM objects using the data() method (in this example, obj is the Google Local object):

$('#locPane').data('selected', obj);

then later (in a different "pane"), retrieving that object to be used:

$('#locPane').bind('pageAnimationEnd', function(e, inf) {
            var selobj = $(this).data('selected');
            // use 'selobj' here ...
}

In Chromium and Safari on the desktop OS (Snow Leopard in my case), this works perfectly (try it out).

However, the same code returns undefined for the call to $(this).data('selected') in the second snippet above. I've also tried $('#' + e.target.id).data('selected') and even the naive $('#locPane').data('selected'). All variants return undefined in the iPhone OS version of WebKit, but not on the desktop.

Interestingly, the running this on Mobile Safari in the iPhone Simulator fails as well.

If you look at the full source, you'll see that I even try to save this object into my global jQTouch object (named jqt in my code). This, too, fails on the mobile platform.

Has anyone else ever ran into this? I'll admit to not being a web/javascript programmer by trade, so if I'm making an idiot's error please call me out on it.

Thank you in advance for the help! -RPJ

Update: I didn't make it clear in the original post, but I'm open to any workaround if it works consistently. Since I'm having trouble storing these objects in general, anything that allows me to keep them around is good enough for now. Thanks!

Answer 1

As far as I can tell there seems to be a bug in Mobile Safari storing objects like this. So what I did was to simply store the components of the object in the documents data store.

 $(document).data( "lessonCode" , lesson.lessonCode);
 $(document).data( "question" , lesson.question);
 $(document).data( "answer" , lesson.answer);

Answer 2

Have you tried using HTML5 data-ref attributes? The data has to be stringified, but you can just do

$('#locPane').attr('data-selected', "somestring");

and still have valid HTML5 markup.