WordPress.org

Ready to get started?Download WordPress

Forums

AJAX Hook Not Responding (4 posts)

  1. IILLC
    Member
    Posted 5 months ago #

    I really need some help figuring out what is wrong with my code. I think I am 90% there but am having issues figure out the last bit to make this work. I would love any help and suggestions you could offer.

    I have an app I am working on that lists a bunch of items. On each row is an add button. The add button is supposed to add the item to a custom table in wp. The jQuery button gets all the data correctly. Testing the php data handling desperately proved it all works. The trouble is for some reason my ajax call is not going through, or returning info.

    This is my first go with ajax. It is also my first time trying to use the built in ajax handling of WordPress, or any other action hook type stuff.

    I have all of this code in a template page. If it can stay, great. If I need to move it to separate files I can do that. I just need to get this to work.

    Here is the stripped down code.

    <?php
    add_action( 'admin_footer', 'addItemAJAX_javascript' );
    
    function addItemAJAX_javascript() {
    	$adminAJAX =  admin_url('admin-ajax.php');
    ?>
    <script type="text/javascript" language="JavaScript">
    jQuery( document ).ready( function( $ ) {
      $(function() {
        $( "input[name=btnAddItem]" )
          .button()
          .click(function( event ) {
            event.preventDefault();
    //... working javascript to get data values/assign vars
    
    //WP ajax call
    			$.post(ajaxurl, data, function(response) {
                    // ERROR HANDLING
                    if( !response.success ) {
                        // No data came back, maybe a security error
                        if( !response.data )
                            alert('AJAX ERROR: no response'); //$( '#my-answer' ).html( 'AJAX ERROR: no response' );
                        else
                            alert(response.data.error); //$( '#my-answer' ).html( response.data.error );
                    }
                    else
                        alert(response.data); // $( '#my-answer' ).html( response.data );
    			});
          });
      });
    });
    </script>
    
    <?php
    };
    addItemAJAX_javascript();
    
    // PHP SIDE OF AJAX - Handeling Request  //// AJAX PROCESSING
    // When the user is not logged in:
    add_action('wp_ajax_addItemAJAX', 'addItemAJAX_callback');
    // When the user is logged in
    add_action( 'wp_ajax_nopriv_addItemAJAX', 'addItemAJAX_callback' );  
    
    function addItemAJAX_callback() {
    	global $wpdb;
    	$charID = $_POST['charID'];
    	$itemID = $_POST['itemID'];
    	$buyItem = $_POST['buyItem'];
    
    //... working database changes
    
    	$debugArray = Array();
     	array_push($debugArray,$charID, $itemID, $buyItem, $getItemDetailsSQL, $getItemDetailsResults,
    								$newItemAdded, $newCash);
    	die(json_encode($debugArray));
    }
    ?>

    When looking at the console it grabs the data, appears to try to talk to the right url but my alert box always returns "AJAX ERROR: no response". Here is the console output.

    cID = 112 ?charID=112:538
    charMoney = 9990 ?charID=112:539
    thisValue = + ?charID=112:540
    iID = 664 ?charID=112:541
    buy = 0 ?charID=112:542
    ajaxurl = http://localhost/nnnn.com/wp-admin/admin-ajax.php ?charID=112:543
    data = [object Object] ?charID=112:550
    Object {action: "addItemAJAX", charID: 112, itemID: 664, buyItem: 0} ?charID=112:551
    XHR finished loading: "http://localhost/nnnn.com/wp-admin/admin-ajax.php". jquery-1.9.1.js:8526
    send jquery-1.9.1.js:8526
    jQuery.extend.ajax jquery-1.9.1.js:7978
    jQuery.(anonymous function) jquery-1.9.1.js:7614
    (anonymous function) ?charID=112:554
    jQuery.event.dispatch jquery-1.9.1.js:3074
    elemData.handle

    It seems I am missing one little thing but I can not figure out what.

    Another though was to scrap a bunch of this and try to do this with jQuery forms. Though I do not know if it is a good idea to have the code pop a form for each row.

    Anyway your thoughts and suggestions are welcome. Thank you for your help!

  2. bcworkz
    Member
    Posted 5 months ago #

    The only thing I can think of is using die() to send a JSON response. Try echoing the JSON separately. I've had trouble in the past getting die() to output long strings, there seems to be a limit though I've no idea what or if it really is.

  3. IILLC
    Member
    Posted 5 months ago #

    Thanks for the reply and the idea. I tried using a generic die () and it still is giving me troubles. I don't even necessarily need the debug info. I just need this to run the php code to make the db changes.

    Does anyone else have any thoughts or ideas? What about different ways to implement this? What if I created a form for each one with jQuery forms and then submitted it via ajax that way? I'm worried that whatever I do I need to figure out this ajax issue or I will have problems with that too.

    Thanks for any input you can offer.

  4. bcworkz
    Member
    Posted 5 months ago #

    I looked through your code again and think I see the problem. I don't have a lot of experience using JSON in javascript, but I believe I'm correct here.

    You ajax response handler is trying to use the JSON string as an object. You need to parse it from a string to an object before trying to use it as you are. You could simply use eval(), but that has serious security issues. Use something like obj = JSON.parse(response);.

    The other thing is you're checking for certain properties which are never created in the JSON response in the first place, such as response.success. For that to work, your PHP response array before encoding needs to be more like this:

    array('success' => true,
       'data' => $debugArray,
    )

Reply

You must log in to post.

About this Topic