Call plugin controller from frontend with ajax

Question

I want to send an automatic back office email when user click on a button (to request support) on frontend. Then I just display a confirmation message (we ll get back to you shortly).

So I made a plugin controller sending email.
And my idea was to attach an ajax call with a jquery on click stuff to that button.

So I did this.

// SUPPORT ADHERENT button click
$(".call-support a").on("click", function(e, visible) {

    e.preventDefault();

    var data = {
        // ...
    };

    $.ajax({
        method: 'POST',
        url: '/actions/unep/toolBox/requestBrandingHelp',
        data: data,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
        .success(function(data) {
            console.log('success', data);
        })
        .error(function(data) {
            console.log('error', data);
        });

});

My controller is called and send an email but I got a 404 error from the ajax call in console:

I checked that ajax call with Craft.postActionRequest here below but it is for back-end scope only.
http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions-with-javaScript
How reference "Craft" js object in jquery scope

I am a bit lost how to do that correctly...

Answer 1

I found the solution by making an application of Front end login form with ajax and Posting to controller actions.

Here is what is really important to understand with Craft controller call:

Most of the time, you’ll want to access controller actions via HTML forms over POST. To do this, we recommend that you leave your form’s ‘action’ attribute blank, and specify your action via a hidden input named “action” instead:

<form method="post" action="" accept-charset="UTF-8">
    <input type="hidden" name="action" value="cocktailRecipes/ingredients/saveIngredient">

When you leave your form’s ‘action’ attribute blank, browsers will default to the current request’s URL. Which is great in the event that your controller needs to reload the previous page without a redirect. A common example of this is when the user’s input didn’t validate, and you want to pass the errors back to your template (ideally tucked away within a model).

So my solution here with the correct HTML with the form to submit:

<form id="call-support-form" action="" class="form" method="post" accept-charset="UTF-8">
    <input type="hidden" name="action" value="/unep/toolBox/requestBrandingHelp">
    <input class="button" type="submit" value="Support adhérents">
</form>

And the ajax form submit to call the controller:
(and do whatever you want after)

// member support button click
$("#call-support-form").submit( function(e) {

    e.preventDefault();

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

    $.ajax({
        method: 'POST',
        url: '/',
        data: data,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
        .success(function(data) {
            console.log('success', data);
        })
        .error(function(data) {
            console.log('error', data);
        });

});