Answers.Body: <p>I found the solution by making an application of <a href="https://gist.github.com/keithmancuso/29e8446ec5fa66fb2b01" rel="nofollow">Front end login form with ajax</a> and <a href="http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions" rel="nofollow">Posting to controller actions</a>.</p>
  
  <p>Here is what is <em>really</em> important to understand with Craft controller call:</p>
  
  <blockquote>
    <p>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:</p>
  </blockquote>
  
  <pre><code>&lt;form method="post" action="" accept-charset="UTF-8"&gt;
      &lt;input type="hidden" name="action" value="cocktailRecipes/ingredients/saveIngredient"&gt;
  </code></pre>
  
  <blockquote>
    <p>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).</p>
  </blockquote>
  
  <p>So my solution here with the correct HTML with the form to submit:</p>
  
  <pre><code>&lt;form id="call-support-form" action="" class="form" method="post" accept-charset="UTF-8"&gt;
      &lt;input type="hidden" name="action" value="/unep/toolBox/requestBrandingHelp"&gt;
      &lt;input class="button" type="submit" value="Support adhérents"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the ajax form submit to call the controller:<br>
  (and do whatever you want after)</p>
  
  <pre><code>// 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);
          });
  
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-12T17:03:27.900Z
Answers.LastActivityDate: 2015-10-12T17:03:27.900Z
Answers.UserDisplayName: migmaker
Body: <p>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).  </p>
  
  <p>So I made a plugin controller sending email.<br>
  And my idea was to attach an ajax call with a <code>jquery on click</code> stuff to that button.</p>
  
  <p>So I did this.  </p>
  
  <pre><code>// 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);
          });
  
  });
  </code></pre>
  
  <p>My controller is called and send an email but I got a 404 error from the ajax call in console:
  <a href="https://i.sstatic.net/60Fbo.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/60Fbo.jpg" alt="enter image description here"></a></p>
  
  <p>I checked that ajax call with <code>Craft.postActionRequest</code> here below but it is for back-end scope only.<br>
  <a href="http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions-with-javaScript" rel="nofollow noreferrer">http://buildwithcraft.com/docs/plugins/controllers#posting-to-controller-actions-with-javaScript</a><br>
  <a href="https://craftcms.stackexchange.com/questions/3071/how-reference-craft-js-object-in-jquery-scope/3072#3072">How reference &quot;Craft&quot; js object in jquery scope</a></p>
  
  <p>I am a bit lost how to do that correctly...</p>
  
Tags: <plugin-development><ajax>
Title: Call plugin controller from frontend with ajax
ThreadText: # Call plugin controller from frontend with ajax
  
  (Asked by: username_0 on 2015-10-12)
  
  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:
  [![enter image description here](https://i.sstatic.net/60Fbo.jpg)](https://i.sstatic.net/60Fbo.jpg)
  
  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](https://craftcms.stackexchange.com/questions/3071/how-reference-craft-js-object-in-jquery-scope/3072#3072)
  
  I am a bit lost how to do that correctly...
  
  **Tags:** plugin-development, ajax
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2015-10-12. Score: 4 | Accepted answer
  
  I found the solution by making an application of [Front end login form with ajax](https://gist.github.com/keithmancuso/29e8446ec5fa66fb2b01) and [Posting to controller actions](http://buildwithcraft.com/docs/plugins/controllers#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);
          });
  
  });
  
  ```
  
  
  ---
  
  