[support-michael]

Create Custom JavaScript Actions

This article demonstrates how to bind a JavaScript function to a button’s click action (src code is attached at end of the article). The Button Link property defines the action to take when the button is clicked. It’s value can be the file name of a page to transition the UI to or a JavaScript function to invoke when the button is clicked. Linking to a javascript requires prefixing the javascript function with javascript:

The attached demo illustrates:
1) calling phoneui.gotoPage() function
2) calling javascript alert() function (see figure-1 below)
3) calling a custom javascript function I created in the custom_page1.js file
See attachment custom-act-overview.png

The following screenshot illustrates the configuration of button2’s Link property to call the predefine javascript alert() function when clicked
See attachment show-alert-js.png

Lastly the 3rd button is bound to a custom JavaScript function that I created in the page1_custom.js file named exampleFunction. When the button is clicked the phoneui framework invokes the JavaScript exampleFunction(). This function will transition to page-3 and update a text component with the current system time. The outline snippet uses JQuery to lookup the text component and change the date text.
See attachment exampleFunction-ss.png

Source Code
See attachment custom-action-demo.zip

Attachments:

You must be logged in to view attached files.

[shahal]

Hello,
I followed your javascript but mine does not work. When I click on a button nothing happens. (I am a .js newbie)
Both .mobi files are in the same directory.
Do I have to create a .js file or custome.js file?

thanks

[support-octavio]

Hi shahal,

I suspect there is a syntax error in your javascript code. In order to make sure the onClick action in your buttons is working fine, please try a simple snippet code as the example suggests like:

alert('hello')

To confirm you don’t have syntax errors you can look for them in the Console Tab in the chrome development tools (open it pushing F12 while running the mobile web simulator).

Hope this helps.

[shahal]

@octavio,
I will do that, thanks.
You and Wayne are awesome!

[Author]

Posts