Beginner: Javascript function call within URL from use of XMLHTTPRequest

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • vocalise
    New Member
    • Oct 2006
    • 1

    Beginner: Javascript function call within URL from use of XMLHTTPRequest

    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:
    Code:
    <script type="text/javascript" language="Javascript">
    <!--
     var req = false;
       try {
         req = new XMLHttpRequest();
       } catch (trymicrosoft) {
         try {
           req = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (othermicrosoft) {
           try {
             req = new ActiveXObject("Microsoft.XMLHTTP");
           } catch (failed) {
             req = false;
           }  
         }
       }
    
       if (!req)
         alert("Error initializing XMLHttpRequest!");
    
    function sendRequest(id, program) {
      req.open('get', 'programs?id=' + id + '&x=' + program);
      req.onreadystatechange = handleResponse;
      req.send(null);
    }
    
    function handleResponse() {
    
      if(req.readyState == 4){
        var response = req.responseText;
        var update = new Array();
    
        if(response.indexOf('||' != -1)) {
          update = response.split('||');
          document.getElementById(update[0]).innerHTML = update[1];
        }
      }
      else
      alert("loading" + ajax.readyState);
    }
    
    -->
    </script>
    
    </head>
    
    <body>
    
    <a href="javascript:sendRequest('show_music', '<? echo $x ?>');">Music</a> |
    <div id="info">
    
    </div>
    
    </body>
    </html>
    programs.php:
    Code:
    switch($_REQUEST['id']) {
    
    case 'show_music':
    		 echo "info||";
    		 $program = $_REQUEST['x'];
    		 query_music_song($program, $db);
    		 mysql_close();
    		 break;
    }
    
    <script language="JavaScript">
    
    function show(click_lyrics) {
    	if (click_lyrics.style.display == "none") {
    		click_lyrics.style.display = "";
    	} else if (click_lyrics.style.display == "") {
    		click_lyrics.style.display = "none";
    	}
    }
    
    </script>
    ...
    <snip>
    ...
    echo "<a href=\"#\" onclick=\"show(lyrics)\">Show Lyrics</a><br />";
    echo "<span id=\"lyrics\" style=\"display:none\"><pre>" . $m->lyrics . "</pre></span>";
    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_lyri cs) 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.
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    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:
    [code=javascript]var script = document.create Element("script ");
    script.appendCh ild(document.cr eateTextNode(co de)); //code is a line of code
    var head = document.getEle mentsByTagName( "head")[0];
    head.appendChil d(script);[/code]

    Comment

    Working...