jQuery Mobile JSON parsing

Question

I'm trying to make a cross platform mobile application using jQuery Mobile.

I have a JSON string that displays information about a specific object (check it out here: http://app.calvaryccm.com/mobile/web/teachings/json?callback=?) and I want it to turn it into a list view that connects to a single item view. The problem is, the listview isn't displaying like a list at all. It is almost like HTML without CSS. Check it out here: http://mbeta.calvaryccm.com/#teachings

This is the Javascript for parsing the JSON string:

<!-- Getting Teaching Data -->
<script type="text/javascript">
$(document).ready(function () {

    $.getJSON("http://app.calvaryccm.com/mobile/web/teachings/json?callback=?",

    function (data) {

        //remove any characters from the query that might be unsafe to use as an ID for a page
        //data.pageId = data.MessageNumber.replace(/[^\w]/, "");

        //Feed the data to the template and add the new page to the body.
        var res = $("#teachingTemplate").tmpl(data); //.appendTo(document.body);
            $("#teachings").append(res);

        //Grab a reference to that shiny new page
        //var newpage = $("#" + data.pageId);
    });
});

//Makes date readable
function GetDate(jsonDate) {
      var value = new Date(parseInt(jsonDate.substr(6)));
      return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
    }

This is supposed to be the list view:

    <script id="teachingTemplate" type="text/x-jquery-tmpl"> 
<div id="${MessageNumber}">

<div data-role="header">
    <a data-icon="arrow-l" href="#" data-rel="back">Back</a>
    <h1>${Title}</h1>
</div>

<div data-role="content">   


    <div class="teachingsForm">
        <ul data-role="listview">
            <li><a href="singleTeachingView" class="tableImage">
                    <img src="" alt=""/> 
                    <h3>${Title}</h3>
                    <p>${Speaker} - ${GetDate(MessageDate)} - ${MessageNumber} {{if Book != null}} - ${Book.BookName} ${ChapterVerse}{{/if}}</p>
                </a>
            </li>
        </ul>
    </div>
</div>

<div data-role="footer">
    <h4>2011 Calvary Chapel Melbourne</h4>
</div>

I cannot figure out why my listview isn't displaying right. If you want to see it in action look here: http://mbeta.calvaryccm.com/#teachings . I need help getting my listview to display right and direct to the right page.

Can you explain what you want this to look like, I don't understand. Also wondering why you have an empty img tag in there? — Alan Moore
– Alan Moore, Commented Dec 23, 2011 at 14:56
I have an empty image tag there for the future. Later in development the JSON string will include in image for each teaching. I would like it to look like this: jquerymobile.com/test/docs/lists/… but I don't know how. — Courtney Stephenson
– Courtney Stephenson, Commented Dec 23, 2011 at 14:59
OK I think I'm starting to get an idea of what the deal is. I suspect that there's something you have to do after your JSON stuff comes back from the server to tell jQuery to look at the content again in order for it to do its magic. I'll try to figure out how to do that. — Pointy
– Pointy, Commented Dec 23, 2011 at 15:54
Have you tried adding a call to "$.mobile.changePage()" in your JSONP callback function, after you do the ".tmpl()" call? — Pointy
– Pointy, Commented Dec 23, 2011 at 15:56
I just did that and now the page changes but it doesn't contain any data. — Courtney Stephenson
– Courtney Stephenson, Commented Dec 23, 2011 at 16:22

Pointy · Accepted Answer · 2011-12-23 15:59:10Z

1

It looks exactly like what your template says it should look like. Note that each of your <ul> elements only has one <li> element in it.

Your template starts off with an outer <div>, and then there's a "header" <div> with the <h1> title. Then there's the "content" <div>, and ultimately the <ul>, and finally the "footer". That's what your result page looks like. If you want to do some sort of iteration, well, you'll have to explicitly do that in your template, because otherwise the template code will assume you just want it to re-apply the template to each object in the array you pass it.

There's nothing wrong with the "JSON parsing". Note that in your JSON, there's no need to quote "/" characters with "\" and in fact (though it doesn't matter for JSONP) it's not valid JSON.

edit — OK so now that I've pulled my head out from wherever it was I think I see what you're doing. The problem may be that you just need to call

$.mobile.changePage();

at the end of your JSONP callback function. However I note that your "$.mobile" doesn't have a "changePage()" function ... I don't know what that means. You're using a pretty old version of jQuery too.

edited Dec 23, 2011 at 15:59

answered Dec 23, 2011 at 15:08

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Courtney Stephenson Over a year ago

How do I convert it into a listview format? I want the single item style when the user clicks a list item.

Pointy Over a year ago

I don't have any idea what you mean by "listview format". All you've got in the question is that template and the data. The way you make it look the way you want is to make the template do what you want. I don't know what that is yet. If you clarify the question by, for example, showing what you want the result HTML to look like, then perhaps I or somebody else can help.

Courtney Stephenson Over a year ago

First of all thank you for your help! I would like the first page to look like this:

<ul data-role="listview"> 	<li><a href="{MessageNumber}.html">{Title}</a></li>         <li><a href="{MessageNumber}.html">{Title}</a></li> 	<li><a href="{MessageNumber}.html">{Title}</a></li>i> </ul>

With a list of teachings. When the user clicks, the second page will show the single teaching template as shown above.

Pointy Over a year ago

So you want the view to be divided up into separate pages? Hmm well that will probably be somewhat more involved, unless jQuery Mobile already has some sort of mechanism to support that. (The lnk you posted the the jQuery mobile example gives me a blank gray page ...)

Pointy Over a year ago

oh wait I can see the jQuery stuff now. Let me look at it for a sec.

Collectives™ on Stack Overflow

jQuery Mobile JSON parsing

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related