[SOLVED] Call a JS function through Ajax.

[lynxus]

Hi guys,

 

I have some ajax that populates a few divs.

 

Is it possible to somehow get it to run a javascript function depending on whats sent back from the php script?

 

Ie:

Index.php ( has ajax that calls data.php )

Data.php replys with some stuff like tables populated stuff.

This then gets put into a div on index.php

 

I have a function of index.php that can play a sound .

 

How do i get the data.php to tell index.php to run the make sound function.. ie: makesound:(blaa);

 

 

Any ideas?

 

 

Thanks

G

 

[trq]

Its all possible, but without seeing your code we'd only be guessing.

[lynxus]

OK, Heres a copy of the JS function that populates the div named sessions on index.php

 

 

<script language="javascript" type="text/javascript">
<!--
function getdata() {

  var ajaxRequest;
  try {
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer Browsers
    try {
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        // Something went wrong
        alert("Your browser broke!");
        return false;
      }
    }
  }
  // Create a function that will receive data sent from the server
  ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState == 4) {
      var ajaxDisplay = document.getElementById('sessions');
      var result = ajaxRequest.responseText;
          ajaxDisplay.innerHTML = result;
    }
  }
        var nocache = Math.random();
        ajaxRequest.open("GET", "agetdata.php?nocache=" + nocache, true);

	 ajaxRequest.send(null);
}
//-->
</script>

 

Heres the script that plays a sount

 

<applet code="AudioPlay.class" id="Audio1" width="40" height="40">
  <param name="image" value="trans.gif">
  <param name="audio" value="message.wav">
</applet>


<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>

 

I need to somehow get agetdata.php to send something through to index.php that then calls EvalSound();

 

Any ideas?

 

Thanks

G

[Psycho]

Kinda hard to be specific based upon what you provided, but I think I can get you going inthe right direction.

 

By looking at your code it appears the server-side script is returning back some text that is being populated into the page. But, you state that "sometimes" you want that response to also initiate a call to another JS function. As long as you can make that determination in the server-side code this is a trivial task.

 

In the server-side code you simply need to add a "flag" to the response. The client-side code will then parse the response to check for the flag and, if it exists, will run the alternative function. Below is some mock code to show what I mean.

 

PHP Server-side code

<?php

$AJAXInput = $_GET['input'];
$responseText = '';

//Perform some logic to determine if the sound should be played
if($foo == 'bar')
{
    $responseText .= "[PLAY]";
}

//Perform the actions to generate the response text
$responseText .= "Here is the regualr text that is generated";

echo $responseText;

?>

 

Revised AJAX code

  // Create a function that will receive data sent from the server
  ajaxRequest.onreadystatechange = function() {
    if(ajaxRequest.readyState == 4) {
      var ajaxDisplay = document.getElementById('sessions');
      var result = ajaxRequest.responseText;
//=================================
      //See if response text has the flag
      if (result.substr(0,6) == '[PLAY]') {
        //Remove the flag from the response text
        result = result.substr(6);
        //Play the sound
        soundobj = document.getElementById('IDOfSoundObject);
        EvalSound(soundobj);
      }
//=================================
      ajaxDisplay.innerHTML = result;
    }
  }

[lynxus]

That looks quite awesome and looking over the code it makes sense and yeah should work.

 

I ant wait to give this a try.

 

Will post pack with the results..

 

<Thread paused >

[rhodesa]

the only way to have the data.php call javascript in index.php is to have the AJAX code parse the response for JavaScript. save yourself the trouble and use jQuery (it does this for you). Here is all your code simplified with jQuery:

 

index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
<!--
function getdata() {
  $('#sessions').load('agetdata.php?_='+Math.random());
}
//-->
</script>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>
<applet code="AudioPlay.class" id="Audio1" width="40" height="40">
  <param name="image" value="trans.gif">
  <param name="audio" value="message.wav">
</applet>
<div id="sessions"></div>

 

data.php

<script type="text/javascript">EvalSound('Audio1')</script>

[lynxus]

Are your serious ?

 

function getdata() {

  $('#sessions').load('agetdata.php?_='+Math.random());

}

 

Does the same as what i had before lol ?

Wow.

 

That is quite cool.

 

Im assuming:

  $('#sessions') - Finds the html id sessions

 

.load - requests data..

 

('agetdata.php?_='+Math.random()); -- The url.

 

I would assume with the getdata.php, Can i also incluse other stuff....

 

Would:

 

getdata.php

 

<?php

 

if sound = 1 :

echo '

<script type="text/javascript">EvalSound('Audio1')</script>

';

 

echo '

The rest of my normal HT|Ml output from the script

';

 

?>

[lynxus]

actually , if that works that would be ace.

 

I mite just make a new function just for the sound checker and have a new soundchecker.php that only worrys about sending the jscript if required

 

TY all.

Ill give both ideas a try.

 

Sweeeeeeeeeeeeeeeeeeeeet

[lynxus]

the only way to have the data.php call javascript in index.php is to have the AJAX code parse the response for JavaScript. save yourself the trouble and use jQuery (it does this for you). Here is all your code simplified with jQuery:

 

index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
<!--
function getdata() {
  $('#sessions').load('agetdata.php?_='+Math.random());
}
//-->
</script>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>
<applet code="AudioPlay.class" id="Audio1" width="40" height="40">
  <param name="image" value="trans.gif">
  <param name="audio" value="message.wav">
</applet>
<div id="sessions"></div>

 

data.php

<script type="text/javascript">EvalSound('Audio1')</script>

 

 

WORKS PERFECTLY!

Thank you.

[rhodesa]

welcome to wonderful world of jQuery...were JavaScript isn't a pain in the ass