1

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!

asked Oct 8, 2015 at 13:51
6
  • .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). 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..... 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> 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. 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. Commented Oct 8, 2015 at 14:01

2 Answers 2

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
Sign up to request clarification or add additional context in comments.

2 Comments

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
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
0

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');
answered Oct 8, 2015 at 18:02

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.