[TIMOB-16081] iOS: WebView firing 'beforeload' event by Ajax calls

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Closed
Resolution	Needs more info
Resolution Date	2014-02-20T22:28:07.000+0000
Affected Version/s	Release 3.1.2, Release 3.1.3, Release 3.2.0
Fix Version/s	n/a
Components	iOS
Labels	supportTeam, webview
Reporter	Marco Cota
Assignee	Ingo Muschenetz
Created	2013-12-26T16:16:58.000+0000
Updated	2017-03-22T22:32:30.000+0000

Description

Issue

When using the beforeload and load events event to execute an action (show a loader) AJAX calls also fire the beforeload event but doesn't fire the load event. Documentation mention that this event only if fire when loading local content, but on testing its being fired on remote content also.

Steps to Repro

1. Run sample code on iOS device or simulator Expected Result: When the html is loaded the red overlay should hide. Actual Result: The html loads and hides the red overlay but when the ajax is called the red overlay is shown again and no load event is fired so the overlay doen't hide blocking the webview content.

Sample Code


var window = Ti.UI.createWindow({
	backgroundColor:"white"
});

var webview = Ti.UI.createWebView({
	url:'http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations'
});

var loader = Ti.UI.createView({
	width:'80%',
	height:'60%',
	backgroundColor:'red'
});

webview.addEventListener('beforeload',function(e){
	Ti.API.info("beforeload "+e.url);
	loader.show();
});

webview.addEventListener('load',function(e){
	Ti.API.info("load "+e.url);
	loader.hide();
});

webview.addEventListener('error',function(e){
	Ti.API.info("error "+e.url);
});

window.add(webview);
window.add(loader);
window.open();

Console Log

iOS Simulator


