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 Load Event

I'm currently using a webview to display various local html pages, I'm wanting to pass data back and forth between the web view and my application but I seem to be running into a couple of issues.

To provide my webview with data I'm adding a webview load event listener than in turn fires off a "populateData" event which the page picks up, this works fine for the page that is loaded first in the web view, the problem is it doesn't work for subsequent pages. The load event is definitely being fired on each page load but the populateData event is never fired, this seems a logical way of providing data to each page of a webview. Code samples below:

app.js

webview.addEventListener('load', function() {
alert("Webview Load");

    Ti.App.fireEvent('populateData', {
        'patient': patient,
        'settings': {
            'name': Ti.App.Properties.getString('name'),
            'email': Ti.App.Properties.getString('email')
        }
    });
});

HTML Pages

Ti.App.addEventListener('populateData', function(data) {
alert("Populate Data Fired");
});

In the instance above the alert box "Populate Data Fired" only ever appears once but "Webview Load" appears on each page load. If anyone can shed any light on this particular issue it would be much appreciated.

— asked August 12th 2010 by Paul Oyston
  • fireevent
  • webview
0 Comments

5 Answers

  • Hi,

    This code works for me:

    Titanium.UI.setBackgroundColor('#000');
    
    var win = Ti.UI.createWindow({  
        title:'Test',
        backgroundColor:'#fff'
    });
    
    var wv = Ti.UI.createWebView({
        url: 'http://www.google.hu'
    });
    wv.scalesPageToFit = false;
    
    Ti.App.addEventListener('populateData', function(data) {
        alert("Populate Data Fired");
    });
    
    wv.addEventListener('load', function() {
        alert("Webview Load");
        Ti.App.fireEvent('populateData', {});
    });
    
    win.add(wv);
    
    win.open();
    

    Every time I click on a link, all of the alerts show. I use the SDK v1.4.0. I've tried it on iPhone and Android as well.

    I don't know, what is your problem. In my example (with your code) works good. Is your patient variable defined? Is it global or local?

    Maybe you could try to add events to webview, not Ti.App. Like this:

    wv.addEventListener('populateData', function(data) {
        alert("Populate Data Fired");
    });
    
    wv.addEventListener('load', function(e) {
        alert("Webview Load");
        e.source.fireEvent('populateData', {});
    });
    
    — answered August 12th 2010 by Adam Wallner
    permalink
    0 Comments
  • Our examples are slightly different, I'm using Ti.App.addEventListener in my Javascript on included HTML pages which works for the first loaded page.

    e.g.

    <script type="text/javascript">
    Ti.App.addEventListener('populateData', function(data) {
    alert("Populate Data Fired");
    });
    </script>
    
    — answered August 12th 2010 by Paul Oyston
    permalink
    0 Comments
  • I tried the example you gave but unfortunately this doesn't seem to work, I appreciate your efforts though!

    There seems to be something more sinister at play here (possibly local to my installation since it works for you), I can't fire or listen for events once I have navigated away from the initially loaded page within a web view, actually upon closer inspection it seems Ti and Titanium are undefined when landing on a new page.

    It does work if I re-create the web view every time I want to navigate to another page but obviously this isn't very efficient, however I may have to resort to that if I continue to have trouble because unfortunately I have deadlines to meet!

    — answered August 13th 2010 by Paul Oyston
    permalink
    0 Comments
  • Seems like the bug is still around. Thanks to Adam that it can be work-around.

    — answered October 4th 2010 by Peter Lum
    permalink
    0 Comments
  • Hmmm, I've played a little bit around this. It seems to be a Titanium bug. The onload function is called only once as well. You could report it on https://appcelerator.lighthouseapp.com/ .

    I've found a workaround though.
    This is the app.js code:

    wv.lastURL = null;
    wv.addEventListener('load', function(e) {
        if (e.url != wv.lastURL && wv.lastURL) {
            wv.url = e.url; // refresh webview
        } else {
            Ti.App.fireEvent('populateData');
        }
        wv.lastURL = e.url;
    });
    

    And this is the code in your HTML:

    Ti.App.addEventListener('populateData', function(data) {
        alert("Populate Data Fired");
        Ti.App.removeEventListener('populateData', this); //important
    });
    
    — answered August 12th 2010 by Adam Wallner
    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.