0

I need to create ajax script where user choose a post type and after choose post type post show on a light-box or any thing but without loading. I can't get an idea. Please give me a idea to improve this script.

<select>
 <?php
    $args = new WP_Query(array(
        'post_type' => 'post'
    ));
 while($args->have_posts() ) : $args->the_post() ?>
  <option value="volvo"><?php the_title(); ?></option>

  <?php endwhile; ?>
</select> 
  • 2
    a bit more code would be nice – cjbj Jun 13 '16 at 8:45
1

To use AJAX in a WordPress website you can the admin-ajax.php file. This file handles your requests and sends it to the correct function.

A short step-by-step guide on how to achieve:

First you need to localize your javascript file so that it knows the URL of the admin-ajax.php file on your server.

add_action( 'wp_enqueue_scripts', 'wpse_229573_localize' );
function wpse_229573_localize() {
    wp_localize_script( 'FILE_HANDLER', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}

where FILE_HANDLER is the handle you used when enqueueing the script.


Now in that javascript file you can make aan AJAX call in different ways, below is just one possibility

jQuery.ajax( {
    url: ajax.url, //The ajax object is populated in this script thanks to the wp_localize_script function. ajax.url containts the url to your admin-ajax.php file.
    type:'POST',
    data: {
        action: 'wpse_229573_ajax_callback', // This action is important as it determines which functions are called
        post_type: jquery( '#post-type' ).val(), // Here you can send the post type set by the visitor, this would be a <select> with id="post-type" for example
    },
    success: function( data ) {
        // On a succesful return 'data' contains whatever you have echoed in the ajax function
        console.log( data );
        // Here you can manually open a lightbox with the correct data if you want, for the correct code to you that you need to check the documentaiton of your chosen lightbox plugin
    }
});

In any PHP file, ideally a plugin but it can be your functions.php as well, you add an action for WordPress to handle the AJAX call. You need two, one for admins and one for non admins (otherwise it won't work if lets say you want to test and you're logged in as an admin)

// Notice the wpse_229573_ajax_callback after both wp_ajax and wp_ajax_nopriv
// These correspond with the action you've set in the javascript file making the AJAX call. 
// This is how WordPress knows what PHP code to run on the AJAX call.
add_action( 'wp_ajax_wpse_229573_ajax_callback', 'wpse_229573_ajax_function' );
add_action( 'wp_ajax_nopriv_wpse_229573_ajax_callback', 'wpse_229573_ajax_function' );

// This is the function that both actions above call
// The data that you've send in the AJAX call is availble as either $_POST or $_GET depending on the call
// In this example it's $_POST
function wpse_229573_ajax_function() {
    // We added post_type to the AJAX call as data, now we're echoing that back.
    // You can also choose to json_encode() data before you echo and parse the JSON in your javascript file.
    echo $_POST['post_type'];
    wp_die();
}
  • Thank You for you valuable solution. But I want to show fall back data into wordpress jquiry dialog or media upload screen. how can I use media uploader or dialog box where show fallback data Here is my code that only show media uploader not show my data – Wordpress Student Jun 15 '16 at 17:31
  • here is my code jQuery(document).ready(function(){ function media_up(){ jQuery('.btn').on('click',function(){ tb_show('', 'TB_iframe=1'); }) } jQuery('#from1').submit(function(e){ e.preventDefault(); var postmeta = jQuery('#s1').val(); jQuery.ajax({ type:'POST', url:'wp-admin/admin-ajax.php', data:{ action: 'my_req', post_type: postmeta }, success:function(data){ media_up(data); } }); }); }); – Wordpress Student Jun 15 '16 at 17:35
  • Instead of trying to post code in a comment, edit your original question and put it in there. That way it will a) be far more legible, and b) provide context to your question. – Pat J Jun 15 '16 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.