Question 2746 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Ajax with jquery callback to php file on WordPress

I have the following situation trying to use Ajax in WordPress.

1. The file to be called has only a tiny code like: <?php echo "Whatever" ?>

2. it is to be called to and by button onclick:

<button id="ajaxbtn" onclick="showPopup()" class="btn-shape"></button>

<div id="ajax-input"></div>

3. Functions.php

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );

function myajax_data() {
   wp_localize_script('ajax-wear', 'myajax',
   array(
      'ajax_url' => admin_url('admin-ajax.php')
    )
  );
}

add_action('wp_ajax_tablo', 'tablo');
add_action('wp_ajax_nopriv_tablo', 'tablo');

function tablo() {
    ob_start();

    get_template_part(get_stylesheet_directory_uri() . 'extra-wear' );
    $result = ob_get_contents();
    ob_end_clean();

    $return = array('content' => $result);

    wp_send_json($return);

    wp_die();
}

4. Jquery

jQuery("#ajaxbtn").click(function() {
  jQuery.ajax({
    type: 'post',
    dataType: 'json',
    url: myajax.ajax_url,
    data: {
      action: 'tablo'
    },
    success: function(response) {
      jQuery('#ajax-input').html(response.content);
    }
  });
});

5. Present output.
In the console there is information that XHR finished loading: Post "http//….." but nothing is really posted.

Has someone any idea what could be wrong with that code? my quess is point. 3
Any good advise highly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    get_stylesheet_directory_uri() is apparently not a correct way to build a path to call a file in that function. Once amended the content returned.


  2. 0

    For what I see, you have two problems:

    1. the dataType: ‘json’ parameter, most probably because you’re not sending data in a json format
    2. the "response.content" should be just "response"

    Also, no idea if the URL you pass in "myajax.ajax_url" has been declared before this bit of code?

    One more thing, "success" is depreciated since jQuery 1.8, and you should now use done() instead.

    With all of that considered, how about trying this and see if it works?

    $.ajax({
    type: 'post',
    url: 'path/to/your-ajax-file.php',
    data: { action: 'tablo' }
}).done(function(response) {
    console.log(response);
    $('#ajax-input').html(response);
});

    I added a console.log(response); line in the function so you can also see the result in your JavaScript console, remove it once your script works!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search