JQuery calling a PHP function issue

Question

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.

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!

.html('<?php'); can't work. Javascript is executed client-side while php can only be executed server-side (The result is send to your browser the client). — Sander Visser
– Sander Visser, Commented Oct 8, 2015 at 13:56
The two aren't running on the same machine, they can't 'see' each other. You will have to make an AJAX request to access that function. This is a common beginner error. So common that I wonder how you didn't stumble across ti when googling your problem..... — Jared Smith
– Jared Smith, Commented Oct 8, 2015 at 13:56
But this works: <script> jQuery(document).ready(function(jQuery) { jQuery("#filtered_vehicles").html("<?php get_vehicle_filter() ?>"); }); </script> — frobak
– frobak, Commented Oct 8, 2015 at 13:58
Having the results of the PHP function injected into your javascript code before its sent to the browser is one thing, but its as if you did a simple text replacement. It can't call the function located on a server possibly half a world away. Look at the actual js code in dev tools, you wont see 'get_vehicle_filter()', only the results. — Jared Smith
– Jared Smith, Commented Oct 8, 2015 at 13:59
This problem is exactly why, IMHO, PHP is a terrible language to learn web dev, it generates the illusion that there is no separation between it and your javascript, which is not true at all. — Jared Smith
– Jared Smith, Commented Oct 8, 2015 at 14:01

Mario Chueca · Accepted Answer · 2015-10-08 14:06:26Z

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.

answered Oct 8, 2015 at 14:06

Mario Chueca

1167 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frobak Over a year ago

I have tried something along these lines, but i get Fatal error: Call to undefined function query_posts() errors as the loop is not within the page, its external. I have tried including wordpress header data but it still doesnt work

Mario Chueca Over a year ago

I'm not a wordpress expert. Try to follow this link, it might help: htmlgoodies.com/beyond/php/… It talks about Binding PHP Functions to WordPress's Ajax Handler

frobak · Accepted Answer · 2015-10-08 18:02:04Z

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');

Collectives™ on Stack Overflow

JQuery calling a PHP function issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related