WordPress and Ajax

WORDPRESS & AJAX Presented by Ronald Huereca at WordCamp Philly 2010 Presentation online at: http://www.wpajax.com/code

Who Am I? - Author of the WordPress and Ajax e-book http://www.wpajax.com - Plugin author of Ajax Edit Comments http://www.ajaxeditcomments.com - WordPress developer at WebDevStudios http://www.webdevstudios.com And third most im P ortant person in WordPress (important with a capital P , dangit)

What is Ajax ? » What the heck does that mean? When you click on a rating, an event occurs The event and data is parsed and an Ajax request is sent The server processes the request, sends back a response, And the output is shown to the user

WordPress and Ajax Foundation » What is needed? ,[object Object],[object Object],[object Object],[object Object]

WordPress and Ajax Foundation » Loading Scripts » wp_enqueue_script WordPress function: wp_enqueue_script prevents duplicate scripts and allows for a predictable loading order via dependencies <?php wp_enqueue_script ( 'handle', 'src', 'deps', 'ver', 'in_footer' ); ?> handle - Unique name for the script src - Location of the script deps - Array of dependencies (uses handler names) ver - Version of the script (string) in_footer - Load the scripts in the footer (boolean, default is false) wp_enqueue_script ( 'my_script', plugins_url ( 'my_plugin/my_script.js’ ), array ( 'jquery', 'another_script' ), '1.0.0', true );

WordPress and Ajax Foundation » Loading Scripts » wp_print_scripts WordPress action: wp_print_scripts allows you to print scripts for the front-end and admin area <?php add_action ( 'wp_print_scripts' , 'add_scripts' ) ; function add_scripts () { if ( is_admin () ) return ; wp_enqueue_script ( 'jquery ' ) ; } ?> Function name needs to be unique Loads jQuery on every front-end page

WordPress and Ajax Foundation » Loading Scripts » admin_print_scripts WordPress action: admin_print_scripts allows you to print scripts for admin area <?php add_action ( 'admin_print_scripts' , 'add_admin_scripts' ) ; function add_admin_scripts () { wp_enqueue_script ( 'jquery ' ) ; } ?> Function name needs to be unique Loads jQuery on every admin page

WordPress and Ajax Foundation » Script Localization » wp_localize_script WordPress function: wp_localize_script allows you to capture dynamic PHP data for use in JavaScript wp_localize_script ( 'javascript_handle' , 'javascript_object_name' , 'l10n' ) ; Object name to be created in JavaScript Same handler name used for wp_enqueue_script An associative array of localized strings

WordPress and Ajax Foundation » Script Localization » wp_localize_script WordPress function: wp_localize_script example <?php add_action ( 'wp_print_scripts' , 'add_scripts' ) ; function add_scripts (){ wp_enqueue_script ( 'wp_grins' , plugins_url ( 'wp-grins-lite/js/wp-grins.js' ) , array ( 'jquery' ) , 1 . 0 ) ; $localized_variables = array ( 'Ajax_Url' = > admin_url ( 'admin-ajax.php' ) , 'Location' = > 'post' , 'Manual' = > 'false' ) ; wp_localize_script ( 'wp_grins' , 'wpgrins' , $localized_variables ) ; } ?> Object name to be created in JavaScript Localized variables An associative array of localized strings

WordPress and Ajax Foundation » Script Localization » wp_localize_script WordPress function: wp_localize_script allows you to capture dynamic PHP data for use in JavaScript <script type= 'text/javascript' > /* <![CDATA[ */ var wpgrins = { Ajax_Url : "http://localhost:8888/ronalfy/wp-admin/admin-ajax.php", Location : "post", Manual : "false" } ; /* ]]> */ </script> <script type= 'text/javascript' src= 'http://localhost:8888/ronalfy/wp-content/plugins/wp-grins-lite/js/wp-grins.js?ver=1' ></script> The resulting HTML source: jQuery ( document ) .ready ( function () { alert ( wpgrins.Ajax_Url ) ; }) ; Localization used in JavaScript

WordPress and Ajax Foundation » Loading Styles » wp_enqueue_style WordPress function: wp_enqueue_style prevents duplicate styles and allows for a predictable loading order via dependencies <?php wp_enqueue_style ( 'handle' , 'src' , 'deps' , 'ver' , 'media' ) ; ?> handle - Unique name for the style src - Location of the style deps - Array of dependencies (uses handler names) ver - Version of the style (string) media - Media type the stylesheet is defined for (e.g., screen, print, all) wp_enqueue_style ( 'my_css' , plugins_url ( 'my_plugin/my_css.css' ) , array ( 'another_css_file' ) , '1.0.0' , 'screen' ) ;

WordPress and Ajax Foundation » Loading Styles » wp_print_styles WordPress action: wp_print_styles allows you to print styles for the front-end and admin area <?php add_action ( 'wp_print_styles' , 'my_styles_callback' ) ; function my_styles_callback () { wp_enqueue_style ( 'my_css' , plugins_url ( 'my_plugin/my_css.css' ) , array ( 'another_css_file' ) , '1.0.0' , 'screen' ) ; } ?> Function name needs to be unique

WordPress and Ajax Foundation » Loading Styles » admin_print_styles WordPress action: admin_print_styles allows you to print styles for the admin area <?php add_action ( 'admin_print_styles' , 'admin_styles_callback' ) ; function admin_styles_callback () { wp_enqueue_style ( 'my_css' , plugins_url ( 'my_plugin/my_css.css' ) , array ( 'another_css_file' ) , '1.0.0' , 'screen' ) ; } ?> Function name needs to be unique

WordPress and Ajax Foundation » Page Detection What is page detection? Allows scripts and styles to load only when needed. Why is page detection important? ,[object Object],[object Object],[object Object]

WordPress and Ajax Foundation » Page Detection » Front-end WordPress Conditionals quick functions that alert you to a specific page, post type, or area of the site is_home() - Are we on the home page? is_page() - Are we on a page template? is_single() - Are we on a post template? is_admin() - Are we in the admin area? comments_open() - Are comments open for a post? And much, much more: http://codex.wordpress.org/Conditional_Tags

WordPress and Ajax Foundation » Page Detection » Front-end Example: Loading Scripts Only When There are Comments <?php add_action ( 'wp_print_scripts' , 'my_plugin_load_scripts' ) ; function my_plugin_load_scripts () { global $post; if ( ! ( is_single () || is_page () ) || !is_object ( $post ) || $post -> comment_count == 0 ) return ; wp_enqueue_script ( 'jquery' ) ; } ?> ,[object Object],[object Object],[object Object]

WordPress and Ajax Foundation » Page Detection » Admin Area WordPress actions: admin_print_scripts and admin_print_styles Page detection can be performed by adding the page name as a suffix for both actions - admin_print_scripts- suffix (e.g., admin_print_scripts- post.php ) - admin_print_styles- suffix (e.g., admin_print_styles- comment.php )

WordPress and Ajax Foundation » Page Detection » Admin Area Example: Adding a Script When Editing or Creating a Post uses post.php (when editing a post) and post-new.php (when creating a post) <?php add_action ( 'admin_print_scripts-post.php' , 'my_plugin_load_scripts' ) ; add_action ( 'admin_print_scripts-post-new.php' , 'my_plugin_load_scripts' ) ; function my_plugin_load_scripts () { if ( get_post_type () == 'post' ) wp_enqueue_script ( 'jquery' ) ; } ?> Please note that admin_print_scripts and admin_print_styles use the same suffix format.

WordPress and Ajax Foundation » Page Detection » Admin Area Example: Page Detection for a Settings Page <?php add_action ( 'admin_menu' , 'my_admin_menu' ) ; //Function to initialize the admin menu function my_admin_menu () { $page_hook = add_menu_page ( "My Plugin Name Options" , "My Plugin" , 'administrator' , 'my_plugin' , 'my_plugin_admin_settings' ) ; add_action ( "admin_print_scripts-$page_hook" , 'my_plugin_load_scripts' ) ; } //Build the admin menu interface function my_plugin_admin_settings () { echo "My Plugin Page" ; } //Load our scripts function my_plugin_load_scripts () { wp_enqueue_script ( 'jquery' ) ; } ?> When you add a menu page, the function returns a page hook you can use as a suffix for admin_print_scripts and admin_print_styles More menu hooks are available here: http://codex.wordpress.org/Adding_Administration_Menus

WordPress and Ajax Foundation » Admin Ajax WordPress action: wp_ajax <?php add_action ( 'wp_ajax_getcomment' , 'callback_function' ) ; add_action ( 'wp_ajax_nopriv_getcomment' , 'callback_function' ) ; function callback_function () { //process data and send Ajax response exit ; } ?> The wp_ajax WordPress action takes an Ajax action name (e.g., getcomment ) and optionally a nopriv suffix for users that aren’t logged in. More information: http://codex.wordpress.org/AJAX_in_Plugins The Ajax action is passed via JavaScript to admin-ajax.php , which alerts WordPress to run the callback function when the action is detected. A common mis-conception is that admin-ajax.php is used for just admin Ajax requests. You can use admin-ajax.php in non-admin areas as well.

WordPress and Ajax Foundation » admin-ajax.php WordPress file: wp-admin/admin-ajax.php The admin-ajax.php file is WordPress’ built-in Ajax processer.

WordPress and Ajax Foundation » WP_Ajax_Response WordPress class: WP_Ajax_Response <?php add_action ( 'wp_ajax_getcomment' , 'callback_function' ) ; add_action ( 'wp_ajax_nopriv_getcomment' , 'callback_function' ) ; function callback_function () { $comment_count = wp_count_comments () ; $response = new WP_Ajax_Response () ; $response -> add ( array ( 'what' = > 'getcomments' , 'supplemental' = > array ( 'awaiting_moderation' = > number_format ( $comment_count -> moderated ) , 'approved' = > number_format ( $comment_count -> approved ) , 'spam' = > number_format ( $comment_count -> spam ) , 'trashed' = > number_format ( $comment_count -> trash ) ) )) ; $response -> send () ; exit ; } ?> The WP_Ajax_Response class is useful for returning a XML-formatted document back into JavaScript for parsing. It’s extremely useful.

WordPress and Ajax Foundation » WP_Ajax_Response XML Format <wp_ajax> <response action = "getcomment_0" > <getcomments id = "0" position = "1" > <response_data> <![CDATA[]]> </response_data> <supplemental> <awaiting_moderation> <![CDATA[0]]> </awaiting_moderation> <approved> <![CDATA[2,818]]> </approved> <spam> <![CDATA[636]]> </spam> <trashed> <![CDATA[0]]> </trashed> </supplemental> </getcomments> </response> </wp_ajax> The WP_Ajax_Response class sends back an XML document for use in JavaScript

WordPress and Ajax Foundation » WP_Ajax_Response » JavaScript Use JavaScript object: wpAjax Uses a script handler of wp-ajax-response wp_enqueue_script ( 'my_script' , get_stylesheet_directory_uri () . '/my_script.js' , array ( "jquery" , "wp-ajax-response" ) , "2.3" ) ; The wpAjax JavaScript class is useful for parsing the Ajax response The wp-ajax-response dependency

WordPress and Ajax Foundation » WP_Ajax_Response » JavaScript Use Example: wpAjax parsing in JavaScript var res = wpAjax.parseAjaxResponse ( ajax_response_data ,'ajax-response' ) ; Variable res now has a structure similar to:

WordPress and Ajax Foundation » WP_Ajax_Response » JavaScript Use Example: jQuery parsing of parsed data var res = wpAjax.parseAjaxResponse ( ajax_response_data ,'ajax-response' ) ; jQuery.each ( res.responses , function () { if (this .what == 'getcomments' ) { var moderation_count = this .supplemental.awaiting_moderation; var approved_count = this .supplemental.approved; var spam_count = this .supplemental.spam; var trashed_count = this .supplemental.trashed; } //end if }) ; //end each The wpAjax object makes it super easy to parse an Ajax response into variables

Ajax Registration Form Let’s create an Ajax registration form

Ajax Registration Form » Features Features we want ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Plugin File Structure Registration form will be written as a plugin ,[object Object],[object Object],[object Object]

Ajax Registration Form » Class Structure Class structure for ajax-registration.php <?php class Ajax_Registration { //Constructors function Ajax_Registration () { $this -> __construct () ; } function __construct () { //actions and shortcode } //Add the registration script to a page function add_scripts () { } //Add Styles for the form function add_styles () { } function ajax_process_registration () { } //end ajax_process_registration //Perform shortcode page detection function has_shortcode () { } //Add/save shortcode information function post_save ( $post_id ) { } //end post_save //Print out the shortcode function rform_shortcode ( ) { } } //end class //Instantiate $ajaxregistration = new Ajax_Registration () ; ?>

Ajax Registration Form » Main Class » The Constructor The class constructor will add all the actions and shortcode callbacks we need function __construct () { //add scripts add_action ( 'wp_print_scripts' , array ( & $this, 'add_scripts' ) ) ; //add css add_action ( 'wp_print_styles' , array ( & $this, 'add_styles' ) ) ; //ajax add_action ( 'wp_ajax_nopriv_submitajaxregistration' , array ( & $this, 'ajax_process_registration' ) ) ; add_action ( 'wp_ajax_submitajaxregistration' , array ( & $this, 'ajax_process_registration' ) ) ; //when saving a post add_action ( 'save_post' , array ( & $this, 'post_save' ) ) ; //shortcode add_shortcode ( 'rform' , array ( & $this, 'rform_shortcode' ) ) ; } ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » Shortcode Creation Class method: rform_shortcode Returns the form data as a string function rform_shortcode ( ) { $return = "<form id='ajax-registration-form'>" ; $return . = wp_nonce_field ( 'submit_ajax-registration' , '_registration_nonce' , true , false ) ; $return . = "<ul id='ajax-registration-list'>" ; $return . = "<li><label for='firstname'>First name: </label><input type='text' size='30' name='firstname' id='firstname' /></li>" ; $return . = "<li><label for='lastname'>Last name: </label><input type='text' size='30' name='lastname' id='lastname' /></li>" ; $return . = "<li><label for='username'>Desired Username: </label><input type='text' size='30' name='username' id='username' /></li>" ; $return . = "<li><label for='email'>E-mail Address: </label><input type='text' size='30' name='email' id='email' /></li>" ; $return . = "<li><input type='submit' value='Submit Registration' name='ajax-submit' id='ajax-submit' /></li>" ; $return . = "<li id='registration-status-message'></li>" ; $return . = "</ul>" ; $return . = "</form>" ; return $return; } ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » Shortcode Creation Adding the shortcode to a post

Ajax Registration Form » Main Class » Page Detection Class method: post_save Find out if the post has the rform shortcode, and set a custom field if so function post_save ( $post_id ) { //Retrieve the post object - If a revision, get the original post ID $revision = wp_is_post_revision ( $post_id ) ; if ( $revision ) $post_id = $revision; $post = get_post ( $post_id ) ; //Perform a test for a shortcode in the post's content preg_match ( '/rform[^]*/is' , $post -> post_content, $matches ) ; if ( count ( $matches ) == 0 ) { delete_post_meta ( $post_id, '_ajax_registration' ) ; } else { update_post_meta ( $post_id, '_ajax_registration' , '1' ) ; } } //end post_save ,[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » Page Detection Class method: has_shortcode A conditional that lets us know if the post has the rform shortcode or not //Returns true if a post has the rform shortcode, false if not function has_shortcode () { global $post; if ( !is_object ( $post ) ) return false ; if ( get_post_meta ( $post -> ID, '_ajax_registration' , true ) ) return true ; else return false ; } ,[object Object],[object Object]

Ajax Registration Form » Main Class » Add Scripts and Localization Class method: add_scripts Add the registration script file and some JavaScript localization //Add the registration script to a page function add_scripts () { if ( is_admin () || ! $this -> has_shortcode () ) return ; wp_enqueue_script ( 'ajax-registration-js' , plugins_url ( 'js/registration.js' , __FILE__ ) , array ( 'jquery' , 'wp-ajax-response' ) , '1.0' ) ; wp_localize_script ( 'ajax-registration-js' , 'ajaxregistration' , array ( 'Ajax_Url' = > admin_url ( 'admin-ajax.php' ) ) ) ; } ,[object Object],[object Object]

Ajax Registration Form » Main Class » Add Styles Class method: add_styles Add the registration CSS file function add_styles () { if ( is_admin () || ! $this -> has_shortcode () ) return ; wp_enqueue_style ( 'ajax-registration-css' , plugins_url ( 'css/registration.css' , __FILE__ ) ) ; } Uses conditionals is_admin and has_shortcode for page detection. Will only load on the front-end where the shortcode exists in the page’s content.

Ajax Registration Form » Main Class » The Ajax Processor Class method: ajax_process_registration Processes the Ajax request and returns an Ajax response function ajax_process_registration () { //Verify the nonce check_ajax_referer ( 'submit_ajax-registration' ) ; exit ; } //end ajax_process_registration ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Parsing the data //Need registration.php for data validation require_once ( ABSPATH . WPINC . '/registration.php' ) ; //Get post data if ( !isset ( $_POST [ 'ajax_form_data' ] ) ) die ( "-1" ) ; parse_str ( $_POST [ 'ajax_form_data' ] , $form_data ) ; ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: Sanitizing the entries Uses the sanitize_text_field function to sanitize the form inputs //Get the form fields $firstname = sanitize_text_field ( $form_data [ 'firstname' ] ) ; $lastname = sanitize_text_field ( $form_data [ 'lastname' ] ) ; $username = sanitize_text_field ( $form_data [ 'username' ] ) ; $email = sanitize_text_field ( $form_data [ 'email' ] ) ; $error_response = $success_response = new WP_Ajax_Response () ; $errors = new WP_Error () ; ,[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: Checking required entries We’ll use the WP_Error instance to add any errors if any fields are empty //Start data validation on firstname/lastname //Check required fields if ( empty ( $firstname ) ) $errors -> add ( 'firstname' , 'You must fill out a first name.' , 'firstname' ) ; if ( empty ( $lastname ) ) $errors -> add ( 'lastname' , 'You must fill out a last name.' ) ; if ( empty ( $username ) ) $errors -> add ( 'username' , 'You must fill out a user name.' ) ; if ( empty ( $email ) ) $errors -> add ( 'email' , 'You must fill out an e-mail address.' ) ; The first argument in $errors->add is an error code. However, the code also doubles for the form input ID that will be used in JavaScript.

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: If any errors, send a response We’ll be using the WP_Ajax_Response instance to return a response if errors are present //If required fields aren't filled out, send response if ( count ( $errors -> get_error_codes () ) > 0 ) { $error_response -> add ( array ( 'what' = > 'errors' , 'id' = > $errors )) ; $error_response -> send () ; exit ; } ,[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: Check for a valid username //Add usernames we don't want used $invalid_usernames = array ( 'admin' ) ; //Do username validation $username = sanitize_user ( $username ) ; if ( ! validate_username ( $username ) || in_array ( $username, $invalid_usernames ) ) { $errors -> add ( 'username' , 'Username is invalid.' ) ; } if ( username_exists ( $username ) ) { $errors -> add ( 'username' , 'Username already exists.' ) ; } ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: Check for a valid e-mail address //Do e-mail address validation if ( ! is_email ( $email ) ) { $errors -> add ( 'email' , 'E-mail address is invalid.' ) ; } if ( email_exists ( $email )) { $errors -> add ( 'email' , 'E-mail address is already in use.' ) ; } ,[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Data Validation: If any further errors, send a response We’ll be using the WP_Ajax_Response instance to return a response if errors are present //If required fields aren't filled out, send response if ( count ( $errors -> get_error_codes () ) > 0 ) { $error_response -> add ( array ( 'what' = > 'errors' , 'id' = > $errors )) ; $error_response -> send () ; exit ; } ,[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Create the User Object All data has been validated. Create the User object. //Everything has been validated, proceed with creating the user //Create the user $user_pass = wp_generate_password () ; $user = array ( 'user_login' = > $username, 'user_pass' = > $user_pass, 'first_name' = > $firstname, 'last_name' = > $lastname, 'user_email' = > $email ) ; $user_id = wp_insert_user ( $user ) ; ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Send the Registration E-mail User has been created. Send a registration e-mail. /*Send e-mail to admin and new user - You could create your own e-mail instead of using this function*/ wp_new_user_notification ( $user_id, $user_pass ) ; ,[object Object],[object Object]

Ajax Registration Form » Main Class » ajax_process_registration Sending the Ajax Response User has been created. Let’s send back an Ajax response. //Send back a response $success_response -> add ( array ( 'what' = > 'object' , 'data' = > 'User registration successful. Please check your e-mail.' )) ; $success_response -> send () ; exit ; } //end ajax_process_registration The data field in the Ajax response is used for sending a string message back to JavaScript. This message will be used in our form’s status area.

Ajax Registration Form » The CSS » registration.css Adding the CSS Code Code will go into the registration.css file #ajax-registration-list { list-style-type : none ; } #ajax-registration-list label { display : block ; } #ajax-registration-form .error { background-color : #FFEBE8 ; border : 1px solid #CC0000 ; } #ajax-registration-form .success { background-color : #FFFFE0 ; border : 1px solid #E6DB55 ; } Basic CSS is used here for the form layout and the error/status messages.

Ajax Registration Form » The JavaScript » registration.js JavaScript structure A jQuery namespace called registrationform is used jQuery ( document ) .ready ( function () { var $ = jQuery; $.registrationform = { init : function () { } } ; //end .registrationform $.registrationform.init () ; }) ; ,[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js JavaScript function: init - Capturing the submit event The form has an ID of ajax-registration-form, which we’ll use to capture the submit event init : function () { $ ( "#ajax-registration-form" ) . submit ( function () { return false ; }) ; } The form ID ( ajax-registration-form ) is used with the jQuery submit event.

Ajax Registration Form » The JavaScript » registration.js Form Submit Event: Clearing any error messages In the event the form has previously been submitted, we’ll need to clear all previous messages $ ( "#ajax-registration-form" ) . submit ( function () { //Clear all form errors $ ( '#ajax-registration-form input' ) .removeClass ( 'error' ) ; //Update status message $ ( "#registration-status-message" ) .removeClass ( 'error' ) .addClass ( 'success' ) .html ( 'Sending...' ) ; //Disable submit button $ ( '#ajax-submit' ) .attr ( "disabled", "disabled" ) ; return false ; }) ; ,[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Form Submit Event: Parse the Form Data We’ll use jQuery to parse the form data into a string we can pass via Ajax //Disable submit button $ ( '#ajax-submit' ) .attr ( "disabled", "disabled" ) ; //Serialize form data var form_data = $ ( '#ajax-registration-form input' ) .serializeArray () ; form_data = $.param ( form_data ) ; return false ; ,[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Form Submit Event: Submit the Ajax Request form_data = $.param ( form_data ) ; //Submit ajax request $.post ( ajaxregistration.Ajax_Url , { action : 'submitajaxregistration', ajax_form_data : form_data , _ajax_nonce : $ ( '#_registration_nonce' ) .val () } , function ( data ){ //Success code goes here } ) ; return false ; ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response function ( data ){ var res = wpAjax.parseAjaxResponse ( data , 'ajax-response' ) ; if ( res.errors ) { //errors } else { //no errors } } ,[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - The parsed data (if errors are detected)

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - The errors data

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - The errors data Iterate through each response, and iterate through each error within the response if ( res.errors ) { //form errors //re-enable submit button $ ( '#ajax-submit' ) .removeAttr ( "disabled" ) ; var html = '' ; $.each ( res.responses , function () { $.each (this .errors , function () { $ ( "#" + this .code ) .addClass ( 'error' ) ; html = html + this .message + '<br />' ; }) ; }) ; $ ( "#registration-status-message" ) .removeClass ( 'success' ) .addClass ( 'error' ) .html ( html ) ; } ,[object Object],[object Object],[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - Example Output If there are any errors, this is what you might see

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - Success If there are no errors, we parse the data in the success portion of the conditional } else { //no errors $.each ( res.responses , function () { $ ( "#registration-status-message" ) .addClass ( 'success' ) .html (this .data ) ; return ; }) ; } ,[object Object],[object Object]

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - Success Output If there aren’t any errors, this is what you might see

Ajax Registration Form » The JavaScript » registration.js Parsing the Ajax Response - Full Function Code function ( data ){ var res = wpAjax.parseAjaxResponse ( data , 'ajax-response' ) ; if ( res.errors ) { //form errors //re-enable submit button $ ( '#ajax-submit' ) .removeAttr ( "disabled" ) ; var html = '' ; $.each ( res.responses , function () { $.each (this .errors , function () { $ ( "#" + this .code ) .addClass ( 'error' ) ; html = html + this .message + '<br />' ; }) ; }) ; $ ( "#registration-status-message" ) .removeClass ( 'success' ) .addClass ( 'error' ) .html ( html ) ; } else { //no errors $.each ( res.responses , function () { $ ( "#registration-status-message" ) .addClass ( 'success' ) .html (this .data ) ; return ; }) ; } } Eat your heart out.

Conclusion » The Code Download link The sample Ajax registration form plugin can be found at: http://www.wpajax.com/code

Conclusion » Want to Know More? What to know more? Buy my damn book! http://www.wpajax.com

Conclusion » Want to Know More? What to know more? Buy my damn book! I mean, pretty please, buy my book. http://www.wpajax.com

Conclusion » WordPress and Ajax » The End - Twitter @ronalfy - Skype ronalfy - Personal site (rants and musings) http://www.ronalfy.com - WordPress and Ajax e-book http://www.wpajax.com That’s it! Thank you for your time. - Ajax Edit Comments http://www.ajaxeditcomments.com - WebDevStudios http://www.webdevstudios.com

WordPress and Ajax

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a WordPress and Ajax

Similar a WordPress and Ajax (20)

Más de Ronald Huereca

Más de Ronald Huereca (6)

Último

Último (20)

WordPress and Ajax