Hi I want to just add the group ID to the start of the web page, I'm trying to append it to the div "test", and then add a space - allow it to pull data from the yammer API, and then loop through groups with a separation including the group ID. Can anyone tell me why it will print to the webpage in the callback but not outside of the callback? Thanks :)
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var page = 1;
var groupIDs = [4271656,5896212,1188700];
var n=0;
while (n< groupIDs.length){
$('#test').append("Group ID:" + "WHY WON'T YOU APPEND" + "<br/>");
getYammerJSON(page);
function getData(returnData){
$.each(returnData.users, function(key, value){
if(value.email != undefined){
$('#test').append(value.email + "<br/>");
}
});
}
function getYammerJSON(page){
$.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function(returnData) {
getData(returnData);
if(!returnData.more_available === true){
return false;
}
else {
page++;
getYammerJSON(page);
}
});
}
n++;
}
</script>
</head>
<body>
<div id="test">User Emails in Yammer Group IDs</div>
</body>
</html>
because your script is not able to find $('#test') div. As you have not put any .ready() event block for document the script gets executed before $('#test') div appears.
So you need to wrap your code inside doc ready block:
$(function(){
var page = 1;
var groupIDs = [4271656,5896212,1188700];
var n=0;
while (n< groupIDs.length){
$('#test').append("Group ID:" + "WHY WON'T YOU APPEND" + "<br/>");
getYammerJSON(page);
function getData(returnData){
$.each(returnData.users, function(key, value){
if(value.email != undefined){
$('#test').append(value.email + "<br/>");
}
});
}
function getYammerJSON(page){
$.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function(returnData) {
getData(returnData);
if(!returnData.more_available === true){
return false;
}
else {
page++;
getYammerJSON(page);
}
});
}
n++;
}
});
Edits:
You can move your append in here:
function getData(returnData){
$.each(returnData.users, function(key, value){
if(value.email != undefined){
$('#test').append(value.email + "<br/>");
$('#test').append("Group ID:" + "WHY WON'T YOU APPEND" + "<br/>"); // <----move it here.
}
});
}
write your script at the bottom of page or put the test div at the top.
you are running your js code before the tag is even rendered ... it wont find div so it wont append anything
IT NOT SHOULD BE LIKE THIS
<script>
$("#test").append("ghgh");
</script>
<div id = "test"> jj </div>
IT SHOULD BE LIKE THIS
<div id = "test"> jj </div>
<script>
$("#test").append("ghgh");
</script>
EDIT 1:
If you really want to run your code first then append all the text in a string type variable and then at the end just add it the to value of div.
EDIT 2:
Like this
<script>
for( condtion counter etc)
{
str_var+= "your text";
}
</script>
and then after running your srcipt
$("#test").text(str_var); or $("#test").val(str_var); or append
Solutions:
1.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
var page = 1;
var groupIDs = [4271656,5896212,1188700];
var n=0;
while (n< groupIDs.length){
$('#test').append("Group ID:" + "WHY WON'T YOU APPEND" + "<br/>");
getYammerJSON(page);
function getData(returnData){
$.each(returnData.users, function(key, value){
if(value.email != undefined){
$('#test').append(value.email + "<br/>");
}
});
}
function getYammerJSON(page){
$.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function(returnData) {
getData(returnData);
if(!returnData.more_available === true){
return false;
}
else {
page++;
getYammerJSON(page);
}
});
}
n++;
}
});
</script>
</head>
<body>
<div id="test">User Emails in Yammer Group IDs</div>
</body>
2.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="test">User Emails in Yammer Group IDs</div>
<script>
var $ = jQuery;
var page = 1;
var groupIDs = [4271656,5896212,1188700];
var n=0;
while (n< groupIDs.length){
$('#test').append("Group ID:" + "WHY WON'T YOU APPEND" + "<br/>");
getYammerJSON(page);
function getData(returnData){
$.each(returnData.users, function(key, value){
if(value.email != undefined){
$('#test').append(value.email + "<br/>");
}
});
}
function getYammerJSON(page){
$.get("https://www.yammer.com/api/v1/users/in_group/" + groupIDs[n] + ".json?page=" + page, function(returnData) {
getData(returnData);
if(!returnData.more_available === true){
return false;
}
else {
page++;
getYammerJSON(page);
}
});
}
n++;
}
</script>
</body>
</html>
Related
When I load this page to the browser the Javascript shows up but the HTML (H1 tag) doesn't. I haven't been able to figure out why I cant get HTML to show up on the page. Im new to both Javascript and HTML...clearly.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="data_generator.js"></script>
</head>
<body>
<h1>hello</h1>
<script>
$(document).ready(function(){
var $body = $('body');
$body.html('');
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
});
</script>
You are removing the <h1> tag when you clear the inner HTML of the body tag by calling $('body').html(''). Why don't you work in a different container element that you can clear:
<body>
<h1>Hello, world!</h1>
<div id="root"></div>
<script>
$(document).ready(function(){
var $root = $('#root');
// $root.html(''); // Already empty. Don't need to clear it.
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($root);
index -= 1;
}
});
</script>
</body>
As #charlietfl said, $body.html(''); clears all previous html content of the body tag. More simply it just replaces the contents with what is inside the quotes, or in this case nothing.
Here is documentation on the subject:
JQuery html() Documentation
EDIT:
Inspired by Sean's answer,
If you want to use the body container directly you can do so like this:
<body>
<h1>Hello, world!</h1>
<script>
$(document).ready(function(){
var $body = $('body');
// $body.html(''); // This clears it and since you don't want to, you shouldn't run this command.
var index = streams.home.length - 1;
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message);
$tweet.appendTo($body);
index -= 1;
}
});
</script>
</body>
ok i have my files on apache so i can read it localhost i have one issue cause iam new and i really cant understand how to load xml files with js i see all the topics in stuck overflow and iam stuck .....
i have the main htm file . should i change the path to var indexFile and var xmlFile to my localhost like this var indexFile="file:///C:/Apache24/htdocs/data/index.xml"; ??
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var direction=1;
var titleis="Loading.........";
function showLoading(){
//if (window.status.charAt(0)=="O"){direction=0}
//if (window.status.charAt(titleis.length-1)=="O"){direction=1}
if (direction==0){
window.status=window.status.charAt(titleis.length-1)+window.status.substr(0,titleis.length-1);
}else{
window.status=window.status.substr(1,titleis.length-1)+window.status.charAt(0);
}
}
window.status=titleis;
var timeID=setInterval("showLoading();", 100);
</script>
<script Src="scripts/config.js" language=jscript></script>
<script Src="scripts/general.js" language=jscript></script>
<script Src="inc/header.js" language=jscript></script>
<script src="scripts/grid.js"></script>
<script src="scripts/xml.js"></script>
<SCRIPT LANGUAGE="JavaScript">
// this page should never load inside of another frame
window.onerror = handleError;
var xmlHttp = new Active.XML.Table;
var xmlLoaded=false;
var xmlData;
var indexFile="data/Index.xml";
var xmlIndex =CreateXMLObj(false);
var hasOrders=false;
var idxLoaded=false;
var HtmlIdx;
var xmlFile="data/Catalogue.xml";
var RootTag = "CATALOGUE";
var RecordTag = "PART";
function InitSync()
{
if( "object" == typeof( top.deeptree ) && "unknown" == typeof( top.deeptree.Sync ) )
{
top.deeptree.Sync();
}
}
function SetTitle(name){
_Title = name
document.title =_Title;
}
function SetAsterisc(){
document.title =_Title + '*';
}
function loaddata(){
if (!xmlLoaded) {
if (!xmlHttp.isReady()){
window.status="Φόρτωση δεδομένων...";
xmlHttp.defineProperty("async",false);
xmlHttp.setURL(xmlFile);// provide data URL
xmlHttp.request();// start asyncronous data retrieval
window.status="Done";
}
xmlData=xmlHttp.getXML();
if (xmlHttp.isReady() && !xmlHttp.getAsync()){
xmlLoaded=true;
}else{
xmlLoaded=true;
}
}
return xmlLoaded;
}
function loadIndexes(){
if (!idxLoaded) {
window.status="Φόρτωση δεδομένων...";
if(xmlIndex.load(indexFile)){
idxLoaded=true;
}else{
idxLoaded=false;
alert( 'parseError : ' + xmlIndex.parseError.reason + '\n' +
'Code : ' + xmlIndex.parseError.errorCode + '\n' +
'Line : ' + xmlIndex.parseError.line + '\n' +
'Source : ' + xmlIndex.parseError.srcText + '\n' +
'Pos : ' + xmlIndex.parseError.linepos + '\n' +
'filepos : ' + xmlIndex.parseError.filepos + '\n'
,1,document.title);
}
window.status="Done";
}
return idxLoaded;
}
function strnull(value,_default){
if (value==null || value==""){
return _default;
}
return value;
}
function getNameID(AID){
if(AID<0){return}
return new String(getsafeData(xmlData,"//" + RecordTag + "[AID=" + AID + "]/NameID"));
}
function getPictureNo(AID){
if(AID<0){return}
return new String(getsafeData(xmlData,"//" + RecordTag + "[AID=" + AID + "]/PictureNo"));
}
function getOrder(AID){
if(AID<0){return}
return parseInt(getsafeData(xmlData,"//" + RecordTag + "[AID=" + AID + "]/Order"));
}
function getPicName(PicNo){
return getsafeData(xmlIndex,"//menuItem" + "[#id=" + PicNo + "]/#name");
}
function SetOrder(AID,value){
if(AID<0){return false;}
xmlData.selectSingleNode("//" + RecordTag+ "[AID=" + AID + "]/Order").text=value;
hasOrders=true;
return true;
}
function ClearOrder(AID){
if(AID<0){return false;}
return SetOrder(AID,"");
}
function ClearOrders(){
var StrQuery = "//" + RecordTag + "[Order>0]";
var xmlNodeLst = xmlData.selectNodes(StrQuery);
for(var i=0;i<xmlNodeLst.length;i++){
xmlNodeLst(i).selectSingleNode("Order").text="";
var id=xmlNodeLst(i).selectSingleNode("AID").text;
SetOrder(id,"");
}
hasOrders=false;
return true;
}
function InputOrder(AID){
if(AID>=0){
var oldvalue=getOrder(AID);
if(isNaN(oldvalue)){oldvalue=0};
var value=window.prompt("Εισάγετε ποσότητα για το αντ/κό με Αρ.Ονομαστικου :'" + getNameID(AID) +"'.",oldvalue);
if (value!=null){
if(isNaN(value)){value=0};
if (value!=oldvalue){
if (value > 0) {
SetOrder(AID,value);
return value;
}
}
}
}else{
return null;
}
}
</SCRIPT>
</HEAD>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function window_onbeforeunload() {
if (hasOrders){
window.event.returnValue="\n---------------------------------------------------------------------\nΑν φύγετε από τη σελίδα θα χαθούν οι καταχωρήσεις σας.\n---------------------------------------------------------------------\nΠΑΤΗΣΤΕ OK για να φύγετε.\nΠΑΤΗΣΤΕ CANCEL για να παραμείνετε.\n\n";
}
}
</SCRIPT>
<SCRIPT LANGUAGE=javascript FOR=document EVENT=onreadystatechange>
document_onreadystatechange();
</SCRIPT>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
function document_onreadystatechange(){
if (document.readyState == "complete") {
clearInterval(timeID);
//window.showModelessDialog("logo1st.htm",self,'dialogwidth: 558px; DialogHeight:430px;status: no; resizable:no;help:no;maximize:no;minimize:no;');
window.status="Done";
}
}
</SCRIPT>
<SCRIPT LANGUAGE=javascript FOR=window EVENT=onbeforeunload>
window_onbeforeunload();
</SCRIPT>
<!---->
<script language=javascript>
var urlIs=QueryString('url')
if (urlIs==null || urlIs==''){urlIs='logo1st.htm';}
document.write('<FRAMESET name="FrmSet" onload="" rows="36,*" border="1" FRAMESPACING="0" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">');
document.write('<FRAME name="fraTop" src="top.htm" scrolling="no" border="0" frameborder="no" noresize TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0"></FRAME>');
document.write('<FRAMESET name="fstMain" cols="1,*" border="1" frameborder="1" FRAMESPACING="2" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">');
document.write('<FRAME name="fraLeftFrame" src="Left.htm?frame=true&selection=' + QueryString('selection') + '"scrolling="no" noresize TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" FRAMEBORDER="1" BORDER="1"></FRAME>');
document.write('<FRAME name="fraRightFrame" src="' + urlIs + '?frame=true&hidetoc=false&selection=' + QueryString('selection') + '" FRAMEBORDER="no" BORDER="0" BORDERCOLOR="#b1c3c0"></FRAME>');
document.write('</FRAMESET>');
document.write('</FRAMESET>');
</script>
</HTML>
this code works on IE 5 I THINK BUT not ON latest browsers what i have to change for make it work my xml docs are in apache C:\Apache24\htdocs\data
i want to insert in my NewForm.aspx two or more script in jquery. I wrote the code in a Content Editor web part as many online tutorial.
I have two script that work fine separately, but when i merge the script doesn't work (exactly work just one of two).
This is my code in Content editor:
<p>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked')) {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione');
});
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("select[Title='" + targetColumn + "']").bind('click',function() {
if($(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('Scelta','descrizione');
});
</script>
</p>
Thank for your help,
EDIT SOLVED:
This is the correct code:
<p>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>
<script type="text/javascript">
function HideColumn(targetColumn1, hideColumn1, targetColumn2, hideColumn2) {
var columnObj1 = $("input[Title='" + hideColumn1 + "']");
$("input[Title='" + targetColumn1 + "']").bind('click',function() {
if($(this).is(':checked')) {
columnObj1.closest("tr").show();
}
else {
columnObj1.closest("tr").hide();
}
});
var columnObj2 = $("input[Title='" + hideColumn2 + "']");
$("select[Title='" + targetColumn2 + "']").bind('click',function() {
if($(this).val() == "Pippo") {
columnObj2.closest("tr").show();
}
else {
columnObj2.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione','Scelta','Titolo');
});
</script>
</p>
Regards,
Francesco
I see a couple of issues, some that will outright break this (the duplicate function definitions) & others that are less-than-optimal design. You don't need to load the jQuery library twice and you shouldn't define the same function twice with different contents.
Try this:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked') || $(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumn('sino','descrizione');
HideColumn('Scelta','descrizione');
});
</script>
To also have the ability to hide certain columns on initial page load, consider the below:
UPDATE:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js"></script>
<script type="text/javascript">
function HideColumnOnLoad(hideColumn) {
$("input[Title='" + hideColumn + "']").closest("tr").hide();
}
function HideColumnOnClick(targetColumn, hideColumn) {
var columnObj = $("input[Title='" + hideColumn + "']");
$("input[Title='" + targetColumn + "']").bind('click',function() {
if($(this).is(':checked') || $(this).val() == "Pippo") {
columnObj.closest("tr").show();
}
else {
columnObj.closest("tr").hide();
}
});
}
$(document).ready(function() {
HideColumnOnLoad('descrizione');
HideColumnOnClick('sino','descrizione');
HideColumnOnClick('Scelta','descrizione');
});
</script>
I want to append data I fetched from server to a div tag, but I can't get it to work. That's HTML with a div tag to which I'd like to append data from the JS code.
HTML:
<body onload="initialize()">
<div id="text"></div>
</body>
And here is JavaScript code. I would like to replace document.write with a function that will append data to a div tag.
JS:
function initialize() {
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
document.write('<img src="' + data[i].image + '" />' + data[i].title + data[i].description + '<br>');
}
});
}
Fiddle: http://jsfiddle.net/GDxtf/
I just started learning JavaScript. Help will be greatly appreciated :)
Paste this code in the bottom of your HTML document, right before </body>:
<script>
// If you're not using an HTML5 doctype, use <script type="text/javascript> instead of just <script>
$(function () {
$targetDiv = $("#text");
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
var $div = $("<div />");
var $img = $("<img />");
$img.attr("src", data[i].image);
$img.appendTo($div);
var $title = $("<h2>" + data[i].title + "</h2>");
$title.appendTo($div);
var $description = $("<p>" + data[i].description + "</p>");
$description.appendTo($div);
$div.appendTo($targetDiv);
}
});
});
</script>
Did this solve your problem?
I'm a beginner at javascript/jquery and completely new to API's and I'm wondering if anyone could help me with something
What I'm trying to achieve is to have a user enter a keyword/phrase into a textbox, they click search and the page returns a list of people who have that word in their tweet.
I have so far been able to display results from a hard-coded keyword (which I got from a website) but when trying to change it I am getting nothing back.
Here is the working one with hard code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('http://search.twitter.com/search.json?q=earthquake&lang=en&callback=?', function (data) {
var data = data.results;
var html = "<ul>";
for (var i = 0; i < data.length; i++) {
html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>#"
+ data[i].from_user + "</a>: " + data[i].text + "</li>";
}
html += "</ul>"
$('.content').html(html);
});
});
</script>
<h2>Twitter</h2>
<div class="content">
</div>
And here is the code I'm working on now
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
var button= document.getElementById('searchTwitter');
button.onclick= function(){
var text = document.getElementById('search').value;
}
var baseUrl = "http://search.twitter.com/search";
var query = document.getElementById('<%=searchTwitter.ClientID%>').value;
$(document).ready(function () {
$.ajax({
url: baseUrl + '&text' + '&lang=en&callback=?',
dataType: "jsonp",
success: showResults
});
});
function showResults(data) {
var data = data.results;
var html = "<ul>";
for (var i = 0; i < data.length; i++) {
html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>#"
+ data[i].from_user + "</a>: " + data[i].text + "</li>";
}
html += "</ul>"
$('.content').html(html);
}
</script>
<asp:TextBox ID="search" runat="server"></asp:TextBox>
<asp:Button ID="searchTwitter" runat="server" Text="Button" />
Any help would be much appreciated as I have been trying to find a way to do this for days.
thanks a lot
Here's a working example of what you are describing: http://jsfiddle.net/ZEjey/. You should be able to adapt it to your ASP code.
Relevant code below.
JQuery
$("#SearchButton").click(function() {
$.getJSON('http://search.twitter.com/search.json?q=' + $('#TextSearch').val() + '&lang=en&callback=?', function (data) {
var data = data.results;
var html = "<ul>";
for (var i = 0; i < data.length; i++) {
html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>#"
+ data[i].from_user + "</a>: " + data[i].text + "</li>";
}
html += "</ul>"
$('.content').html(html);
});
});
HTML
<h2>Twitter</h2>
Search for: <input id="TextSearch" type="text" /> <input type="button" id="SearchButton" value="Go" />
<div class="content"></div>
---
EDIT 0
Okay, the code below works. The <asp:Button automatically causes a postback so you don't see anything ever get loaded. You either need to use <input type="button" ... instead or stop the normal events from occurring using event.preventDefault(); as I did below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Twitter</h2>
<asp:TextBox id="TextSearch" runat ="server"/>
<asp:Button id="SearchButton" runat="server" Text="Search"/>
<div class="content"></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$("#SearchButton").click(function () {
event.preventDefault(); // ADD THIS LINE TO YOUR CODE
$('.content').html("<em>loading...<em>");
$.getJSON('http://search.twitter.com/search.json?q=' + $('#TextSearch').val() + '&lang=en&callback=?', function (data) {
var data = data.results;
var html = "<ul>";
for (var i = 0; i < data.length; i++) {
html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>#" + data[i].from_user + "</a>: " + data[i].text + "</li>";
}
html += "</ul>";
$('.content').html(html);
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
});
});
</script>
</form>
</body>
</html>
It looks like you're making an ajax request on document ready, rather than when the button is clicked. I also don't see where you're adding the value from the text box to the query. Here's how you could change your code:
//this code will run when the page loads and set up the button so the
//onclick event executes your function
$(document).ready(function () {
var button = document.getElementById('<%=searchTwitter.ClientID%>');
//you need to make the ajax request in this function, because this
//is fired when the search button is clicked
button.onclick = function() {
var text = document.getElementById('search').value;
var baseUrl = "http://search.twitter.com/search.json";
var query = document.getElementById('<%=search.ClientID%>').value;
$.ajax({
//you're building the request url here, with the text from the
//box as the q parameter
url: baseUrl + '?q=' + query + '&lang=en&callback=?',
dataType: "jsonp",
success: showResults
});
};
});
//this function can be defined outside ready()
function showResults(data) {
var data = data.results;
var html = "<ul>";
for (var i = 0; i < data.length; i++) {
html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>#"
+ data[i].from_user + "</a>: " + data[i].text + "</li>";
}
html += "</ul>";
//I'm assuming you have a div with a content class on your page
$('.content').html(html);
}
You might also want to try out the Chrome developer tools (or Firebug in Firefox). You can set breakpoints and see what's happening at each step. You can also see what requests have been sent and the data returned. That will help give you a better handle on what's going on.