1

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

  • Enable Dev Mode and see if the response body gives you any details. Even if it doesn’t, you should be able to find more info in craft/storage/runtime/logs/craft.log (search for exception.Craft\HttpException.400). Please update your question with any additional details on the error. – Brandon Kelly Mar 24 '15 at 12:18
  • @BrandonKelly can you have a look? – Johannes Lamers Mar 24 '15 at 14:53
  • Does anyone have an update on this one? – Marnix Harderwijk May 18 '15 at 18:20
2

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

type: "post",

should be:

method: "POST",
  • I have {{ getCsrfInput() }} in my form and removed data[window.csrfTokenName] = window.csrfTokenValue;. Still the same 400 error. – Johannes Lamers Mar 24 '15 at 12:04
  • @JohannesLamers Updated my answer based on the error details. – Brandon Kelly Mar 24 '15 at 15:02
  • Still the same error. – Johannes Lamers Mar 24 '15 at 15:16
  • @JohannesLamers Same error details too? Try deleting your log files first to be sure. – Brandon Kelly Mar 24 '15 at 15:19
  • Please update your question if the code has changed. Including your template code would help as well. – Brandon Kelly Mar 24 '15 at 15:42
-1

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..

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.