Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts

    Ajax call and element fadeIn problems

    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

    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 Code:
    <?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($body70);
          
          
    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
    Last edited by Jimather; 02-11-2011 at 09:24 PM.

  • #2
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    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 ?

    Code:
    	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(); });
    				}
    
    			}); 
    
    
    		});


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •