Titanium Community Questions & Answer Archive

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

webView with remote HTML - does not fireEvent

Fellow Appcelerators,

Making fireEvent work on iPhone and latest Appcelerator 1.4.x is driving me nuts and I hope community can help me. I have two problems:

Scenario: A simple app with app.js page and and a WebView that should ideally display remote URL signup.php (HTML signup form that post to a 2nd page). I use the event to add update (hidden) FORM elements w device data.

The following is not working:

1) FireEvent is never fired for the remote HTML. If I change to a local HTML file as part of my project it works but when it's a remote PHP file producing same HTML is does not work???

2) When running as local file - after user submit form - on the subsequent 2nd HTML file events are not fired. Seems like subsequent pages loaded in webview do not fire events? Trying to reload the page by forcing url is not going to work as it would double-post my FORM

Code snippets

Apps.js:
.
navGroup=....
Ti.App.addEventListener('callbackUpdateForm', callbackUpdateForm);
signupWebView = Ti.UI.createWebView({url: "screens/signup.html"});
var signupWin = Ti.UI.createWindow({title: "SignUp",barColor: '#111'});
.
signupWin.add(signupWebView);
navGroup.open(signupWin,{animated:true});
.
function callbackUpdateForm(passedData){
    var s = "document.signup.q.value='Test'; document.signup.submit();";
    signupWebView.evalJS(s);
}

signup.html:
<form name=signup action="signup2.html" method="POSt" onsubmit="return process()">
</form>
<script>
function process(){
Ti.App.fireEvent('callbackUpdateForm', {});
</script>
— asked October 27th 2010 by niels Boegholm
  • fireevent
  • webview
1 Comment
  • Did you ever get an answer? I am having problems getting events to fire

    — commented October 30th 2010 by Aaron Saunders

7 Answers

  • I have not solved all issues but have posted a zipped project with code snippets for example.

    Find a downloadable zip of a project which loads external HTML (with a workaround for iPhone as very often in Appcelerator) The URL for the zipfile is here:

    http://www.saveass.com/triggertest.zip

    The project this end does indeed trigger javascript calls in the html picked up by the app.js file in titanium. It also can do this with external html for iPhone by downloading the html file caching it locally. Code included.

    On android the javascript calls are fetched from the external file with no problems for me. iPhone however needed to fiddling around.

    So not a complete working example for all problems, but maybe a little help for the one having problems getting user clicks to be picked up in app.js as I did.

    — answered January 10th 2011 by Harald Sakshaug
    permalink
    0 Comments
  • I have wasted my time trying to get a event to fire in a remote HTML file… never got it working…

    Using 1.5.1 and nada is transferred between the webview and titanium for me.

    Anyone able to do this, please let us know…

    htmlcontent:

    <a href='#' onclick='Titanium.App.fireEvent('webtoti', {data:'1'});'>Clicketyclick</a

    Listener in app.js

    Titanium.App.addEventListener('webtoti', function(e) {
      Titanium.API.info("from webview");
    });
    

    adding the eventlistener to the view itself did not help either…

    Harald

    — answered December 21st 2010 by Harald Sakshaug
    permalink
    6 Comments
    • don't you have a quote problem in htmlcontent?
      Titanium.App.fireEvent works for me in both directions.

      — commented December 21st 2010 by u no
    • Does it really work?

      Went a little quick with copy and paste there, the html does ofcourse show:¨

      <a href="#" onclick="Titanium.App.fireEvent('webtoti', {data:'1'});">Click</a>
      

      Did just work with some javascripting in order to deploy the html to the page avoiding all codebehind stuff from asp.net. And did copy off the javascript source and not the html :)

      I use SDK 1.5.1 and 4.2 for iOS, APIs2.2 for Android. Can you verify that it really works for you with this setup?

      I was about to ditch the webview, and download a package with content and make a proper view now…

      If it however is possible, this would be wonderful.

      If you could elaborate a little how you make it work, I would ber very grateful!

      — commented December 21st 2010 by Harald Sakshaug
    • Just found out what caused my problem…
      8 hours of tracing the problem, resulted in finding the tiny error in the HTML markup. The HTML need to be very accurate in order for the event to fire, do not trust that it all looks good and shows perfect! After adding the missing tag, all of a sudden fireEvents were triggered. Even in a remote file using the url parameter.

      — commented December 22nd 2010 by Harald Sakshaug
    • Hi Harald, because I dont know if you get notified when I commented a different post: do you have a working example? Could you please share it?

      — commented January 2nd 2011 by Ted Chen
    • @Ted I have been on a different project for a couple of weeks, but back now and checked your comment. Find a downloadable zip of a project which loads external HTML (with a workaround for iPhone as very often in AppCelerator)
      The URL for the zipfile is here: http://www.saveass.com/triggertest.zip

      The project this end does indeed trigger javascript calls in the html picked up by the app.js file in titanium. It also can do this with external html for iPhone by downloading the html file caching it locally. Code included.

      On android the javascript calls are fetched from the external file with no problems for me. iPhone however needed to fiddling around.

      — commented January 10th 2011 by Harald Sakshaug
    • hello Harald,
      sorry, i've missed your comment. it seems that webview/fireEvent works fine for android up to 2.1. and Ti < 1.5.1, see also http://developer.appcelerator.com/question/116950/tiappfireevent–webview–api-16-issue do you have any new insight? thx, –

      — commented March 13th 2011 by u no
  • Hello, did someone ever seen a remote file firing a Titanium event? Is that possible or I am just wasting my time trying?

    Thanks!

    — answered December 11th 2010 by CallMePaul
    permalink
    5 Comments
    • It actually works, but beware the HTML need to be spotless with all tags.

      — commented December 22nd 2010 by Harald Sakshaug
    • @Harald: could you please post an example app.js and .html, please? I doublechecked my code but I cant't get it to work with remote url…
      TIA
      Ted

      — commented December 30th 2010 by Ted Chen
    • Work around included in the above comment. Android works out of the box using webView URL parameter. iPhone need to have the file locally and served to webView using the HTML parameter tho.

      — commented January 10th 2011 by Harald Sakshaug
    • I can confirm what Harald says. webView/fireEvent on the iPhone (I am on the iPad simulator here) works on local file. Identical file remote loads perfectly but doesn't fireEvents.

      I also can confirm that you need the <html> tags around it. To my experience the minimal string to pass to webview.html looks like

      "<html><a href=\"#\" onclick=\"Titanium.App.fireEvent('gotoURL', {url:'http://www.yikes.com'});\">link</a></html>"

      — commented February 23rd 2011 by Dirk Krause
    • The html tags are key like Dirk and Harald said.

      This style of link works too - a few characters less to type ( thanks to dawson toth ):-

      "<html><a href=\"javascript:Titanium.App.fireEvent('gotoURL', {url:'http://www.yikes.com'});\">link</a></html>"

      More helpful code here :- https://gist.github.com/853084

      — commented March 10th 2011 by Jeff Antram
  • Anyone succeeded with events on remote html-files? An working example for this case would be nice!

    — answered January 2nd 2011 by Ted Chen
    permalink
    0 Comments
  • I found a workaround to execute fireEvent on a remote URL :

        webview.addEventListener('beforeload', function(e){
            if (e.url.indexOf('front/logout') !== -1) {
                // Logout
                webview.stopLoading();
                Ti.App.fireEvent('logoutApplication', {});
            }
        });
    

    Like you see, we check the url on the beforeLoad, and execute our logout Application. We could also use hastags in the links instead of real links (mysite.com/#logout).

    — answered March 20th 2014 by Ludovic Lecerf
    permalink
    0 Comments
  • I haven't found a good example for this anywhere, it took me a long time to piece this much together, but I've found something that works for calling functions from within webview.

    set a function(doesn't have to be a function) in your TI app.js, such as

    goler = function(){
        Ti.API.info('Sue-Bob Goler');
    };
    

    then assign this function to the webview (still inside the TI app.js, like so :

    webview1.goler = goler()
    

    now, inside your webpage code, call that function, like so(inside a JavaScript onclick or the like) :

    Ti.UI.currentWindow.goler;
    

    EDIT: Disregard, this 'solution' was just me getting ahead of myself. I've still not found the proper way to do this.

    — answered May 25th 2011 by Matt Tabor
    permalink
    0 Comments
  • I haven't found a good example for this anywhere, it took me a long time to piece this much together, but I've found something that works for calling functions from within webview.

    set a function(doesn't have to be a function) in your TI app.js, such as

    goler = function(){
        Ti.API.info('Sue-Bob Goler');
    };
    

    then assign this function to the webview (still inside the TI app.js, like so :

    webview1.goler = goler()
    

    now, inside your webpage code, call that function, like so(inside a JavaScript onclick or the like) :

    Ti.UI.currentWindow.goler;
    
    — answered May 25th 2011 by Matt Tabor
    permalink
    0 Comments
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.