Use a dropdown post list with jQuery to load posts into the page WordPress
- SOLVED
I need a dyanamic function to load the selected posts into the page below the box based on code like this.
<?php
$cat_id = get_cat_ID('uncategorized');
$args=array(
'cat' => $cat_id,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$postbox = null;
$postbox = new WP_Query($args);
if( $postbox->have_posts() ) {
?>
<form name="jump">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option selected="selected">Select</option>
<option value="<?php the_permalink() ?>"><?php the_title(); ?></option>
<?php
while ($postbox->have_posts()) : $postbox->the_post(); ?>
<?php
endwhile;
}
?>
</select>
</form>
<?php
wp_reset_query();
?>
The Select field should do nothing, but the fields below generated by Wordpress based on the category / categories in the code. I found this code snippet online and have modified it slightly but I don't know if the "$cat_id = get_cat_ID('uncategorized');" will support multiple category arguments.
Based on the code above I don't see anything that limits the amount of posts that WP will generated into select values. However, I'm not OVERLY php savvy so if it doesn't allow a large selection, please take that into consideration as well.
I need to be able to place this jQuery functionality on multiple pages... the jQuery functionality should only dynamically retrieve the post into the page with a simple but nifty little loading graphic (like a lightbox).
Answers (2)
Julio Potier answers:
Hello
First of all, you have to create a page with a special template. Here comes my page code template, you can change it of course :
<?php
/*
Template Name: BAW Ajax Post
*/
?>
<?php
$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?> </small>
<div class="entry">
<?php the_content('More ...'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endif; ?>
Save this code in a file, in your theme directory, named (for example) "page-ajax.php"
Then you create a page with "<strong>MY-PAGE-SLUG</strong>" (for example) in place of its slug. Do not forget to set the "Page Attributes"->"Template" to "BAW Ajax Post" (The template name of my new special page).
After that, you need a jQuery script, i added it in my <em>header.php</em> page (change <strong>MYWEBSITE.COM</strong>, this slug came from my new special page ;p ) :
<script>
jQuery( document ).ready( function(){
jQuery.ajaxSetup({cache:false});
jQuery( 'select#baw_jumpposts' ).change( function(){
jQuery( 'div#baw_post_result' ).html( '<img src="http://<strong>MYWEBSITE.COM</strong>/ajax_loading.gif" />' );
jQuery( 'div#baw_post_result' ).load( '<?php echo home_url(); ?>/<strong>MY-PAGE-SLUG</strong>/', {id:jQuery( this ).val()} );
} );
} );
</script>
Also, you new code is :
<?php
$cat_id = get_cat_ID('uncategorized');
$args=array(
'cat' => $cat_id,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$postbox = null;
$postbox = new WP_Query($args);
if( $postbox->have_posts() ) {
?>
<select id="baw_jumpposts">
<option selected="selected">Select</option>
<option value="<?php <strong>the_ID()</strong> ?>"><?php the_title(); ?></option>
<?php
while ($postbox->have_posts()) : $postbox->the_post(); ?>
<?php
endwhile;
}
?>
</select>
<strong><div id="baw_post_result"></div></strong>
<?php
wp_reset_query();
?>
That's all !
Gary Smith comments:
Hello Julio, thanks for the quick response.
In regards to the script to put in the header, since I have to reference the page slug, does that means the script is only good for one page.
Would I have to put conditional tags and copy the entire script
if is_page('MY-PAGE-SLUG')
jquery code here
elseif is_page('MY-PAGE-SLUG2')
jquery code here
so on and so forth?
Or is there a cleaner way to reuse the jQuery script for separate pages?
Julio Potier comments:
No, this page is only used for the ajax request. You can hide it in your menus.
You can load ANY post, ANY page on ANY post or ANY page where you put your code ;)
Gary Smith comments:
Hey Julio,
Thanks for the effort you put into this. The code doesn't seem to work.
<?php
$cat_id = get_cat_ID('uncategorized');
$args=array(
'cat' => $cat_id,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$postbox = null;
$postbox = new WP_Query($args);
if( $postbox->have_posts() ) {
?>
The category gets ignored... in my tests on localhost if you apply the script into a page template for a page it shows the About page (regardless of the page you put it on) which means its ignoring the 'post_type' => 'post' and in the sidebar it only loads up the same post all the time regardless of the category selected. I even tried to change it to get_category_by_slug and it didn't seem to have any effect.
Gary
Julio Potier comments:
Ok, i've got a demo website and my code works fine. Do you want me to set you all my code in your them/site ?
Reland Pigte answers:
Hi gary,
I created a small plugin for you..
you can download it here: http://67.18.3.39/~jsrtest1/_movies/displayPost.zip
Installation:
1. Extract the files into the plugin directory (two files DisplayPost.php and jquery.cookie.js)
2. Go to admin dashboard and activate the plugin.
3. To use the plugin you should put this code to the file where you want this functionality to be visible.
<!-- This is the part You need -->
<?php if( class_exists('DisplayPost') ) { $form = new displayPost(); $form->display_form(); } ?>
<!-- end of the part you need -->
Hope this helps. Good luck!
Reland Pigte comments:
This plugin also can select the default post you would like to display.
You can see the option page in the admin section settings -> "Dropdown Options".
This also select posts you would like to display it in the dropdown box.
Gary Smith comments:
Hey Reland,
I appreciate the work you put into this but I don't want a plugin. I dislike the way plugins are always loaded in WP and its annoying. I prefer to use conditional statements when I have something like this that will only be used on a set of pages.
Thanks
Reland Pigte comments:
Try to use that code
<?php //Code goes here
$cat_id = get_cat_ID('uncategorized');
$args = array(
'cat' => $cat_id,
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$postbox = null;
$postbox = new WP_Query($args);
if( $postbox->have_posts() ): ?>
<form name="jump">
<select id="post-select">
<option selected="selected">Select</option>
<?php while( $postbox->have_posts() ): $postbox->the_post(); ?>
<option value="<?php the_ID() ?>"><?php the_title(); ?></option>
<?php endwhile; ?>
</select>
</form>
<div id="post-selected-container"></div>
<script type="text/javascript">
(function($){
$('#post-select').change(function(){
$.ajax({
url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
type: 'post',
data: 'action=change_post&id=' + this.value,
success: function(output){
$('#post-selected-container').html(output);
}
});
});
})(jQuery);
</script>
<?php endif; wp_reset_query(); ?>
and on the functions.php add this
add_action("wp_ajax_nopriv_change_post", 'change_post');
add_action("wp_ajax_change_post", 'change_post');
function change_post()
{
$thepost = get_post($_POST['id']); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p> <?php
exit;
}
Let me know if there is an issues..
Gary Smith comments:
Hey Reland,
I don't know its quite weird... it works without any problems on my localhost... but it doesn't do anything on my live site. No errors or anything but the form doesn't do anything.
Does it make any difference that its a Multisite network... perhaps admin_url( 'admin-ajax.php' ); doesn't work the same on a multisite network.
I don't know... my localhost is not a multisite network and that is the only difference I can see between the two that might cause issue.
Reland Pigte comments:
can you paste here the link of your website?
Gary Smith comments:
Hi Reland,
Its a development environment that is multi-managed via SVN. I don't the link on a public page like this so I'll send you a message on it.
Reland Pigte comments:
Hi Gary,
Please try replacing this code
<?php echo admin_url( 'admin-ajax.php', ); ?>
to this
<?php echo admin_url( 'admin-ajax.php', 'http' ); ?>
what the previous did is admin_url returns with https so request can't locate the file admin-ajax.php
javascript stucture should look like this
<script type="text/javascript">
(function($){
$('#post-select').change(function(){
$.ajax({
url: '<?php echo admin_url( 'admin-ajax.php', 'http' ); ?>',
type: 'post',
data: 'action=change_post&id=' + this.value,
success: function(output){
$('#post-selected-container').html(output);
}
});
});
})(jQuery);
</script>
Gary Smith comments:
Hey Reland, thanks for that.
Reland Pigte comments:
NP gary :)