How to pass a php variable to an WordPress AJAX call?

  • evadstein

    (@evadstein)


    5 years ago

    I have embeded a post (CPT) by a shortode. So I get the output of this post on a page, where I want to filter the content of this embeded post by AJAX. That would work, if I could send the ID of this embeded post in the ajax call.

    I get the ID of the embeded post from a shortcode [documentlist listid=”2126″].

    $atts = shortcode_atts(
        array(
            'listid' => '',
        ), $atts
    );
$posts = array(
    'post_type' => 'documentlist',
    'page_id'         => $atts['listid'],
);

    So I have this $atts[‘listid’] variable. How can I add this to the following ajax code (which is in an diffeent scripts.js file)?

    /*The ajax call*/
jQuery(function($){
    $('#filter #documenttypefilter, #filter #applicationareasfilter').change(function(){
        var filter = $('#filter');
        var serializedFilter = filter.serialize();
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(),  // form data
            type:filter.attr('method'), // POST

            success:function(data){
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});

    Thanks so much for your help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • garethgillman

    (@garethgillman)

    Put the ajax contents in the shortcode (js can be added inline) and then echo the php variable into a js variable e.g.

    <script>
  jQuery(function($){
    var listid = <?php echo $atts['listid']; ?>;
    $('#filter #documenttypefilter, #filter #applicationareasfilter').change(function(){
        var filter = $('#filter');
        var serializedFilter = filter.serialize();
        $.ajax({
            url:filter.attr('action'),
            data:{
              data: filter.serialize(),  // form data
              listid: listid
            },
            type:filter.attr('method'), // POST

            success:function(data){
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
</script>

    In the ajax function you can then do echo $_POST['listid'];

    Moderator bcworkz

    (@bcworkz)

    garethgillman’s solution will work fine of course, but FWIW it’s not recommended practice in coding for WP. The recommendation is to enqueue your jQuery code with wp_enqueue_script(). When you do that, you can pass PHP values to your scripts with wp_localize_script().

    The localize script function ends up placing some inline JS script declaring your PHP values similar but different to what garethgillman suggests. Enqueuing and localizing places script references in an optimal location in the served data flow. If all of your script is fairly brief, there’s some valid reasons to do it all as inline script, especially when it relates to randomly used shortcode.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to pass a php variable to an WordPress AJAX call?’ is closed to new replies.