1

please give me advice Im very new to ajax, I have a list of posts, if I click it will display the posts information in a div without load the page. I know I must use ajax, so I create a file: loadcontent.php in a root folder and use this code below, but I don't know how to send and get data throught ajax. I need to pass an id in order to get post infos.

<script>
   $(document).ready(function(){

    $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
        var post_id = $(this).attr("rel"); //this is the post id
        $("#post-container").html("content loading");
        $("#post-container").load("/loadcontent.php");
       return false;
    });

  });
</script> 

2 Answers 2

5

Use Ajax API provided by WordPress.

In first time, fix your Ajax request :

<script>
$(".post-link").click(function(){
    var post_id = $(this).attr("rel"); //this is the post id
    $("#post-container").html("content loading");
    $.ajax({
        url: myapiurl.ajax_url,
        type: 'post|get|put',
        data: {
            action: 'my_php_function_name',
            post_id: post_id
        },
        success: function(data) {
            // What I have to do...
        },
        fail: {
            // What I have to do...
        }
    });
    return false;
});
</script> 

Now, you have to create your WordPress treatment. You can put this code in your functions.php or in a plugin file.

add_action( 'admin_enqueue_scripts', 'my_ajax_scripts' );
function my_ajax_scripts() {
    wp_localize_script( 'ajaxRequestId', 'myapiurl', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

And then... your function that retrieve your posts

function my_php_function_name() {
    // What I have to do...
}

PS: Never put code in root install folder. Use functions.php of your theme, or create plugin. It's very important for maintainability and security. Have fun :)

8
  • Hi I got error in console : my apiurl is not defined
    – Yoona
    Dec 21, 2016 at 9:29
  • Do you know what might be the problem? thank you for your answer.
    – Yoona
    Dec 21, 2016 at 9:36
  • This is because JS does not have myapiurl in his scope... Does your ajax request works?
    – Kaeles
    Dec 21, 2016 at 10:06
  • I recommend to you to read this doc : codex.wordpress.org/AJAX_in_Plugins My solution is the most simplest, by not the better. Read closely this documentation and you will not have problems any more with Ajax requests in WordPress.
    – Kaeles
    Dec 21, 2016 at 10:12
  • Try replace 'myapiurl' with 'ajaxurl'. Apparently is the default url provided by WordPress.
    – Kaeles
    Dec 21, 2016 at 10:16
0

The html

<button class="the-btn">click me</button>
<div class="container"></div>

The js:

<script>
jQuery(".the-btn").click(function(){

    var param1 = 'something';
    var param2 = 'something else';

    $("div.container").html("content loading....");

    jQuery.ajax({
        url: ajaxurl,
        type: POST, //'post|get|put'
        data: {
            action: 'my_php_function_name', 'param1':'something', 'param2':'something else'
           
        },
        success: function(data) {
            // What I have to do...
            jQuery("div.container").html(data);

        },
        fail: {
            // What I have to do...
            jQuery("div.container").html("data failed to load");
        }
    })
    return false;
});
</script>

Add to functions.php

//So, if you want it to fire on the front-end for both visitors and logged-in users, you can do this:

add_action('wp_ajax_load_my_php_function_name', 'my_php_function_name'); 
add_action('wp_ajax_nopriv_my_php_function_name', 'my_php_function_name'); 

function my_php_function_name() {

    $param1 = $_POST['param1'];
    $param2 = $_POST['param2'];

    echo $param1." ".$param2;

}

If ajaxurl is not defined, which it should be, but if it'a not, add this:

<script type="text/javascript">
var ajaxurl = '<?php echo str_replace( array('http:', 'https:'), '', admin_url('admin-ajax.php') ); ?>';
</script>

More information on ajax and Wordpress: https://codex.wordpress.org/AJAX_in_Plugins

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.