Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Menu Button Needs to Trigger a Function located inside the webview

Here's my problem.

I have an Android App, an HTML ebook reader more or less.

It has 4 buttons on the Option Menu

Add Bookmark
Exit App

When i try to use the Menu EventListener to activate the Search function 'Search();' it says the Search() function is not defined or not existing (or something like that). I know that this is because of the Scope of the function.
I need to know how i can get the Menu EventListener to trigger the Search(); function that is inside of the WebView.

Below is my code for reference -


//This is a code skelleton for Android which is a wrapper for any WebApp
//it loads a specified  HTML,CSS, and JavaScrit and renders it on the WebView UI

// This is the HTML file of your WebApp
var HTML = 'HTMLui.html';
var webview = Titanium.UI.createWebView(
url: HTML

var window = Titanium.UI.createWindow(
url: 'menu.js',
navBarHidden : false



// This is the Code Skelleton for the Android Menu Button Event

var menu = Titanium.UI.Android.OptionMenu.createMenu();

// Search
var MenuItem1 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Search',
icon : 'Search.png'

// Bookmarks
var MenuItem2 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Bookmarks',
icon : 'Bookmark.png'

// Add Bookmark
var MenuItem3 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Add Bookmark',
icon : 'Plus.png'

// Exit
var MenuItem4 = Titanium.UI.Android.OptionMenu.createMenuItem({
title : 'Exit',
icon : 'Exit.png'

// First Menu Item  Listener
MenuItem1.addEventListener('click', function()

// First Menu Item  Listener
MenuItem2.addEventListener('click', function()


// First Menu Item  Listener
MenuItem4.addEventListener('click', function()


// First Menu Item  Listener
MenuItem4.addEventListener('click', function()




the JavaScript that contains the Search(); function is located in HTMLui.html

— asked September 23rd 2010 by Kevin Johnson
  • android
  • menu
  • option

3 Answers

  • Accepted Answer

    ok, so you have 2 cases:

    1. titanium to html( webview)

    The 'websearch' it's an arbitrary name give to the event.You can use whatever you want as long as it makes sense to you.

    so fireEvent works like fire the 'websearch' event with this parameters( data )

    the data can be something like this {color:'red'}

    so your function inside the triggered event will do something like

    // previously defined search
    function search(color) {
    //return all the objects that has the color specified as argument
    Titanium.App.addEventListener('websearch', function( data ) {
    search( data.color );  // this will alert "red".

    2. html( webview) to titanium

    In this case you will need to do it in reverse.
    Define the listener in the titanium side - let's say in app.js
    and trigger it from the html with fireEvent

    Hope makes more sense

    — answered September 23rd 2010 by Dan Tamas
  • You need to add an eventlistener in the html and from titanium to trigger this event.
    So inside HTMLui.html you put a script that does:

    Titanium.App.addEventListener('websearch', function( data ) {
    //execute your search function using the data object if needed

    and on the element you want to trigger this do so( let's say the_button):

    the_button.addEventListener('click', function() {
    Titanium.App.fireEvent('websearch', data)

    data it's an object and allows you to pass info ( for example search parameters )
    Keep in mind that the html cannot be remote, or you need to trick the system to think it's local( using xhr )

    Let me know

    — answered September 23rd 2010 by Dan Tamas
  • So, umm, ok, i'm a bit of a noob at passing data using JS and JSON type code. So let me see if i can understand this correctly.

    in the code you just gave me the part were it says 'websearch' is the name of the function in my HTML code (inside the webview), right?

    Also, i was wondering if you could give me an example of passing data to the 'data' object. It's a bit confusing to me.

    Finally, how could i reverse the process. … what i mean is… how could i pass information from the webview back into the app.js context?

    I'm keeping a notebook of all of these little things (using tiddlywiki) so as to make sense of everything as i use it. Along with clear and simple code examples.

    many thanks :)

    — answered September 23rd 2010 by Kevin Johnson
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.