javascript alert not working in ajax loaded content

Question

Couldnt really find any working solution to this problem.

I have an alert in a a php page, that page is being loaded by AJAX. The alert doesnt work. Why?

<!DOCTYPE html>
<html>
    <head>
        <script>
            alert('test');
        </script>
    </head>

    <body>
        <?php
            $from = $_REQUEST['from'];
            $to = $_REQUEST['to'];
            $amount_per_day = 100;

            $hoursDiff = ( strtotime($to) - strtotime($from) )/(60 * 60) / 24;

            $final_amount = $amount_per_day * ($hoursDiff + 1);

            if($final_amount < 1900 && $final_amount > 0) {
                echo $final_amount . ".00 GBP";
            }
            else if($final_amount < 0) {
                echo "Days cannot overlap";
            }
            else {
                echo '0.00 GBP';
            }
        ?>
    </body>
</html>

did you tried loading on window load ? window.onload=function(){alert('test')}; ? — Prince Singh, Aug 21 '13 at 12:55
what does "that page is being loaded by AJAX" actually mean? — x29a, Aug 21 '13 at 12:58
duplicate of: [jQuery .load() call doesn't execute javascript in loaded html file](http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file) — Yair Nevet, Aug 21 '13 at 13:10

score 1 · Answer 1 · answered Aug 21 '13 at 13:01

Taking your code down to a much simpler version:

<head>
  <script>
    alert('test');
  </script>
</head>

This is being pulled in and (I assume) appended to the existing content, rather than being run directly in the browser. The browser will render all the tags appropriately, but it won't unfortunately run any scripts contained within that content.

I note that you're including content in your PHP, so it's probably safe to say that that content is what you're wanting to return and (if invalid) put in the alert(). If you're using jQuery's AJAX methods, you can write code in the .success() method instead; as a quick-and-dirty-pointer, you'll need to write code similar to:

$.ajax (url, {
  data: { from: $("#from").val(), to: $("#from").val() },
  success: function(data) {
    if (!data.isValid) {
        alert (data.message);
    } else {
        $("#amount").val(data.amount);
    }
  }
);

and then have your PHP returning a structure like:

<xml>
    <isValid>true</isValid>
    <message>My message here!</message>
    <amount>60.00</amount>
</xml>

I know this is an old post, but of all the ways I've seen people recommend doing this, I don't know why everyone doesn't just do exactly this! Work's perfectly — Dave, Mar 29 '14 at 01:57

score 0 · Answer 2 · answered Aug 21 '13 at 13:00

Assuming you are writing this markup to the page once it has been received by ajax, the <script> tag will not be parsed by the javascript interpreter.

What you will need to do is find all of the script tags in the response and eval() their contents, something like this:

var newContent = /* ajax response */;
var dummy_el = document.createElement( 'div' );

dummy_el.innerHTML = newContent;

var scripts = dummy_el.getElementsByTagName( 'script' );

for ( var i = 0; i < scripts.length; i++ ) {

  eval( scripts[ i ].innerHTML );

}

/* write newContent to page */

Works with things like alerts. Doesn't work with functions :( — f2lollpll, Sep 26 '13 at 06:58

score 0 · Answer 3 · answered Aug 21 '13 at 13:13

If you're loading the page via jQuery AJAX methods don't include <html>, <head> or <body> tags in the output of the page, so the PHP page only outputs

<script>
   alert('test');
</script>
<?php
   $from = $_REQUEST['from'];
   $to = $_REQUEST['to'];
   $amount_per_day = 100;

   $hoursDiff = ( strtotime($to) - strtotime($from) )/(60 * 60) / 24;

   $final_amount = $amount_per_day * ($hoursDiff + 1);

   if($final_amount < 1900 && $final_amount > 0) {
       echo $final_amount . ".00 GBP";
   }
   else if($final_amount < 0) {
       echo "Days cannot overlap";
   }
   else {
       echo '0.00 GBP';
   }
?>

If you're using the PHP via AJAX and via a page in the browser, then put the AJAX output and HTML output in an if clause so AJAX gets the basic code and browsing gets full HTML.

<?php if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { ?>
  <!-- basic ajax response -->
<?php } else { ?>
  <!-- full html response include <html><head><body> -->
<?php } ?>

javascript alert not working in ajax loaded content

3 Answers3