Display PHP code in a JavaScript function

Question

I'm using Isotope (JQuery) in my WordPress template and i would like to use the adding item option (prepend). You can see it here: http://isotope.metafizzy.co/demos/adding-items.html

The script that I use works:

 $('#prepend a').click(function(){
 var $newItems = $(<div>Hello World</div>);
 $('#container').prepend( $newItems)
 .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
 });

When I click on this link:

<li id="prepend"><a href="#">More</a></li>

The script adds a Hello on my page.

The problem is that i don't want to add a div but i would like to add a Post.

Here is the Post code that i would like to use:

<?php query_posts('category_name=offers'); while (have_posts()) : the_post(); ?>
<a href="<?php echo get_permalink(); ?>" class="element <?php $posttags = get_the_tags();
if ($posttags) { foreach($posttags as $tag) { echo $tag->slug . " "; } } ?>">
<div> 
<?php the_title("<h3>", "</h3>"); ?>
</div>
</a>
<?php endwhile;?>

Do you know a way to make it works?

(Excuse my terrible english...)

Answer 1

You need Ajax. The way this works is, you fetch what you want from the server, then prepend that.

var postsData = { param1: "value", param2: "value" };
$.get('www.example.com/get_posts.php', postsData,
 function(content) {
 var $newItems = $('<div/>').html(content);
 $('#container').prepend($newItems);
 }
);

and make a get_posts.php which prints a HTML fragment. You can get things from the postsData structure from $_GET[], or you can leave the postsData parameter altogether if you don't need any.

• Sebastien: You have to made or use an url of your wordpress blog to get the render of your post. Try to find and read some documentation about ajax on wordpress posts.
• Hugo Favre: (i don't know how but i deleted my comment...). I'm gonna look around Ajax and WordPress. Thank you both for your help!

Answer 2

If you want to make a php rendering, you have to use an Ajax request. Are you used to this terrible name 'AJAX'?

With an ajax call using jquery : http://api.jquery.com/jQuery.get/ you can get the html if the post rendering and write it on your page.

Are you understanding?

Seb

• Hugo Favre: I heard a lot about Ajax but i really need do digg deeper... i'm gonna have a look at your link. Merci Seb