...

View Full Version : Ajax call and element fadeIn problems



Jimather
02-11-2011, 06:15 PM
Hi, so i'm having a few problems implementing some pretty basic jquery functionality. I'm quite new to jQuery so it may well be that I'm missing something pretty basic here and I suspect I am.

I have three problems which I feel are probably interlinked.

One: fadeOut of the page content works fine but the fade back in does not work, it simply jumps back in. I have tried explicitly hiding it before the fade but then it simply doesn't come back at all.

What is most frustrating is that this worked perfectly on my computer yet not online.

Solved: I simply validated the website through the W3C service.


Two: My contact form is not working, See second post.

Three: Internet explorer and firefox simply return a blank page with the word 'false' when I try the ajax call to the contact.php script and does not display the correct session security code that it should be validating against for the captcha image.

The site can be viewed and tested here: http://nomoredrilling.org.uk/Alexanders/index.php (http://nomoredrilling.org.uk/Alexanders/index.php#)

Sorry if this all seems like a bit much. I understand if noone bothers replying but I am stumped so this is worth a shot.

this is the contact.php script and the javascript and jquery should all be viewable in the source of the page:


<?php
session_start();
echo '

<div id="contentLeft" class="content">
</div>
<div id="contentMid" class="content"> ';

function spamScrubber($value) {

$value = str_replace(array('to:', 'cc:', 'bcc:', 'content-type:', 'mime-version:', 'multipart-mixed:','content-transfer-encoding:'), '<REPLACED FOR SECURITY>', $value);


$value = str_replace(array("\r", "\n", "%0a", "%0d"), ' ', $value);

return trim($value);
}

$inc = 0;

if (isset($_POST['submitted'])) {


if(($_SESSION['security_code'] == $_POST['security_code']) && (!empty($_SESSION['security_code'])) ) {


$scrubbed = array_map('spamScrubber',$_POST);

$body = "Name: {$scrubbed['name']}\n\nComments: {$scrubbed['comments']}\n\nTel: {$scrubbed['tel']}";

$body = wordwrap($body, 70);

mail('mikewalker1@hotmail.co.uk','Contact Form Submission', $body, "From: {$scrubbed['email']}");

echo "<h4>Thankyou for Contacting Alexanders</h4>

<p>We have received the following details:</p>

<p>Name: {$scrubbed['name']}</p>";

if ($scrubbed['tel']) {

echo "<p>Telephone Number: {$scrubbed['tel']}</p>";

} else {

echo "<p> You did not enter a telephone number</p>";

}

echo "<p>Email: {$scrubbed['email']}</p>

<p>Your Comments:</p>

<p><textarea name='comments' readonly='readonly' id='comments' size='30' rows='4' cols='28'>{$scrubbed['comments']}</textarea></p>

<h4>You will be contacted as soon as reasonably possible</h4>

<h5> Certain words or characters may have been removed for security reasons.
This should not unduely affect a legitimate message.</h5>";


unset($_SESSION['security_code']);

} else {
unset($_SESSION['security_code']);
$inc = 1;
}

}
if (!isset($_POST['submitted']) || $inc == 1) { echo '


<div id="contentHeader">
<img src="images/contactLogo.png">
</div>

<div id="formDiv">
<form id="contactForm" action="javascript: submitForm()">';


echo '

<table>
<tr>
<td>
Name*:
</td>
<td>
Telephone (optional):
</td>
</tr>
<tr>
<td>
<input id="name" onBlur="javascript:validateName(this);" onChange="javascript:validateName(this);"type="text" name="name" size="24" maxlength="60" value="';

if (isset($_POST['name'])) echo $_POST['name'];

echo '"/>
</td>
<td>
<input type="text" id="tel" name="tel" onBlur="javascript:validatePhoneNo(this);" onChange="javascript:validatePhoneNo(this);" size="12" maxlength="12" value="';

if (isset($_POST['tel'])) echo $_POST['tel'];

echo '"/>
</td>
</tr>
<tr>
<th colspan="2">
Email Address*:
</th>
</tr>
<tr>
<th colspan="2">
<input type="text" id="email" name="email" onBlur="javascript:validateEmail(this)" onChange="javascript:validateEmail(this)" size="30" maxlength="80" value="';

if (isset($_POST['email'])) echo $_POST['email'];

echo '"/>
</th>
</tr>
<tr>
<th colspan="2">
Your Enquries and Comments*:
</th>
</tr>
<tr>
<th colspan="2">
<textarea name="comments" id="comments" onBlur="javascript:validateComment(this)" onChange="javascript:validateComment(this)" size="30" rows="3" cols="28">';



if (isset($_POST['comments'])) {

$_POST['comments'] = trim($_POST['comments']);
echo $_POST['comments'];
}

echo '</textarea>
</th>
</tr>
<tr>
<td id="captcha">
<img src="includes/CaptchaSecurityImages.php?width=100&height=40&characters=5" alt="captcha" />
</td>
<td>
<h5>Enter The Security Code*</h5>

<input onKeyUp="javascript:validateCode(this);" onBlur="javascript:validateCode(this);" onChange="javascript:validateCode(this);"id="security_code" name="security_code" type="text" size="5" />
</td>

</tr>
<tr>
<td id="submit">
<input type="submit" class="button" id="submitButton" disabled="disabled" name="Submit" value="Send" />
</td>
<td>
<h5>*Denotes Required Input</h5>';

echo'
</td>

</table>

<input type="hidden" name="submitted" value="true" />
</form> ';
//$_POST = array();
};
echo '

<script type="text/javascript">
validateAll();
</script>

</div>
</div>

<div id="contentRight" class="content">
<div id="errorBox"> ';


// Echoing these values for debugging purposes only

echo"<p>POST code:";

if (isset($_POST['security_code'])){

echo "{$_POST['security_code']}";

} else { echo "empty"; };

echo "</p>";

echo"<p>SESSION code:";

if (empty($_SESSION['security_code']))

{
echo "empty";
} else { echo " {$_SESSION['security_code']}";};

echo "</p>";

if ($inc == 1) {

echo ' <p class="error">Sorry but the security code did not match, please try again.</p> ';

}

echo '

</div>
</div> ';


?>

Thankyou so much if you can help :)

Jimather
02-11-2011, 08:20 PM
Ok so I have worked out why the functions are being called three times.


this line: $('.content').fadeOut(1800, function(){

seems to be actually acting as a kind of for each loop. Performing the function on each element it finds with a class of content seperately. (there are three divs with a class of content on my page).

How can I adjust the code to prevent this from happening, and simply grab eveything with a class of content, and perform the function on them as a whole and only once ?


function submitForm(){
$('.content').fadeOut(1800, function(){
var html = $.ajax({
url: "includes/contact.php",
type: "POST",
data: $("#contactForm").serialize(),
success: function(data){
console.log(data);
$(document).ready(function () { document.getElementById('content').innerHTML = data; fade(); });
}

});


});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum