Link to home
Start Free TrialLog in
Avatar of advantagec
advantagec

asked on

Attaching jQuery ajax submissions to form.

Is it possible to attach the ajaxForm plugin to content that is loaded after the DOM is in place?

To clarify, does using the AJAX jQuery statement ().load actually attach any of that loaded content (from an external php file) with ().ajaxForm calls placed inside the initial .js file?

This is my default.js file:
<script type="text/javascript">
// Nivo-slider initializations:
$(document).ready(function() {
        $('#frmContact').ajaxForm();
	$(window).load(function() {
		$('#slider').nivoSlider();
	});
	var hash = window.location.hash.substr(1);
	var href = $('#menu li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-4)){
			var toLoad = hash+'.php .content-load';
			if (toLoad=='contact.php .content-load') {
				$('.content-top').slideUp('normal');
			} else {
				$('.content-top').slideDown('normal');
			}
			$('.content-load').load(toLoad)
		}											
	});
	

	$('#menu li a').click(function(){
		var toLoad = $(this).attr('href')+' .content-load';
		$('.content-main').hide('fast',loadContent);
		$('#load').remove();
		$('#wrapper').append('<div id="load" style="margin:0 auto; text-align: center;">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
		function loadContent() {
			$('.content-load').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('.content-main').show('fast');
			$('.content-load').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#load').fadeOut('normal');
		}
		
		if (toLoad=='contact.php .content-load') {
			$('.content-top').slideUp('normal');
		} else {
			$('.content-top').slideDown('normal');
		}
		return false;
	});
});
</script>

Open in new window


... and this is the form I'm trying to submit using ().ajaxForm that is being loaded by the initial page (index.php). All that appears is a white screen, as expected when it's loaded without jQuery attached.

<div class="content-load">
    <h1>Contact</h1>
    <h5>Use the form below to contact staff.</h5><br />
    <form id="frmContact" method="post" action="/inc/contact.action.php">
        <label for="frmContact-name">Name: </label>
        <input type="text" id="frmContact-name" name="frmContact-name" size="30" /><br /><br />
        <label for="frmContact-email">Email: </label>
        <input type="text" id="frmContact-email" name="frmContact-email" size="30" /><br /><br />
        <label for="frmContact-comment">Feedback: </label>
        <textarea id="frmContact-comment" name="frmContact-comment" rows="5" cols="50"></textarea><br />
        <input type="submit" id="frmContact-submit" name="frmContact-submit" value="Send" />
    </form>
</div>

Open in new window

Avatar of advantagec
advantagec

ASKER

I have no idea why it attached Linux Security to this question. How do I remove that?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
>How do I remove that?

Click on the link << Request Attention >>

FYI there's a jQuery zone : https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/JavaScript/Jquery/
You are amazing. I can't believe I didn't think of that.