WordPress AJAX Basics

  • I just read through a free 300 page book WordPress & AJAX by Ronald Huereca and I learned a lot but the examples are WAY out there and super advanced, plus they’re pointed in very specific directions that I cannot use or adapt… Lame.
    Can I have some help getting this basic AJAX query to work?

    // page-test.php

    <div id="my_search">
   <form role="search" method="post" id="searchform" action="" >
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
   </form>
</div>
<div id="results"></div> 

<script type="text/javascript">
$(document).ready(function(){
    $("#searchsubmit").click(function(e){
        e.preventDefault();
        var search_val=$("#s").val();
        $.ajax({
            type:"POST",
            url: "./wp-admin/admin-ajax.php",
            data: {
                action:'wpa56343_search',
                search_string:search_val
            },
            success:function(data){
                $('#results').append(response);
            }
    });
});
</script>
<strong>// end page-test.php</strong>

<strong>// functions.php</strong>
add_action('wp_ajax_nopriv_wpa56343_search', 'wpa56343_search'); // for not logged in users
add_action('wp_ajax_wpa56343_search', 'wpa56343_search');

function wpa56343_search(){
  global $wp_query;
  $search = $_POST['search_val'];
  $args = array('post_type' => 'post_type');
  $wp_query = new WP_Query( $args );

  exit;
}

    I can’t get over how difficult AJAX in WordPress is. Any advice on creating a basic function to build my queries in would be AWESOME.
    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)

  • “not working” is a really hard thing to diagnose. When you ask something like that, you need to say exactly what isn’t working. Is it getting a result? Is the result not displaying? Is the result wrong? There’s a whole lot of things that it could be and we’re not mind readers (well I’m not, can’t speak for anyone else here!).

    In a quick scan of yor code my only thought is that your PHP function isn’t actually outputting anything, so your AJAX doesn’t get a response to append. That could be it, but that’s just a very wild stab in the dark. ??

    Thread Starter BenRacicot

    (@benracicot)

    @catacaustic, thank you for replying :))) I’ve been at this for hours and here’s what I’ve found so far.

    the jQuery library included with WordPress loads in “no conflict” mode. So adding the $ in parenthesis after the function call fixed the improper jQuery call… changed my jQuery .ready to this->

    jQuery(document).ready(function ($) {...}

    The same function outputs a 404 because its looking for

    https://www.my.com/sample-page/wp-admin/admin-ajax.php

    However I do get a no refresh attempt at retrieving data now. First glimpse of sunshine in days of AJAX education. ??

    You’ll need to change every $ in the JavaScript to jQuery. Like you said, it loads in nocinflict mode, so make sure that you don’t use $ anywhere. It will make it a lot easier in the long run (trust me… been there done that to many times).

    Have a look at this article for some idea on what to do about the URL. That should also solve your 404 issues.

    Thread Starter BenRacicot

    (@benracicot)

    Ha! Yes that article is the next tab over. I’m battling with comprehension here. Its a lot to take in.
    This is where I get lost every time.

    Why localize_script? Just to send the URL? But I don’t have a separate JS file? It’s just a script inside of a page template… And if I decide to go this route I will have to move it all to a new file won’t I? If I don’t I have to go another route and include wp-load.php and begin that “venture”.

    VENTING:
    There should just be a class we can use or something because this is ridiculous. I’ve been at this for a week and it just gets harder and harder to understand!

    You don’t need to use localise_script(). I haven’t before. The main point from that is that you need to set up the admin URL for the AJAX call to point to the right URl, that’s all.

    You also don’t have to move the JavaScript anywhere. It will work fine as part of a template. However I’d storngly advise that you move the PHP function into a different file, most likely your themes functions.php file, or a file in your plugin (depending on which one you’re using). The main reason for this is that the PHP function won’t be found if it’s not included somewhere, and having it in the template file won’t have it included in the system when you make a standard AJAX call.

    It might seem like it’s all over the place now, but when it falls into place you’ll see that it’s not that hard to do. Now you’re just seeing the frustration of trying things and not having them work the way that you thought that it should. We’ve all been there and done that many times over. All that I’d suggest is don’t get to hung up on it, and you will get there eventually.

    Thread Starter BenRacicot

    (@benracicot)

    Thanks very much @catacaustic. The funcs are in function.php I’ll just keeep at it…

    If I don’t have to put the JS in a seperate file then how do I use wp_localize_script? It’s first argument is the script handle you’ve enqueued.. Hmm?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WordPress AJAX Basics’ is closed to new replies.

Tags