How to invoke a Craft CMS button click to a controller action in JS
A step by step tutorial on calling a Craft CMS plugin or module controller action through an onClick event in Javascript.
The following tutorial walks you through how to invoke a Craft CMS controller action through an onClick event in Javascript, which is located in a control panel section of a Craft CMS plugin.
If you are interested in the exact answer, jump to Step Three.
We recommend that you download or clone our Open Source starter project, check out the main branch and complete the steps below.
If you wish to jump to step two, we recommend that you check out the tutorial/cp-section-UI branch.
The changes can be found on the tutorial/js-controller-action.
git clone git@github.com:delasign/craft-cms-starter.git
Step One: Setup the experience
Follow the tutorials linked below to setup the plugin, control panel section, UI and asset bundle that holds the javascript.
Step Two: Create the Controller & Action
In your the src folder of your plugin or module, create a controllers folder.
Within the controllers folder create your Controller, in our case we called it SampleController.php, and copy the code below.
Please note that the Controller must be PascalCased for it to work and the action must redirect to a valid page at the end of a process for it to function as expected.
Step Three: Call the controller action in JS
Navigate to the index.js file, or your chosen js file, within your asset bundle or the one we created in the How to create a custom user interface in a Craft CMS plugin tutorial.
In the onPressSend function, call the controller action through the line indicated below:
window.location.href = "/?p=admin/actions/craftcmsstarterplugin/sample/sample-invocation?id=" + this.getSelectedEmailEntryId();
What's important here ?
To call a controller action, you must route to the location where it is found. This is often shaped using a url similar to the one below
/?p=admin/actions/ + [your plugin or module handle] + / + [your controller kebab cased without the word controller] + / + [your controller action kebab cased without the word action] + ? + [any parameters that you wish to pass to the function as a query]
For example, if your module or plugin handle was hello-world, your controller was called ThisIsAControllerWithALongNameController and your action was named actionThisIsMyAction, that takes two parameters parameterA (string) and parameterB (int); a sample url would be:
/?p=admin/actions/hello-world/this-is-a-controller-with-a-long-name/this-is-my-action?parameterA=hello¶meterB=2023
Any Questions ?
We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.