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

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

ASKER

You are amazing. I can't believe I didn't think of that.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo