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:
... 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.
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>
... 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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
>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/
Click on the link << Request Attention >>
FYI there's a jQuery zone : https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/JavaScript/Jquery/
ASKER
You are amazing. I can't believe I didn't think of that.
ASKER