Skip to content

Instantly share code, notes, and snippets.

@leepeterson

leepeterson/ajax-endpoint.js

Forked from jtsternberg/ajax-endpoint.js
Created February 21, 2020 06:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leepeterson/2d7fe36a9f247d8baf41f5605488a0a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leepeterson/2d7fe36a9f247d8baf41f5605488a0a5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jtsternberg jtsternberg revised this gist Apr 17, 2015. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion front-end-ajax-callback-api.php
    View file
    Original file line number Diff line number Diff line change
    @@ -39,10 +39,16 @@ public function ajax_endpoint_api() {
    // Did we pass the nonce test?
    || ! wp_verify_nonce( $_REQUEST[ $this->api_nonce_key ], $this->api_nonce_key )
    ) {
    // Looks like we failed, so don't do anything (probably will land on a 404)
    return;
    }

    wp_send_json_success( 'You did it!' );
    // Now you can do your business logic
    if ( $some_condition == $_REQUEST['some_data'] ) {
    wp_send_json_success( 'You did it!' );
    }

    wp_send_json_error( 'Condition failed. :(' );
    }

    /**
  2. @jtsternberg jtsternberg revised this gist Apr 17, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion front-end-ajax-callback-api.php
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@ public function ajax_endpoint_api() {
    $_REQUEST['some_data'],
    $_REQUEST[ $this->api_nonce_key ]
    )
    // Are we looking at our pseduo ajax api endpoint
    // Are we looking at our front-end ajax api endpoint?
    || 0 !== strpos( $_SERVER['REQUEST_URI'], '/ajax-endpoint-api' )
    // Are our request vars empty???
    || ! $_REQUEST['ajax_action'] || ! $_REQUEST['some_data']
  3. @jtsternberg jtsternberg revised this gist Apr 17, 2015. 2 changed files with 32 additions and 43 deletions.
    28 changes: 28 additions & 0 deletions ajax-endpoint.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    jQuery(document).ready(function($){
    $('body').on( 'click', '.some-button', function(){

    $.ajax( ajax_endpoint_data.api_url, {
    type : 'POST',
    dataType : 'json',
    data : {
    action: 'ajax_action',
    some_data: 'some_value'
    }
    }).always( function() {

    // Hide your spinner

    }).done( function( response ) {

    if ( ! response.success ) {
    // Display error message, ajax_endpoint_data.error_text
    }

    // Happy Path! Do your success message

    }).fail( function() {
    // Display error message, ajax_endpoint_data.error_text
    });

    });
    });
    47 changes: 4 additions & 43 deletions front-end-ajax-callback-api.php
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,6 @@ public function __construct() {
    // late enough that cpts/custom taxonomies are registered
    add_action( 'init', array( $this, 'ajax_endpoint_api' ), 99 );
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_js' ) );
    add_action( 'wp_footer', array( $this, 'some_js' ) );
    }

    /**
    @@ -57,49 +56,11 @@ public function enqueue_js() {
    wp_enqueue_script( 'ajax-endpoint-js', $plugin_url . "assets/js/ajax-endpoint$min.js", array( 'jquery' ), 'version' );

    wp_localize_script( 'ajax-endpoint-js', 'ajax_endpoint_data', array(
    'debug' => ! $min,
    'api_url' => wp_nonce_url( site_url( 'ajax-endpoint-api' ), $this->api_nonce_key, $this->api_nonce_key ),
    'error_text' => 'Error Text',
    'debug' => ! $min,
    'api_url' => wp_nonce_url( site_url( 'ajax-endpoint-api' ), $this->api_nonce_key, $this->api_nonce_key ),
    'error_text' => 'Error Text',
    'success_text' => 'Success!',
    ) );
    }

    /**
    * Just pretend this is in "assets/js/ajax-endpoint$min.js"
    */
    public function some_js() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $('body').on( 'click', '.some-button', function(){

    $.ajax( ajax_endpoint_data.api_url, {
    type : 'POST',
    dataType : 'json',
    data : {
    action: 'ajax_action',
    some_data: 'some_value'
    }
    }).always( function() {

    _this.$spinner.hide();

    }).done( function( response ) {

    if ( ! response.success ) {
    _this.$response.text( ajax_endpoint_data.error_text );
    }

    _this.$response.html( response.data );

    }).fail( function() {
    _this.$response.text( ajax_endpoint_data.error_text );
    });

    });
    });

    </script>
    <?php
    }

    }
  4. @jtsternberg jtsternberg created this gist Apr 17, 2015.
    105 changes: 105 additions & 0 deletions front-end-ajax-callback-api.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <?php

    class Ajax_Endpoint {

    /**
    * The nonce key to verify if we should do our ajax api endpoint action
    *
    * @since 1.0.0
    *
    * @var string
    */
    public $api_nonce_key = 'ajax-endpoint-nonce';

    public function __construct() {
    // late enough that cpts/custom taxonomies are registered
    add_action( 'init', array( $this, 'ajax_endpoint_api' ), 99 );
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_js' ) );
    add_action( 'wp_footer', array( $this, 'some_js' ) );
    }

    /**
    * Detects if we're trying to make our front-end ajax api call
    * This can occur even higher in the load the stack if you don't
    * need custom post types or custom taxonomies
    */
    public function ajax_endpoint_api() {
    // are we on the api endpoint?
    if (
    // Do we have all our request vars???
    ! isset(
    $_SERVER['REQUEST_URI'],
    $_REQUEST['ajax_action'],
    $_REQUEST['some_data'],
    $_REQUEST[ $this->api_nonce_key ]
    )
    // Are we looking at our pseduo ajax api endpoint
    || 0 !== strpos( $_SERVER['REQUEST_URI'], '/ajax-endpoint-api' )
    // Are our request vars empty???
    || ! $_REQUEST['ajax_action'] || ! $_REQUEST['some_data']
    // Did we pass the nonce test?
    || ! wp_verify_nonce( $_REQUEST[ $this->api_nonce_key ], $this->api_nonce_key )
    ) {
    return;
    }

    wp_send_json_success( 'You did it!' );
    }

    /**
    * Enqueues/Localizes
    * Pay attention to the api_url, that's important
    */
    public function enqueue_js() {

    $min = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';

    wp_enqueue_script( 'ajax-endpoint-js', $plugin_url . "assets/js/ajax-endpoint$min.js", array( 'jquery' ), 'version' );

    wp_localize_script( 'ajax-endpoint-js', 'ajax_endpoint_data', array(
    'debug' => ! $min,
    'api_url' => wp_nonce_url( site_url( 'ajax-endpoint-api' ), $this->api_nonce_key, $this->api_nonce_key ),
    'error_text' => 'Error Text',
    ) );
    }

    /**
    * Just pretend this is in "assets/js/ajax-endpoint$min.js"
    */
    public function some_js() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $('body').on( 'click', '.some-button', function(){

    $.ajax( ajax_endpoint_data.api_url, {
    type : 'POST',
    dataType : 'json',
    data : {
    action: 'ajax_action',
    some_data: 'some_value'
    }
    }).always( function() {

    _this.$spinner.hide();

    }).done( function( response ) {

    if ( ! response.success ) {
    _this.$response.text( ajax_endpoint_data.error_text );
    }

    _this.$response.html( response.data );

    }).fail( function() {
    _this.$response.text( ajax_endpoint_data.error_text );
    });

    });
    });

    </script>
    <?php
    }

    }