jQuery Mobile Twitter

A jquery mobile twitter application

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<!---- SEARCH PAGE ----->
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Twitter</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div data-role="fieldcontain">
            <input type="search" name="search" id="search" value="" />
            <input type="button" name="searchButt" id="searchButt"  value="Search"/>
        </div>
        <a href="#prefs" data-role="button" data-icon="gear" data-rel="dialog" data-transition="pop">Preferences</a> 
    </div><!-- /content -->

    
</div><!-- /page -->

<!---- RESULTS ----->
<div data-role="page" id="results">
    <div data-role="header">
        <h1>Results</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div id="twitList">
                
        </div>
    </div><!-- /content -->


</div><!-- /page -->

<!---- PREFERENCES ----->
<div data-role="page" id="prefs">
    <div data-role="header">
        <h1>Preferences</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div data-role="fieldcontain">
            
            <label for="slider">Number of results:</label>
            
            <input type="range" name="slider" id="slider" value="15" min="0" max="100"  />
            <fieldset data-role="controlgroup">
            <legend>Result Type:</legend>
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="mixed" checked="checked" />
                <label for="radio-choice-1">Mixed</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="recent"  />
                <label for="radio-choice-2">Recent</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="popular"  />
                <label for="radio-choice-3">Popular</label>
     ...

JavaScript

$(function(){
        $('#searchButt').click(function() {
          // Add a loading message before search starts
          $.mobile.pageLoading();
          doSearch();
        });
    })
    
    function doSearch(){
            $.ajax({
                
                
                url: "http://search.twitter.com/search.json?q="+$('#search').val()+"&result_type="+$('input:radio[name=radio-choice-1]:checked').val()+"&rpp="+$('#slider').val(),
                dataType: 'jsonp',
                success: function(json_results){
                    // Remove any list - so the new one can be added.
                    $('#twitList ul').remove();
                    // Need to add UL on AJAX call or formatting of userlist is not displayed
                    $('#twitList').append('<ul data-role="listview"></ul>');
                    listItems = $('#twitList').find('ul');
                    $.each(json_results.results, function(key) {
                        html = '<img src="'+json_results.results[key].profile_image_url+'"/>';
                        html += '<h3><a href="#">'+json_results.results[key].text+'</a></h3>';
                        html += '<p>From: '+json_results.results[key].from_user+' Created: '+json_results.results[key].created_at+'</p>';
                        listItems.append('<li>'+html+'</li>');
                    });
                    // Need to refresh list after AJAX call
                    $('#twitList ul').listview();
                    // Once all complete change the page
                    $.mobile.changePage("#results", "slide");
                }
            });
        }