How to load HTML & parse Javascript on Ajax call

[mingis]

Hey,

I've been scratching my head over this all day, would be most grateful for any help.

Basically I have two links (in an unordered list). I would like each link to load a form onto the same page.

I have no problem loading the HTML content and displaying the forms, however each form has it's own specific validation rules, tooltip popups and other elements which rely on Javascript.

However the Javascript from the external files is not processed when the new content is loaded as the DOM has already been loaded.

Therefore if I include the all the Javascript on the main page it won't be able to interact with new elements which are loaded onto the page, or if I include the Javascript on the page being loaded the Javascript simply isn't parsed.

I would be most grateful if anyone could point me in the right direction, I'm using the following code:

<script type="text/javascript">
$(document).ready(function() {	   
	var hash = window.location.hash.substr(1);
	var href = $('#select li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #FormContainer';
			$('#FormContainer').load(toLoad)
}											
	});
	$('#select li a').click(function(){
		var toLoad = $(this).attr('href')+' #FormContainer';
		$('#FormContainer').hide('fast',loadContent);
		$('#load').remove();
		$('#select').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#FormContainer').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#FormContainer').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		return false;
	});
});
</script>

  <ul id="select">
    
    <li><a href="form1.html">Form 1</a></li>
    
    <li><a href="form2.html">Form 2</a></li>
    
  </ul>
		  
		  
<div id="FormContainer"></div>

Many thanks!

have a script tag on each of the forms that you load that points to an external javascript file.

Your main page with navigation:

<ul id="nav">
<li data-url="form1.html">Form 1</li>
<li data-url="form2.html">Form 2</li>
</ul>
<div id="mainContent">

</div>

JavaScript for main page with navigation:

$(function(){
    $('#nav li').click(function(){
        $('#mainContent').load($(this).attr('data-url'));
    });
});

Template for the other pages (notice the lack of HTML, body... tags). We'll assume this is form1.html

<script src="form1.js"></script>

<div>
<form>
Input: <input type-"text" />
</form>
</div>

any validation code that you need to use specifically for form1.html is in form1.js (I tend to actually like to name the files like form1.html.js, but that's just me).

I am actually using this technique in a project I'm working on and seems to work very well.

[mingis]

Awesome - thanks so much stbuchok.

I searched around for hours looking for a solution and couldn't find anything. This works perfectly.