PowerButtons Plugin Examples

Basic example for the confirm button

hint: The "confirm" attribute is set to the message to show; if the user hits "accept", the action of the button will continue (i.e. show an alert).

confirm

Basic example for the showmessage button

hint: The "showmessage" attribute is set to the message to show; once closed the message, the action will continue (i.e. show an alert)

showmessage test

Basic example for the verify button

hint: The "verify" attribute is set to the javascript code to evaluate; if the code evaluates to "true", it will continue the action (i.e. show an alert)

test verify

Basic example for the asynctask button

Here we have a long running task that needs to be executed upon pressing the button. The asynctask button will execute it and in the meanwhile will show a modal dialog

hint: here we also add a data-showmessage that will execute after the task ends

async task

Basic example for the formset button

hint: The "verify" attribute is set to the javascript code to evaluate; if the code evaluates to "true", it will continue the action (i.e. show an alert)

test input 1 test input 2

test formset

Basic example for the formbutton

In this example, we are substituting the button for a form inside a button, so that the form is submitted when the button is clicked

hint: If you click the button, the button will submit a form to this page; in the submitted URL you can check that the name of the button appears as a parameter (the submit method is set to GET)

form button

Using the library in other components (1)

In this example we are using the library in a component that is not a button, but a link

go to github

Using the library in other components (2)

Now we are using the library on a image, to show a message when it is clicked

Click on the image!

Programmatical

The button is a common button, that is being converted into a confirm button programmatically

programmatical button

Multiple actions

The button is getting multiple actions: first confirmation and then show a dialog

multiple actions

Example with multiple actions

In this example we are introducing a form that we are validating, adding a derived field (hidden) and greeting the user with not even a line of code

submit

Example for a cancellable task using AsyncTask button

In this example we have a task that will run for 5 seconds, but it is possibile to cancel the task

Important: if the task does not finish, the dialog will not be hidden. This is to protect the execution of the task.

async task

Extended example for the formbutton

The form button can also add some hidden fields, so that they are submitted along with the value of the button

Note: in this case we are adding two fields: x1 and randomvalue. The second is a javascript expression that will be calculated when clicking on the button

form button

Dealing with defaults (internationalization example)

In this example we are changing the default values to set it in different languages, so that each value that is not defined, will get it from the globals

test