0

I am working in wordpress and on pressing the submit button I want the function to return result through ajax and result should be shown as an alert on the screen. But when I press submit nothing shows.

Below is my code

Ajax code (ajaxinsert.js file)

jQuery(document).ready(function(){

////////////////////////////////////////////////////////////
    jQuery("#addimage").submit(function (e) { //form is intercepted
        e.preventDefault();
        //serialize the form which contains secretcode
        var sentdataa = $(this).serializeArray();

        //Add the additional param to the data        
        sentdataa.push({
            name: 'action',
            value: 'wp_up'
        })

        //set sentdata as the data to be sent
        jQuery.post(yess.ajaxurl, sentdataa, function (rez) { //start of funciton
            alert(rez);

            return false;
        } //end of function
        ,
        'html'); //set the dataType as json, so you will get the parsed data in the callback
    }); // submit end here
});

HTML Form

<form id="addimage" action="" method="post" enctype="multipart/form-data">
<input type="submit" name="upload" style="margin-bottom:15px;">
</form>

PHP code (I have used shortcode on the page for this code and below code is in functions.php file):

add_shortcode( 'test', 'addimage' );

function wp_up()
{   
echo "zeeshanaslamdurrani";
exit();

}

function addimage(){  

add_action( 'wp_ajax_wp_up', 'wp_up' );
add_action( 'wp_ajax_nopriv_wp_up', 'wp_up');


// register & enqueue a javascript file called globals.js
wp_register_script( 'globalss', get_stylesheet_directory_uri() . "/js/ajaxinsert.js", array( 'jquery' ) ); 
wp_enqueue_script( 'globalss' );

// use wp_localize_script to pass PHP variables into javascript
wp_localize_script( 'globalss', 'yess', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
} 
  • I've seen you have tried Mark's answer without success. Have you tried my answer? I've tested it and it works. – cybmeta Apr 20 '15 at 19:59
1

Shortcodes are too late to add ajax actions. Additionally, that actions would be added only if shortcode is executed, which is very unlikely to happen on a ajax request. The quickest way to make your code work is to move the add_action outside addimage() function.

add_action( 'wp_ajax_wp_up', 'wp_up' );
add_action( 'wp_ajax_nopriv_wp_up', 'wp_up');
function wp_up() {   
    echo "zeeshanaslamdurrani";
    exit();
}

add_shortcode( 'test', 'addimage' );
function addimage(){     

    // register & enqueue a javascript file called globals.js
    wp_register_script( 'globalss', get_stylesheet_directory_uri() . "/js/ajaxinsert.js", array( 'jquery' ) ); 
    wp_enqueue_script( 'globalss' );

    // use wp_localize_script to pass PHP variables into javascript
    wp_localize_script( 'globalss', 'yess', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
} 

Viewing your code, you may be interested also in this question: Enqueue Scripts / Styles when shortcode is present.

-2

You specify in the jquery API call that you expect to receive as a response a valid html, but the server returns simple text and not html, and this is probably the reason jquery decides that the request failed.

Always look at the actual traffic with browser developer tool to debug whether ajax responses are being sent or not.

  • Test yourself changing the dataType argument of jQuery.post to text, or set the content type header of the responde to HTML; it won't fix the issue if the ajax actions are not moved outside the shortcode callback. Also, you must know that if the response returns a mismatched data type, you can have problems (or not, depending on the exact situation) when you try to work with the data but it doesn't make the ajax call to fail, at least when working with jQuery. – cybmeta Apr 20 '15 at 17:04
  • @cybmeta, please take your attitude and spend it on someone else, I ignored you before but your downvote is so comic I just could not ignore it now. Back to ignore mode. – Mark Kaplun Apr 20 '15 at 17:19
  • Sorry, if the downvote didn't like to you but I think your answer is low quality and I explained why. If you think I'm wrong in the explanation, please tell me, I will appreciate it a lot. Sorry again if it didn't like to you. If I need to learn how to use up/downvotes, please tell me too, I will appreciate it as well. – cybmeta Apr 20 '15 at 17:29
  • 1
    Hello people ... I am confused here can anybody shared a solution ... I changed to text but still no result is returned. – Zeeshan Apr 20 '15 at 19:26
  • @Zeeshan as I explained, having configured the Ajax request for a data type and retrieve another data type won't fix your problem. The mismatched data types doesn't make the Ajax call fail; the Ajax call is sent and the response is retrieved. Only when the data type retrieved need some kind of parsing and it can not be done jQuery will throw an exceptition making the Ajax request fail because of the parsing error; for example, when jQuery retrieves and invalid JSON object and try to parse it. But that situation is not your situation. Please, read my answer. – cybmeta Apr 20 '15 at 20:37

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.