0

我对 javascript 非常陌生，当用户输入新的搜索查询时，我不知道如何加载新的 twitter 提要。下面是我的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Twitter Feed</title>
<style type="text/css">
body    {
    background: #111111;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #ccc;
}
h1 { padding: 20px 0 0 15px; margin: 0; letter-spacing: -3px; }
h2 { padding: 0 0 0 15px; margin: 0; color: #777; letter-spacing: -2px; }
.loader     { position: absolute; top: 250px; left: 105px; }
#twitter    { position: relative; width: 280px; background: #222; height: 820px; margin:     50px 0 0 250px;  }
#twitter li p   { padding: 0 0 15px; }
#twitter p a:link, #twitter p a:active, #twitter p a:visited    { color: #6fb2cd;     text-decoration: none; }
#twitter p a:hover  { text-decoration: underline; }
#twitter ul {
    width: 260px;
    height: auto;
    padding: 15px 0 0 15px;
    margin: 0;
}
#twitter li {
    float: left;
    margin: 3px 0;
    list-style-type: none;
}
li.twitter_date {
    background: url(../images/date_bg.jpg) no-repeat left top;
    width: 95px;
    height: 23px;
    text-align: center;
    line-height: 21px;
}
.twitter_date a:active, .twitter_date a:link, .twitter_date a:visited   {
    color: #666;
    background: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 7px;
}
.twitter_date a:hover   {
    color: #666;
}
a:link#go_back, a:active#go_back, a:visited#go_back {
    display: block;
    background: url(/demos/go_back.jpg) no-repeat top left;
    width: 120px;
    height: 40px;
    position: absolute;
    top: 50px;
    left: 100px;
    text-indent: -9999px;
    color: #111;
}
a:hover#go_back {
    background: url(/demos/go_back.jpg) no-repeat -120px 0;
}
</style>
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">


//Twitter
window.onload = function() {
    var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />";
    var url = 'http://twitter.com/statuses/user_timeline/' + 'coldplay' + '.json?call    back=twitterCallback2&count=6';
    var script = document.createElement('script');  
    $("#twitter_feed").html(ajax_load);
    script.setAttribute('src', url);
    document.body.appendChild(script);
}

changeFeed 是应该更改提要的函数，但它不起作用。有任何想法吗？

function changeFeed(){
    var ajax_load = "<img class='loader' src=' loader.gif' alt='Loading...' />";
    var newSearch = $('#query').val();
    var url = 'http://twitter.com/statuses/user_timeline/' + newSearch + '.json?callback=twitterCallback2&count=6';
    var script = document.createElement('script');  
    $("#twitter_feed").html(ajax_load);
    script.setAttribute('src', url);
    document.body.appendChild(script);
}

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, 
function(url) { return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
  return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li class="twitter_date"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li> <li><p>'+status+'</p></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];
  var parsed_date = new Date();
  parsed_date.setTime(Date.parse(time_value));  
  var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sep', 'Oct', 'Nov', 'Dec');
  var m = parsed_date.getMonth();
  var postedAt = '';
  postedAt = months[m];
  postedAt += " "+ parsed_date.getDate();
  postedAt += ","
  postedAt += " "+ parsed_date.getFullYear();
  return postedAt;
}                                        

</script>
</head>

<body>
<a id="go_back" href="javascript:history.go(-1)">Go Back</a>
<div id="twitter">
    <form>
    Search: <input type="text" name="searchstring" id="query" /><br />
    </form>
    <button type="button" onclick="changeFeed();">Search</button>

    <h1>searchstring.text()</h1>
    <h2>Twitter Feed</h2>
    <ul id="twitter_update_list">
    </ul>
</div>

4

1 回答 1

0

我忘了创建元素 newSearch。一旦我包括了这条线

var newSearch = document.createElement('newSearch')

一切开始正常。

于 2012-08-30T18:32:48.127 回答