ajax

**dansgalaxy** · 02-25-2008, 11:27 AM

okay, so im new to this, and using basically copy and pasted code from here http://www.ibm.com/developerworks/we...jaxintro1.html i have had a go at a lyrics retriever for my lyrics plugin script http://dansgalaxy.co.uk/lyricsplugin/ajax_lyrics.php so u just type the artist and song and it shows lyrics in the text area...

but how can i expand so like show the response in a Div?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}
             
function callServer() {
  // Get the city and state from the web form
  var artist = document.getElementById("artist").value;
  var title = document.getElementById("title").value;
  // Only go on if there are values for both fields
  if ((artist == null) || (artist == "")) return;
  if ((title == null) || (title == "")) return;
  // Build the URL to connect to
  var url = "http://dansgalaxy.co.uk/lyricsplugin...dex.php?artist=" + escape(artist) + "&title=" + escape(title);
  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("lyrics").value = response;
 
 var div_response = xmlHttp.responseText;
  }
}
</script>
<form>
 <p>Artist: <input type="text" name="artist" id="artist" size="25" 
       onChange="callServer();" /></p>
 <p>Song title: <input type="text" name="title" id="title" size="25" 
       onChange="callServer();" /></p>
 <p>Lyrics: <textarea name="lyrics" id="lyrics" cols="50" rows="25"></textarea></p>
</form>
</body>
</html>

Thanks

Dan

**chrishirst** · 02-25-2008, 01:35 PM

Code:

document.getElementById("Id_of_DIV").innerHTML = response;

**dansgalaxy** · 02-25-2008, 05:09 PM

thanks, i tried document.write i really should get a better grip on javascript i have always tried to avoid it in the past.

**jito** · 02-26-2008, 02:56 AM

why don't you use javascript libararies? Like Jquery .
It will make life easier.

**dansgalaxy** · 02-26-2008, 05:23 AM

to be honest im clueless... i looked at the prototype.js but was bit confussed