Introduction H-Action Button Jquery (HAB-JQuery) is a small JavaScript code to manage send multiple data from an event (click, change, keyup etc..). Sounds simple, of course, because developer can do thierself using JQuery. But HAB-JQuery has set up the class name to be use and some HTML attribute to link multiple data/value to a single function.
Example
Let say I have a function
named a()
and a button.
<button>
Submit
</button>
function a(){
//do something
}
What I wanna do is, whenever I click that button, it runs the function. In classic way, we may put onclick="a()"
attribute in the button tag, but it is not a best practice. In JQuery, you may do like this:
$(button).on("click", function(){
a();
});
The problem is, how if the button has it's own value and it's related form input. An alternate way, you may use my HAB JS. Let's see example below:
1. Basic Usage
To make the button accessible and functioning with HAB, you have to put the class
name with action-button
. By default, HAB with read onclick
event on this class
name.
To link a function to this button, we may put data-command="function_name"
attribute in the button
tag. Send single value using data-value="value_here"
attribute and if you have many data/value, you may send a JSON in data-param='{"json" : "data"}'
attribute in the button
tag.
<button class="action-button" data-command="myFunction" data-value="Hello" data-param='{"word" : "world!"}'>
Submit
</button>
Now we may create our myFunction
(there is many way to create function with in JQuery or so on, but I ll use naked JS as example).
HAB will send data-value
and data-param
in an array
value. (Format: array(json: data-param, string: data-value)
)
function myFunction(value){ //value is an array
var obj = JSON.parse(value[0]); //convert data-param into JS object
var val = value[1]; //Assign data-value to JS variable
//Do something here
alert(val + " " + obj.word);
}
2. Action Button with Input Value
If you wanna make the value sent from and input
field, here's some example:
You may put data-input="input_id"
attribute in button
tag.
<input type="text" id="myVal" />
<button class="action-button" data-input="myVal" data-param='{"param" : "goes here"}' data-command="myFunction">
Send
</button>
The data-input
value will be the value of the second array
index as array(json: data-param, string: data-input from input value)
.
function myFunction(value){ //value is an array
var obj = JSON.parse(value[0]); //convert data-param into JS object
var val = value[1]; //Assign data-value to JS variable
//Do something here
alert(val);
}
3. Working with text OnChange
and OnKeyUp
event.
Sorry, I haven't finish develop yet :P