shanebp shanebp - 6 months ago 15
Ajax Question

Wordpress Ajax Firefox no response

I'm trying a simple ajax test in Wordpress / Buddypress.

The code below works fine in IE and Chrome.
But in Firefox, the javascript is called, but then it just refreshs the current page.
The are no errors in the firebug console, but the response is empty.
I don't think the php is being called.

What do I need to change to get this working in Firefox ?

the javascript:

jQuery(document).ready(function(){

jQuery('#test-form input#save').click(function(){
jQuery('.ajax-loader').toggle();

jQuery('#save').attr({'disabled': true});

jQuery.post( ajaxurl, {
action: 'test_save',
'cookie': encodeURIComponent(document.cookie),
'_wpnonce': jQuery("input#_wpnonce-save").val(),
},
function(response) {
jQuery('.ajax-loader').toggle();
// alerts work up to here in all browsers
jQuery('#test-form').append(response);
});
});


});

the php:

add_action( 'bp_after_profile_loop_content', 'show_test', 100 );
add_action('wp_ajax_test_save', 'test_save_function');

function show_test() {
?>
<form action="#" id="test-form">
<?php wp_nonce_field( 'save', '_wpnonce-save' ); ?>
<input type="submit" name="save" id="save" value = "test ajax"/>
<span class="ajax-loader"></span>
</form>

<?php
}

function test_save_function() {
check_ajax_referer('save');
echo "php -button was clicked";
}

Answer

This works in FF, Chrome and IE. Also - add die(); at end of php function

jQuery(document).ready(function(){

    jQuery('#test-form input#save').click(function(){
            jQuery('#save').attr({'disabled': true});

        jQuery.ajax({
            type: 'POST',
            url:"/wp-admin/admin-ajax.php",
            data: {
                action: 'test_save',
        '_wpnonce': jQuery("input#_wpnonce-save").val(),
            },
            success: function(results) {  
        jQuery('#save').attr('value', 'js was Clicked');
                jQuery('#test-form').append(results);
            }
    });
    return false;

    });
 });