By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,645 Members | 1,048 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,645 IT Pros & Developers. It's quick & easy.

Beginner: Javascript function call within URL from use of XMLHTTPRequest

P: 1
The title probably isn't very clear, but I haven't been able to find this problem (or I must be having problems figuring out which search strings to use) so I apologize if this has been addressed before, and I apologize if this is the wrong forum since I'm trying to use the XMLHTTPRequest with Javascript and PHP and I couldn't figure out which category my problem belonged to.

I am completely new to AJAX and rusty with Javascript. I created a XMLHTTPRequest object on "index.php" that calls to another page 'programs.php' that queries and outputs music information for a skating program.

In the output of 'programs.php' it contains:

index.php:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" language="Javascript">
  2. <!--
  3.  var req = false;
  4.    try {
  5.      req = new XMLHttpRequest();
  6.    } catch (trymicrosoft) {
  7.      try {
  8.        req = new ActiveXObject("Msxml2.XMLHTTP");
  9.      } catch (othermicrosoft) {
  10.        try {
  11.          req = new ActiveXObject("Microsoft.XMLHTTP");
  12.        } catch (failed) {
  13.          req = false;
  14.        }  
  15.      }
  16.    }
  17.  
  18.    if (!req)
  19.      alert("Error initializing XMLHttpRequest!");
  20.  
  21. function sendRequest(id, program) {
  22.   req.open('get', 'programs?id=' + id + '&x=' + program);
  23.   req.onreadystatechange = handleResponse;
  24.   req.send(null);
  25. }
  26.  
  27. function handleResponse() {
  28.  
  29.   if(req.readyState == 4){
  30.     var response = req.responseText;
  31.     var update = new Array();
  32.  
  33.     if(response.indexOf('||' != -1)) {
  34.       update = response.split('||');
  35.       document.getElementById(update[0]).innerHTML = update[1];
  36.     }
  37.   }
  38.   else
  39.   alert("loading" + ajax.readyState);
  40. }
  41.  
  42. -->
  43. </script>
  44.  
  45. </head>
  46.  
  47. <body>
  48.  
  49. <a href="javascript:sendRequest('show_music', '<? echo $x ?>');">Music</a> |
  50. <div id="info">
  51.  
  52. </div>
  53.  
  54. </body>
  55. </html>
  56.  
programs.php:
Expand|Select|Wrap|Line Numbers
  1.  
  2. switch($_REQUEST['id']) {
  3.  
  4. case 'show_music':
  5.          echo "info||";
  6.          $program = $_REQUEST['x'];
  7.          query_music_song($program, $db);
  8.          mysql_close();
  9.          break;
  10. }
  11.  
  12. <script language="JavaScript">
  13.  
  14. function show(click_lyrics) {
  15.     if (click_lyrics.style.display == "none") {
  16.         click_lyrics.style.display = "";
  17.     } else if (click_lyrics.style.display == "") {
  18.         click_lyrics.style.display = "none";
  19.     }
  20. }
  21.  
  22. </script>
  23. ...
  24. <snip>
  25. ...
  26. echo "<a href=\"#\" onclick=\"show(lyrics)\">Show Lyrics</a><br />";
  27. echo "<span id=\"lyrics\" style=\"display:none\"><pre>" . $m->lyrics . "</pre></span>";
  28.  
  29.  
This is in addition to the use of php to query and output code that I took out.

My problem is that the function call to show(click_lyrics) does not seem to work, which I suppose is to be expected. So my question is whether there is a way to make this work in hiding the lyrics or show the lyrics within the requested data? Or perhaps a better way to code this? Let me know if more code/explanation is needed for clarity.

Thanks much in advance.
Oct 24 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
To run JavaScript returned from an Ajax request, you either have to eval it, or better still, add the script to the head of the main page:
Expand|Select|Wrap|Line Numbers
  1. var script = document.createElement("script");
  2. script.appendChild(document.createTextNode(code)); //code is a line of code
  3. var head = document.getElementsByTagName("head")[0];
  4. head.appendChild(script);
May 25 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.