How to dynamically load WordPress content from the database? - php

Question

I created a custom post type called Rubrics for WordPress that is only meant to be seen by users in the backend, so I created it with the argument 'public' => false which works fine.
In another post type (assignments), I generate a list of the custom rubrics post type with the following function:
<select id="ldrm-select-rubric">
<option data-id="0" value="default">Select a Rubric</option>
<?php
$args = array( 'post_type' => 'sfwd-rubrics', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<option data-id="<?php the_ID(); ?>"><?php the_title(); ?></option>
<?php endwhile; ?>
</select>
That works as well, so now I have a list of the Rubric posts appearing on the Edit page of all Assignments. I'm wondering how I can query the Rubric post content without loading all of them on to the page.
I understand I could just query the content using the above function, but I only want to load the content of the Rubric that is selected from the drop down once the user has selected it to prevent all of the other rubrics from loading as well. Any ideas on how that could be accomplished?

Answer 1

So if I'm correct in assuming that your current code you want to keep. That is to populate the drop down with the title of the rubrics. Whether you like it or not you have already queried the content. From a performance perspective it would be best to set some variables and use Javascript to display the correct one. The other option is to use AJAX and send the post id to the server and respond with the content for the rubric you want. I'll demo both here
Performant/simple load once
<?php
// instantiate some variables
$titles = array();
$contents = array();
// set our arrays
foreach (get_posts(array('post_type'=>'sfwd-rubrics','posts_per_page'=>-1)) as $post) {
$titles[$post->ID] = $post->title;
$content[$post->ID] = $post->content;
} ?>
<select id="ldrm-select-rubric">
<?php foreach ($titles as $id => $title): ?>
<option id="<?= $id ?>"><?= $title ?></option>
<?php endforeach; ?>
<select>
<?php // time to echo out the contents
foreach ($contents as $id => $content): ?>
<div id="<?= $id ?>"><?= $content ?></div>
<?php endforeach; ?>
<script type="text/javascript">
// assuming jQuery is being loaded
(function($) {
var $select = $('#ldrm-select-rubric');
$select.bind('change', function() {
$(this).find('option').css('display', 'none');
$('#' + $(this).val()).css('display', 'block');
});
$select.trigger('change');
})(jQuery);
</script>
More complicated and less performant example using AJAX
There are security features I won't bother in demoing. Here is a link to using AJAX in WordPress
<?php // somewhere in your php wordpress code
add_action('wp_ajax_rubric_content', function() {
echo get_post($_REQUEST['id'])->ID;
});
// Below the PHP code in your current question content
<div id="rubric-content"></div>
<script type="text/javascript">
(function($) {
$('#ldrm-select-rubric').bind('change', function() {
$.ajax({
type: 'GET',
url: ajaxurl,
data: {
action: 'rubric_content',
id: $(this).val(),
},
success: function(resp) {
$('#rubric-content').html(resp);
}
});
});
})(jQuery);
</script>
WARNING: I didn't test the code above, but that's generally how WP AJAX works. You'll need to add a ton of validation in your server code. I strongly recommend the former example as it's simpler, more performant (less queries), and more secure.