WordPress.org

Ready to get started?Download WordPress

Forums

This Ajax Code doesn't work in WordPress (7 posts)

  1. alvarols
    Member
    Posted 1 year ago #

    I'm trying to implement an ajax contact form. In a static site it works well but in WordPress in spite of that i can sent mails. The contact form stops showing the message "sending mail". I don't know what's the problem.

    Here you can see the contact form working well on a static page: http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/

    This is the Javascript code where ajax is:

    var messageDelay = 2000;  // How long to display status messages (in milliseconds)
    
    // Init the form once the document is ready
    $( init );
    
    // Initialize the form
    
    function init() {
    
      // Hide the form initially.
      // Make submitForm() the form's submit handler.
      // Position the form so it sits in the centre of the browser window.
      $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
    
      // When the "Send us an email" link is clicked:
      // 1. Fade the content out
      // 2. Display the form
      // 3. Move focus to the first field
      // 4. Prevent the link being followed
    
      $('a[href="#contactForm"]').click( function() {
        $('#content').fadeTo( 'slow', .2 );
        $('#contactForm').fadeIn( 'slow', function() {
          $('#senderName').focus();
        } )
    
        return false;
      } );
    
      // When the "Cancel" button is clicked, close the form
      $('#cancel').click( function() {
        $('#contactForm').fadeOut();
        $('#content').fadeTo( 'slow', 1 );
      } );  
    
      // When the "Escape" key is pressed, close the form
      $('#contactForm').keydown( function( event ) {
        if ( event.which == 27 ) {
          $('#contactForm').fadeOut();
          $('#content').fadeTo( 'slow', 1 );
        }
      } );
    
    }
    
    // Submit the form via Ajax
    
    function submitForm() {
      var contactForm = $(this);
    
      // Are all the fields filled in?
    
      if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
    
        // No; display a warning message and return to the form
        $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
        contactForm.fadeOut().delay(messageDelay).fadeIn();
    
      } else {
    
        // Yes; submit the form to the PHP script via Ajax
    
        $('#sendingMessage').fadeIn();
        contactForm.fadeOut();
    
        $.ajax( {
          url: contactForm.attr( 'action' ) + "?ajax=true",
          type: contactForm.attr( 'method' ),
          data: contactForm.serialize(),
          success: submitFinished
        } );
      }
    
      // Prevent the default form submission occurring
      return false;
    }
    
    // Handle the Ajax response
    
    function submitFinished( response ) {
      response = $.trim( response );
      $('#sendingMessage').fadeOut();
    
      if ( response == "success" ) {
    
        // Form submitted successfully:
        // 1. Display the success message
        // 2. Clear the form fields
        // 3. Fade the content back in
    
        $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
        $('#senderName').val( "" );
        $('#senderEmail').val( "" );
        $('#message').val( "" );
    
        $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
    
      } else {
    
        // Form submission failed: Display the failure message,
        // then redisplay the form
        $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
        $('#contactForm').delay(messageDelay+500).fadeIn();
      }
    }// JavaScript Document

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still - use the pastebin. As it stands, your code may now have been permanently damaged/corrupted by the forum's parser.]

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Have you reviewed Using_Javascript?

  3. alvarols
    Member
    Posted 1 year ago #

    Yes. Part of the js works well. But it stops when PHP have to say to the JS that the mail has been sent

  4. Andrew Bartel
    Member
    Posted 1 year ago #

    Ajax in WordPress can be tricky, I spent most of an afternoon on it when I first learned it. The major thing you have to remember is that you must pass all ajax calls to wp-admin/wp-ajax.php rather than to a page of your choosing, run function calls that echo a response rather than calling a different php file, and reference that function in an add_action. I found this article to be invaluable.

    If you're still stuck in a couple hours, we can go through it step by step.

  5. alvarols
    Member
    Posted 1 year ago #

    Are there an easiest way to learn how to use Ajax in WP?

  6. esmi
    Forum Moderator
    Posted 1 year ago #

  7. alvarols
    Member
    Posted 1 year ago #

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.