Why wont javascript work after being loading through ajax?

Question

I have a main page with this script on it to load status.html into my info-box_main div

window.onload = ajax_req('scripts/home/php/status.html', 'info-box_main');

The status.html file that is loaded looks like this.

<div id="status_update">
    <form id="status_form" method="post" action="/scripts/home/php/statusUpdate.php/">
        <textarea name="status_update" placeholder="Type Link update here. " id="status_field" ></textarea>
        <input type='submit' value='post'/>
    </form>
</div>

<div id='status-box'>
    <button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

    <script>
        function myFunction(name,job){
            alert("Welcome " + name + ", the " + job);
        }
    </script>
</div>

ajax_req function

function ajax_req(file_location, document_element)
{
var xmlhttp;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }                                 //ajax update request
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(document_element).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",  file_location ,true);
xmlhttp.send();
}

Everything works fine except for the javascript. I get an error that says the function is not defined when I try to click the button. Any help would be awesome! This is just test javascript... not the actual javascript I need

@user2930376 - Since you tagged jQuery, you can just use $.ajax() to load files. But the scripts will still not be run though. — Derek 朕會功夫
– Derek 朕會功夫, Commented Mar 14, 2014 at 20:49

Pointy · Accepted Answer · 2014-03-14 20:50:34Z

2

Setting the innerHTML property of an element to a string of HTML content including <script> tags does not run the script content in any browser I know of.

If you are indeed using jQuery, there's absolutely no reason to code up your own ajax facility, and the jQuery .load() method will handle script content for you.

$('#info-box_main').load('scripts/home/php/status.html');

edited Mar 14, 2014 at 20:50

answered Mar 14, 2014 at 20:44

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user2930376 Over a year ago

How would I change that. I am not that familiar with ajax. function ajax_req is derived from tutorials online to load the entire file.

Pointy Over a year ago

@user2930376 it has nothing really to do with ajax. Browsers simply ignore <script> content when you set the .innerHTML property.

user2930376 Over a year ago

hmmmm. That makes since. Is there any way to force it?

Derek 朕會功夫 Over a year ago

@user2930376 - Actually, AJAX isn't intended for loading pages with scripts attached. You shouldn't really do this. You can either use $.getScript to load the scripts independently, or just load everything at the beginning.

dot slash hack Over a year ago

@user2930376 Online tutorials are often outdated and plain wrong. I'd use the Mozilla reference page to read up at first, and check Douglas Crockford's video's on youtube. @ Pointy Btw browsers don't ignore script tags in the body. It's just that there's only a function declaration inside the script tag. You need to invoke it ;)

|

dot slash hack · Accepted Answer · 2014-03-14 22:53:38Z

1

This should work if you include it in a script in the header.

window.onload = function () {
    $('#info-box_main').load('scripts/home/php/status.html');
};

Alternative solution:

$(document).ready(function () {
    $('#info-box_main').load('scripts/home/php/status.html', function () {
        $("#status-box").bind("click", myFunction);
        // Seperate javascript from html, and only bind event once hmtl has loaded.
    });
};
function myFunction (name,job) {
    alert("Welcome " + name + ", the " + job);
}

If you stick to inlining your javascript, I'd consider putting the script tag before any other tag (like the button tag in your example) that references values in the script tag. That way you're sure your script tag has been evaluated before its values are being referenced.

edited Mar 14, 2014 at 22:53

answered Mar 14, 2014 at 21:22

dot slash hack

5681 gold badge5 silver badges13 bronze badges

2 Comments

user2930376 Over a year ago

That was just an example. The script I need to work absolutely has to run in the body of the document from the status.html file.

dot slash hack Over a year ago

How about adding the script to the top of the body? That way it always runs first.

Collectives™ on Stack Overflow

Why wont javascript work after being loading through ajax?

2 Answers 2

16 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

16 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related