Ajax and wordpress
- Started
- Last post
- 16 Responses
- Ravdyk
Has anybody got any experience loading in wordpress posts with ajax? I have to build something sounding really simple but I find it harder than imagined. I have all the titles of posts loaded on a page and I want to load the content of the posts in a div when I click them.
Anybody got any good articles or something like that. Kind of stuck here thanks!
- raf0
I will be doing something like this soon, putting wordpress post/excerpt list in a box kind of like the post list on the left here, with prev-next buttons. But I am not 100% sure what approach I'll take.
- intVal0
Not sure if ajax is needed here (It could be harder with Ajax), maybe a tab like structure when onclick one is displayed then its siblings are hidden
- EdTheDuck1010
just make the title the normal permalink, then put some jQuery on to pull through the href of the link (making the page only show content) and then return false so the link isn't followed.
Something like:
$('a.title').click(function(){
$.get($(this).attr('href'), function(data) {
// do what you want with data here
});
});that's off the top of my head so may be a little off but the idea is there.
- EdTheDuck1010
oops, missed a return false, but you get the idea (maybe)...
- Ravdyk0
I get the jquery stuff. Put the post id in a [rel=$id] kind of structure so I can pull that out. But than actually replacing the old content is kind of hard for me. Can't hide them all and show the clicked one because it will be like 50 posts and all with images, so that's no solution.
- acescence0
create a php file and paste this in it:
be sure to change the path to your location of wp-load.php relative to where you put this file, you can also change all the loop stuff to format it however you'd like.
call this file in your ajax function and pass the post id. you might need to change $_GET to $_POST, depending on which your ajax function is using. also, if you're using another var other than "postid", change that as well.
then in your handler that processes the ajax response, overwrite the html in your post display area with the response text, or do whatever fancy animation you'd like, etc..
- you can also use this method to pull wordpress posts outside of a wordpress siteacescence
- Ravdyk0
Thanks I am going to try this tonight. Hope I can get it to work..
- raf0
Great stuff!
While we're at it, could you tell me Acescence how to access fields in duplicate groups in Magic Fields, when the number of duplicated groups is unknown?
- Ravdyk0
Ok I am starting to feel really stupid for not getting this.
This is my link:
<div class="more"><a href="<?php the_permalink(); ?>" post_id="<?php the_ID(); ?>">More</a></div>This is ajax script:
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});
$(".more").click(function(){
var post_id = $(this).attr("rel")
$("#single-post").html("loading...
$("#single-post").load("<? bloginfo('template_url');?>/ajax-handler.php",{p:post_id});
return false;
});
});
</script>And I used your code for the file. Somehow it only shows the loading part and doesn't do anything. And while your reading this your probably going "like duh" but I got no clue. Not even a bit of a clue. Can you advice me on stuff to read or anything like that?
- acescence0
a few issues..
you're grabbing the rel attribute from the link, but your link has no rel attribute..
<a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">More</a>also- in your js you're assigning the click function to the div, but then you're using the "this" reference to read the rel of the anchor tag, "this" in this context refers to the div, not the anchor, so you'll have to give the anchor that class, or use a descendant selector to read the rel attribute.
also, you're sending the data via post, with a variable called "p", so the php script has to change to read the p post variable..
query_posts('p='.$_POST['p']);
- Ravdyk0
Ok I fixed all the stupid stuff and finally understand how this works. Thanks a lot for that!
But now I am still encountering the problem of actually loading in the wordpress post.(Probably something stupid too)
I tried making the query non dynamic to see if that was the source of the problem, but no luck. Can the problem be that the page where I am loading the content to all ready has a query loop and that they are conflicting?
This is the code of my php file:
<?php
// Include Wordpress
define('WP_USE_THEMES', false);
require('../wp-load.php');
query_posts('p=1');
?><?php while (have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>I am using the '../wp-load.php' because I am testing the site on sitename.com/index2.php
I hope this makes sense. Thanks a lot for helping me so far!
- acescence0
../wp-load.php would be one level above the root. it should be ./wp-load.php (one dot) if you're in the same directory.
- Ravdyk0
Tried that too but still no result
- acescence0
is index2.php the file that contains the above code? or are you calling this file via ajax from index2.php? the path to wp-load should be relative to the file that contains the above code, not the file you're making your ajax call from. you can then test that page by loading that php file directly rather than calling it via ajax.
- Ravdyk0
Aaahw I get it. Thanks it's finally working! you helped me a lot man! Thanks a million!