Question

I have been wrestling with this problem for quite some time now.
I have an options page for a theme, and a single option registered.

I have been trying to get the option updated via ajax every time a user presses the save button, here is my code.

JS:

       function save_main_options_ajax() {

        $('.main-options-form').submit( function () { 

            var b       =  $(this).serialize(),
                optdata =  { action : "wp_ajax_main_options_save", data: b };

            $.post( ajaxurl, b, function (response) {
                if (response == 1 ) { alert('sucess'); }
                else { alert(optdata);}
            });
            return false;               
        });
    }
save_main_options_ajax();

The php:

 function main_options_save_ajax() { 

        check_ajax_referer('_wpnonce', '_wpnonce' );

        $data = $_POST;
        unset($data['option_page'], $data['action'], $data['_wpnonce'], $data['_wp_http_referer']);


        if ( update_option('main_options', $data ) )
        { die(1); }
        else { die (0); }           
}
add_action('wp_ajax_main_options_save', 'main_options_save_ajax' );

The response i see in firebug is 0. Im not sure what im missing here, i have tried this with some variations but nothing seems to work.

Answer 1

Found a way to save settings via ajax when using Settings API.

The main mistake that i made in my code is that i used the wrong url path.

Instead of using the standard ajaxurl which is what you would usually use when making ajax calls in wordpress; we use the action call of your settings api form, which is options.php.

Because we use this url path, there is no need for a php function to handle the request as options.php handles all of this for us.

Therefore we only need to handle the js function which looks like this in my instance.

 function save_main_options_ajax() {
           $('.main-options-form').submit( function () {
                var b =  $(this).serialize();
                $.post( 'options.php', b ).error( 
                    function() {
                        alert('error');
                    }).success( function() {
                        alert('success');   
                    });
                    return false;    
                });
            }
 save_main_options_ajax();

That is it, after saving i got the success alert, and my options were saved.

Note: There is only one peculiarity that I noticed. After finishing the POST request, and showing the success alert, the page makes a GET request for a page version of your options page which has the parameters &settings-updated=true added onto the end of the url.

I don’t know if this is something to be worried about, I have not encountered any problems, but it could be something to consider in the long run.