Home/ Questions/Q 8812409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T03:35:58+00:00

I am implementing a twitter tweet function on my jQuery Mobile page but I

  • 0

I am implementing a twitter tweet function on my jQuery Mobile page but I keep getting undefined showing instead of the person’s username.

I am using Google Chrome by the way. As suggested by an answer I have edited the JavaScript Code.

HTML:

<!DOCTYPE html>
<html>
<head> 
  <title>Twitter Search</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
  <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/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
   <script src="_/js/myscript.js"></script>
  <link rel="stylesheet" href="_/css/mystyles.css" />
</head>
<body>
<div id="home"data-role="page">
    <div data-role="header" data-position="fixed" data-theme="b">
      <h1>Choose your Query</h1>
    </div><!-- /header -->

    <div data-role="content">   
      <ul>
        <li class="main"><a href="#tweetQ" data-transition="flip" data-search="Coventry">Coventry </a></li>
        <li class="main"><a href="#tweetQ" data-transition="flip" data-search="Birmingham">Birmingham</a></li>
    </ul>

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

<div id="tweetQ" data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" data-theme="b">
      <h1>The Tweets</h1>
    </div><!-- /header -->

    <div data-role="content">   
      <ul data-role="listview"  id="searchlist"> 
      <li><a href="#tweet" data-transition="flip">tweet 1</a></li>
      </ul>

    </div><!-- /content -->
</div><!-- second page -->

<div id="tweet" data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" data-theme="b">
      <h1>The account</h1>
    </div><!-- /header -->
    <div data-role="content">   
      <p>Yo</p>     
    </div><!-- /content -->
</div><!-- result page -->

</html>
</body>

JavaScript code:

$('#tweetQ').live('pageshow', loadSearch);

function loadSearch() {
console.log('data');
var search = $('#tweetQ').data('search');
var url = 'http://search.twitter.com/search.json?q='+ search;
console.log('search');
$.ajax({
url: 'http://search.twitter.com/search.json?q='+search,
dataType: "jsonp",
jsonpCallback: "tweetList",
success:
    function(tweetList) { 
                alert("success");
            }
 });
} 
function tweetList(data) {
console.log('data');
$.each(data.results, function(i, result) {
console.log(result.from_user);
console.log(result.text);
var html = '<li><a href="#tweet"><h3>'+result.from_user+ '</h3></a></li>'
$('ul#searchlist').append(html);
$('ul#searchlist').listview('refresh');
$('ul#searchlist').find("a:last").click(function() {
console.log('click');
});
});
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem is on this line

    jsonpCallback: "tweetList"

    I believe you are trying to call the tweetList function when the request completes, in that case you should set the success property instead

    success: tweetList

    So your ajax call should look like

    $.ajax({
    url: 'http://search.twitter.com/search.json?q='+search,
    dataType: "jsonp",
    success:tweetList
 });
    • 0