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

Linux SecurityJavaScriptPHPjQuery

Avatar of undefined
Last Comment
advantagec

8/22/2022 - Mon
advantagec

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
leakim971

>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/
advantagec

ASKER
You are amazing. I can't believe I didn't think of that.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23