Home/ Questions/Q 9194351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T21:23:30+00:00

I can only assume that what I am trying to do is a very

  • 0

I can only assume that what I am trying to do is a very common requirement when working with dynamic javascript applications.

For this particular example, I want to request detailed test results via JSON. So for some users they might have done 20 tests, others might have done 1. Some users might have got 2 questions wrong in a particular test which will get referenced, others might have got 10 questions wrong, some got 0. Only the questions that are wrong would get displayed.

So in other words I am requesting a different layout for a collapsible data set upon each user who requests it.

The static code might look something like this:

<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
    <div data-role="collapsible">
        <h2>Test Number 2 - 2 out of 5 correct</h2>
        <ul data-role="listview" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider">You did not complete the following:</li>
            <li><h3>A (answer is: X)</h3></li>
            <li><h3>B (answer is: Y)</h3></li>
            <li><h3>C (answer is: Z)</h3></li>
        </ul>
    </div>
    <div data-role="collapsible">
        <h2>Test Number 1 - 4 out of 5 correct</h2>
        <ul data-role="listview" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider">You did not complete the following:</li>
            <li><h3>A (answer is: X)</h3></li>
        </ul>
    </div>
</div>

As somebody who is relatively new to JavaScript and jQuery I am still getting the hang of this, I have played around with some DOM manipulation in the past. Just wondered if there is another name for what I am trying to accomplish, and maybe even a library, pre-built code that I can use floating around GitHub, etc that does something like this without me having to build everything from scratch. Want to do this the right way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need a special framework for this, everything you need is already a part of jQuery.

    I have created an example for you: http://jsfiddle.net/Gajotres/HBxTs/

    HTML : 

    <!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-role="content">
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d">
                <div data-role="collapsible">
                    <h2>Simple list</h2>
                    <ul data-role="listview" data-inset="true" id="movie-data" data-theme="a">

                    </ul>
                </div>
            </div>            
        </div>
    </div>
</body>
</html>

    JS : 

    $('#index').live('pagebeforeshow',function(e,data){ 
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});


var ajax = {  
    parseJSONP:function(result){
        //var jsonObj = jQuery.parseJSON(parameters);
        $('#movie-data').append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $('#movie-data').append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $('#movie-data').append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $('#movie-data').append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $('#movie-data').append('<li>Released:<span> ' + result[0].released+ '</span></li>');  
        $('#movie-data').listview('refresh');        
    }
}

    Only thing you need to take care is to execute this function after content has been added:

    $('#movie-data').listview('refresh');

    It is used for listview restyling.

    • 0