0

I am a bit mystified by how to utilize templates for Guest entries plugin working fine for normal post saving custom fields.

When I use ajax to submit I get an XHR 200 response but an HTML response - no JSON. Ideally I don't want to redirect to another page but just manipulate the DOM and pass some variables into the page form JSON returned on success.

I have read and reread every ajax post but still can't get a pure JSON response

Is it necessary to utilize some kind of detection within the template for Craft ajax?

Just when I thought i had ajax understood...

Here is my JS:

$(document).ready(function () {
//validation rules
$("form#brick").validate({
    ignore: ":hidden",
    rules: {
        "fields[firstName]": {
            required: true,
        },
        "fields[lastName]": {
            required: true
        },
        "fields[email]": {
            required: true,
            email: true
        }
    },
    messages: {
        "fields[email]": "Email is required"
    },

    submitHandler: function (form) {
        // Prevent default posting of form
        event.preventDefault();

        var data = $(this).serialize();

        $.ajax('/', data, function(response) {
            if (response.success) {

                console.log(response);
                $('#thanks').fadeIn();
                $('#brick').fadeOut();
                console.log(response);
            } else {
                // response.error will be an object containing any validation errors that occurred, indexed by field name
                // e.g. response.error.fromName => ['From Name is required']
                alert('An error occurred. Please try again.');
            }
        });
    }
});

});

  • 1
    What is the HTML that is being received? Are entries getting saved when you perform this AJAX request? – Ben Fleming Jan 23 '16 at 23:34
  • There's a bug in your JavaScript – function (form) {... should be function (event) {...; the bug means you're not properly preventing the form's default submission. Not sure if that's the root cause of your issue, though. – Mats Mikkel Rummelhoff Jan 24 '16 at 9:17
  • Updated JS above Works fine. The html in the ajax response is the core index.html template being loaded.... So confused – joomkit Jan 24 '16 at 10:44
3

There are some problems with your JavaScript that I expect is the cause of your issue.

From your code I'm assuming you're using jQuery Validate to validate the form before submission. Your first issue is the line

event.preventDefault();

within the submitHandler() method – jQuery Validate will actually prevent the default form submission for you, so this line is redundant. Also, there is no variable called event, so that's going to cause trouble.

The second issue is that you're using the wrong syntax for the $.ajax() method. Considering your current code, I believe you want to use the $.post() method instead.

Finally, you're serializing the wrong object – $(this).serialize() should actually read $(form).serialize().

With the above issues fixed, your code should look like this:

$(document).ready(function () {

    $('form#brick').validate({

        ignore: ":hidden",

        rules: {
            "fields[firstName]": {
                required: true,
            },
            "fields[lastName]": {
                required: true
            },
            "fields[email]": {
                required: true,
                email: true
            }
        },

        messages: {
            "fields[email]": "Email is required"
        },

        submitHandler: function (form) {

            var data = $(form).serialize();

            $.post('/', data, function (response) {
                if (response && response.success) {
                    $('#thanks').fadeIn();
                    $('#brick').fadeOut();
                } else {
                    alert('An error occurred. Please try again.');
                }
            });

        }

    });

});

Finally, for some pointers on how you could handle errors within the response payload, see this thread.

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.