CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
kpp
kpp

Reputation: 826

php echo javascript function after an ajax call doesnt work?

So I ran into a problem and I couldn't really find a good solution anywhere. And I'm sure more people run into this problem.

I tried to have an Ajax script call to a php-script which echoes a JavaScript function again but this function wont run or activate. It however does show up in the code if you do inspect element.

So the html and Ajax is as follows. Its dummy code since my own is a bit more complicated. so any syntax errors I made here are not the solution since this works for other parts of my code.

<html><headbodyetc>
    <div id='change'>
        //is supposed to alert or call another js function after 
        //verifying something with a database for instance.
        <button type='button' onclick='ajaxbelow();'>alert</button>
    </div>
    <script type='text/javascript'>
        function ajaxbelow(){
        //AJAX code as found on w3schools.com/php/php_ajax_php.asp
        //calls the change.php
    </script>
</etc></html>

The php code that gets called is very simple.

//This shows up in the html-code after clicking the button but doesnt run.
echo"<script type='text/javascript'>alert('doenst work?')</script>";

So I am looking for a solution which makes me able to run a JavaScript or jquery function after an Ajax call, or the main reason why this doesn't work. Since I couldn't find it.

Inb4 why call the alert via php? Because I need to verify something first with the db on the server-side in my actual code.

Upvotes: 3

Views: 2810

Answers (4)

kpp
kpp

Reputation: 826

So after combining and testing some of the comments I figured out my own answer. You cant create new javascript within the php echo. You can however echo an onload that calls an existing function. Onload only works for the following tags:

"body", "frame", "frameset", "iframe", "img", "input type="image", "link", "script", "style".

However in this case after testing some of them like "script" and "img" it still didn't work with all tags, but it did with the "style" tag. I didnt test all other tags though.

So that changed my code to:

<html><headbodyetc>
<div id='change'>
    //is supposed to alert or call another js function after 
    //verifying something with a database for instance.
    <button type='button' onclick='ajaxbelow();'>alert</button>
</div>
<script type='text/javascript'>
    //function to be called
    function test(){
        alert("now it works");
    }
    function ajaxbelow(){
    //AJAX code as found on w3schools.com/php/php_ajax_php.asp
    //calls the change.php
</script>
</etc></html>

and the php-code will then become

echo"<style onload='test();'></style>";

and now it does run the function.

edit this doesn't seem to work for IE, looking for a solution right now.

^ EDIT: By default, IE Browsers "DENY" the ability of scripts to throw prompts. So to enable this functionality, you must go to [Tools/ Internet Options/ Security / Custom Level / "Allow websites to prompt for information using scripted windows"] and enable that... Once you refresh, you will see your alert in IE :)

Upvotes: 2

Ryo na ja
Ryo na ja

Reputation: 1

Try this:

http://www.webdeveloper.com/forum/showthread.php?184830-Ajax-echo-script-problem

Basically the reason why nothing happens is because you are just sticking content in the DOM. Javascript is an event driven language and since nothing is telling the javascript to run at this point, its just sitting there doing nothing. If that code were there when the browser loaded the page, then the browser parsing the code is what would tell it to run. So, what you need to do is evaluate any scripts that come back

Upvotes: -1

TedRed
TedRed

Reputation: 427

You could use eval() to evaluate the returned javascript. The script tags wont be required if this method is used.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

Upvotes: 0

Smruti
Smruti

Reputation: 452

Just add slashes before single quote as given below

   <?php echo '<script type="text/javascript">alert(\'doenst work?\')</script>'; ?>

Upvotes: 0

Related Questions