Question

I’ve a jQuery Mobile app. The app pulls JSON data from the backend and presents it to the user.

From last 2 days i’m stuck with a weird issue. While presenting the data to the user, I’m trying to make use of <a href="url"></a> tag. It’s a very simple line of code and I just don’t understand what is the issue with something so simple.

Code Snippet

$.each(obj, function(entryIndex, entry) {
            //some code
         html += '<a href="retrieveDetails.jsp?reference=' + entry.reference + '"><h3 class="term">' + entry['name'] + '</h3></a>';
         //some more code
      });

Issue

When I try to click on the hyperlink, I see the following error in FireBug console.

j.data("page") is undefined
animationComplete()jquery....min.js (line 54)
error()

What am I using?

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

I will appreciate if someone can guide me.

Thanks

Answer 1

A couple of things here.

• You are using an old non stable version of JQM. Upgrade to the latest stable version.
• I suspect your page that your linking to does not contain a div with
  data-role=”page”. That is probably the reason why the error says j.data(“page”) is undefined. When JQM(jQuery mobile) grabs your other page it
  looks for a div with that data attribute. That is the portion it
  inserts into the original pages dom.

This is an example of the div JQM looks for when it inserts a new page into the dom.

<div data-role="page">
    <div data-role="content">
        <h1>Hello World</h1>
    </div>
</div>