JQuery calling a PHP function issue

1 Views

I’m sure I’m not doing this in the correct manner, but I just experimenting to find out the best way to get this done.

Basically, I am using WordPress, I have created my own theme, based on Thematic.

Read More

I have a loop, that is displaying posts from a category.

At the top of the page, I have a menu, which i am trying to use as a filter. So when a user clicks on one of the menu items, it takes the ID of that item, which is the category ID, and then I am trying to use JQuery to replace the contents of a div with the new categories posts.

When i tried using AJAX to load the content, i was getting undefined function errors. So I tried putting the loop into a PHP function inside functions.php.

Here is the function: 

function get_vehicle_filter() {


$f = 0;

query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();

}

I’m using this to display the loop on the page, which works fine: 

<script>
  jQuery(document).ready(function(jQuery) {
    jQuery("#filtered_vehicles").html("<?php get_vehicle_filter() ?>");
  });
</script>

But when i try to get the ID of the clicked menu item into the php function, I am falling down. This is the latest version: 

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        

        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php $filterCat = ' + filterCat + '; get_vehicle_filter($filterCat) ?>').fadeIn('fast');
        });             

    });

I know thats not right, and it obviously doesnt work!!

But I’ve been breaking it down to see what is and isnt working, and if i try to call the function in its simplest form, as I have above when the page is loading, like below, it doesnt work? 

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        


        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php get_vehicle_filter() ?>').fadeIn('fast');
        });             

    });

As this works when the page loads, why doesnt it work when replacing with JQuery, the exact same code?

Can anyone point me in the right direction please.

Thanking you!

Post Views: 1

Related posts

2 comments

  1. PHP executes on the server. So when you serve the page, the content inside the jQuery html() is already written. Your function get_vehicle_filter() has been called and the return is what appears inside your jQuery(“#filtered_vehicles”).html().

    What you need to do is inside the click event, make an AJAX call to a file that returns the get_vehicle_filter(). Something like that:

    jQuery('.vehicle_filter_item').click(function() {

    // capture id from clicked button
    var filterCat = jQuery(this).attr('id');  

    $.ajax({
      method: "POST",
      url: "file_that_calls_get_vehicle_filter.php",
      data: { filter: filterCat }
    })
   .done(function( result ) {
      jQuery('#filtered_vehicles').fadeOut('fast', function() {
         jQuery("#filtered_vehicles").html(result).fadeIn('fast');
    });
   });


});

    Hope it sends you on the right path.

  2. Right, this is how I got this working.

    Ajax call:

        jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');  

        jQuery.ajax({
          method: "POST",
          url: "ajax-functions.php",
          data: "filterCat="+ filterCat,
        })
       .done(function( result ) {
          jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html(result).fadeIn('fast');
        });
       });


    });

    Function: (which is called on page load)

    function get_vehicle_filter() {     
$f = 0;

    query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
    while ( have_posts() ) : the_post();

    $postid = get_the_ID();                         
    $site_url = get_site_url(); 
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

    echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
    echo "<div class='job_image_holder'>";
    echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
    echo "<div class='job_image_title'>";
    the_title( "<p class='white center'>", "</p>" );
    echo "</div>";
    echo "</div>";
    echo "</a>";

    $f++;

    endwhile;
    wp_reset_query();

}

    Function called through AJAX ajax-functions.php

    define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php'); 


if($_POST['filterCat'] == "") {
    $filterCat = '47';
} else {
    $filterCat = $_POST['filterCat'];
}

$f = 0;

query_posts( array('cat' => $filterCat, 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();

    So, basically, the reason I could not get this working was because on the AJAX call, which was a separate file, i was missing these 2 lines at the top:

    define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php');

Comments are closed.