1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Load content and Javascript with Jquery

Discussion in 'jQuery' started by mingis, Jan 25, 2012.

  1. #1
    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>
    
    Code (markup):
    Many thanks!
     
    mingis, Jan 25, 2012 IP
  2. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0