[DEBUG] :  New scheme: <NSMutableURLRequest: 0xde84c20> { URL: http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations }
[INFO] :   beforeload http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations
[DEBUG] :  New scheme: <NSMutableURLRequest: 0xdca4a10> { URL: http://www.hdsupply.com/locations/app.asp?lob=WC&source=WC&nobanner=1 }
[INFO] :   beforeload http://www.hdsupply.com/locations/app.asp?lob=WC&source=WC&nobanner=1
[INFO] :   load http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations
[DEBUG] :  New scheme: <NSMutableURLRequest: 0x1388e9c0> { URL: http://www.hdsupply.com/locations/app.asp?lat=37.3351212&lng=-122.03256229&rad=10&lob=WC&nobanner=1 }
[INFO] :   beforeload http://www.hdsupply.com/locations/app.asp?lat=37.3351212&lng=-122.03256229&rad=10&lob=WC&nobanner=1

iOS Device


Dec 26 09:27:30 iCotaman webviewandroid[454] <Warning>: [DEBUG] New scheme: <NSMutableURLRequest: 0x16659430> { URL: http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations }
Dec 26 09:27:30 iCotaman webviewandroid[454] <Warning>: [INFO] beforeload http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations
Dec 26 09:27:30 iCotaman profiled[453] <Notice>: (Note ) profiled: Service stopping.
Dec 26 09:27:35 iCotaman webviewandroid[454] <Warning>: [DEBUG] New scheme: <NSMutableURLRequest: 0x165a8aa0> { URL: http://www.hdsupply.com/locations/app.asp?lob=WC&source=WC&nobanner=1 }
Dec 26 09:27:35 iCotaman webviewandroid[454] <Warning>: [INFO] beforeload http://www.hdsupply.com/locations/app.asp?lob=WC&source=WC&nobanner=1
Dec 26 09:27:37 iCotaman webviewandroid[454] <Warning>: [INFO] load http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations
Dec 26 09:27:42 iCotaman webviewandroid[454] <Warning>: [DEBUG] New scheme: <NSMutableURLRequest: 0x166f7ed0> { URL: http://www.hdsupply.com/locations/app.asp?lat=19.35428288767054&lng=-99.12552894102328&rad=10&lob=WC&nobanner=1 }
Dec 26 09:27:42 iCotaman webviewandroid[454] <Warning>: [INFO] beforeload http://www.hdsupply.com/locations/app.asp?lat=19.35428288767054&lng=-99.12552894102328&rad=10&lob=WC&nobanner=1

Comments

Pedro Enrique 2014-02-20

We need more details on this. Where is this ajax called? Where do I need to click?

Pedro Enrique 2014-02-20

You can also check what type of navigationType the beforeload event gives you and then show the view or do whatever needs to be done accordingly.

   webview.addEventListener('beforeload',function(e){
       Ti.API.info('navigationType: ' + e.navigationType);
   })

   Ti.UI.WEBVIEW_NAVIGATIONTYPE_LINK_CLICKED
   Ti.UI.WEBVIEW_NAVIGATIONTYPE_FORM_SUBMITTED
   Ti.UI.WEBVIEW_NAVIGATIONTYPE_BACK_FORWARD
   Ti.UI.WEBVIEW_NAVIGATIONTYPE_RELOAD
   Ti.UI.WEBVIEW_NAVIGATIONTYPE_FORM_RESUBMITTED
   Ti.UI.WEBVIEW_NAVIGATIONTYPE_OTHER

Vishal Duggal 2014-02-20

This is a side effect of the fixes TIMOB-3370 and the limitations of the UIWebViewDelegate interface on iOS The *beforeload* event is fired on webView:shouldStartLoadWithRequest:navigationType: delegate callback. The *load* event is fired in the webViewDidFinishLoad: callback. While we have the URLRequest in the first delegate callback we have no such info in the second delegate callback. The *beforeload* event fires with the url set to the url of the request in the callback. The *load* event fires with the url set to WebView.request.url property. We will not fire the *load* event if the WebView.request.url does not change (This is what TIMOB-3370 enforced). So you might see a lot more *beforeload* events on iOS than load events. iOS also returns the *navigationType* in the *beforeload* event. If the navigationType is not *Titanium.UI.iOS.WEBVIEW_NAVIGATIONTYPE_OTHER* a *load* event is guaranteed. So you might want to ignore all *beforeload* events where *navigationType* is *Titanium.UI.iOS.WEBVIEW_NAVIGATIONTYPE_OTHER*.
Vishal Duggal 2014-02-20

Explanation of the load and beforeload events on iOS has been added. The problem the customer is facing can probably be solved by ignoring a few beforeload events. Going to resolve this as needs more info. If the problem is not solved by the workaround above, please re-open with exact steps for reproduction.

Vishal Duggal 2014-02-20

Try this code as workaround

   var window = Ti.UI.createWindow({
       backgroundColor:"white"
   });
    
   var webview = Ti.UI.createWebView({
       url:'http://mqa.qa-whitecap.ecom.hdsupply.com/webapp/wcs/stores/servlet/ContentDisplayView?catalogId=11101&langId=-1&storeId=11301&page=Store_Locations'
   });
    
   var loader = Ti.UI.createActivityIndicator({
       message:'LOADING',
       backgroundColor:'black',
       color:'white',
       borderColor:'black',
       borderRadius:5,
       borderWidth:1
   });
   
   //Ensure first beforeload is processed. navigationType is other when setting url or data etc.
   var firstLoad = true;
    
   webview.addEventListener('beforeload',function(e){
       Ti.API.info("beforeload "+e.url);
       if (firstLoad || e.navigationType != Ti.UI.iOS.WEBVIEW_NAVIGATIONTYPE_OTHER) {
           firstLoad = false;
           Ti.API.info('*********LOAD******' + e.navigationType);
           loader.show();
       } else {
           Ti.API.info('*********NOLOAD******' + e.navigationType);
       }
   });
    
   webview.addEventListener('load',function(e){
       Ti.API.info("load "+e.url);
       loader.hide();
   });
    
   webview.addEventListener('error',function(e){
       Ti.API.info("error "+e.url);
       loader.hide();
   });
    
   window.add(webview);
   window.add(loader);
   window.open();

Alvin Charles 2014-09-29

@Vishal Duggal That worked fantastic for iOS. Is there any workaround for android also?
Lee Morris 2017-03-22

Closing ticket due to the information that was requested not being provided.

JSON Source