Change profile in frontend with ajax

Question

I'm trying to update some checkbox fields through the frontend with ajax. After clicking / change of the checkbox the form needs to update the profile.

Template code:

<form class="form-horizontal form-ajax" method="POST" action="" accept-charset="UTF-8" id="notificaties">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="/users/saveUser">
<input type="hidden" name="redirect_" value="account">
<input type="hidden" name="userId" value="{{ user.id }}">

    <ul class="action-list">

        <li>
            <p>

            Ontvang updates over leuke nieuwe producten
            <span class="pull-right">
                <input type="hidden" name="fields[emailUpdates]" value="0">
                <input class="ajaxcheck" type="checkbox" id="fields_emailUpdates" name="fields[emailUpdates]" value="1" {% if user is defined and user.emailUpdates %} checked="checked"{% endif %}>
            </span>

            </p>
        </li>
        <li>
            <p>

            Ontvang email updates over geinteresseerde kopers
            <span class="pull-right">
                <input type="hidden" name="fields[emailReactie]" value="0">
                <input class="ajaxcheck" type="checkbox" id="fields_emailReactie" name="fields[emailReactie]" value="1" {% if user is defined and user.emailReactie %} checked="checked"{% endif %}>
            </span>

            </p>
        </li>
        <li>
            <p>

            Ontvang wekelijks een upate over de producten van jou favoriete verkopers
            <span class="pull-right">
                <input type="hidden" name="fields[emailFavorieten]" value="0">
                <input class="ajaxcheck" type="checkbox" id="fields_emailFavorieten" name="fields[emailFavorieten]" value="1" {% if user is defined and user.emailFavorieten %} checked="checked"{% endif %}>
            </span>

            </p>
        </li>

        <li>
            <p>

            Ontvang email updates van de reacties van jou producten
            <span class="pull-right">
                <input type="hidden" name="fields[emailComments]" value="0">
                <input class="ajaxcheck" type="checkbox" id="fields_emailComments" name="fields[emailComments]" value="1" {% if user is defined and user.emailComments %} checked="checked"{% endif %}>
            </span>

            </p>
        </li>

    </ul>
 </form>

JS code:

 $(".ajaxcheck").click(function(){
    var data = $(this).parents('form').serialize()

    $.ajax({
        context: this,
        method: "POST",
        dataType: "json",
        url: "/actions/users/saveUser",
        success: function(data, response){
            $(this).parents('.account-item').remove();
            console.log("success", response, data);
        }
    });
});

But it gives me an error: GET http://shop.craft.dev/actions/users/saveUser 400 (Bad Request)

The form gets updated. So it works. But it still gives me this error:

In my craft.log file:

exception.Craft\HttpException.400 Message exception 'Craft\HttpException' in /Volumes/HDD Drive/Sites/Shop/app/controllers/BaseController.php:191

Answer 1

The 400 error you’re getting is coming from BaseController::requirePostRequest(). It’s happening because this line:

type: "post",

should be:

method: "POST",

Answer 2

This worked for me. Add data: data, before dataType: "json",

I had the same error, and still get the same error if data source is not defined..