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

Answer 1

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');

Answer 2

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.