Solved

Open New Windows / iPad

Posted on 2014-10-01
30
220 Views
Last Modified: 2014-10-08
We have a web app being developed that will run on desktops / laptops (using Chrome or Firefox) & iPads.

There are a number of places in the app where another window is opened with the JavaScript construct window.open.

On my iPad these work in the expected way; that is, a new Safari tab is opened & the  appropriate content displayed. The customer says that when they close the opened tab (on an iPAD), it  sets the prior window to blank.

Are there settings under Settings, Safari that control this?

In my settings (Safari) I have Open New Tabs in Background ON and Block Pop-ups OFF.

Are there other settings that could effect this? Obviously JavaScript has to be ON

Thanks
0
Comment
Question by:Richard Korts
  • 18
  • 12
30 Comments
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
What happens on YOUR iPad when you close the secondary tab?
Can you show some code or a URL where we can try it out?

An alternative would be to open the pop-up as a modal window - see http://jqueryui.com/dialog/#modal-form or any number of other examples you can find on the web e.g. http://www.sitepoint.com/14-jquery-modal-dialog-boxes/

Of something else, you can turn Block Pop-ups ON because they will still work when triggered by user interaction, the ON/OFF relates to automatic pop-ups on page-load or page-close.
0
 

Author Comment

by:Richard Korts
Comment Utility
On my iPad, Safari displays the tab that had the calling page.

To view yourself:

Go to http://fwsprinklercdb.info/. Log in as Justin, pwd the same.

Select 10/1/2014. Click 193464.

On the Appointment Detail page, click "Map". On iPad, another tab opens with map. Click X in upper right to close map.

Thanks,

rkorts
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Well it works fine on both my iPad and my Mac except that on the Mac it is a separate window not a tab.  

Closing a tab or window should have no effect on other windows or tabs unless you have written a script telling to to do something to them so I guess the issue is with the client.

I am wondering if it is because you are using the button to submit the form. Try dropping the form and changing the button:
<input type="button" name="map" value="map" onclick="return chk_vals('m');" />

Open in new window

0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

I changed the code for the button along the lines you suggested; no difference.

I upgraded my IOS to the latest (8.0.2), thinking it might fail under newer versions; works fine for me. The customer is also under 8.0.2.

I don't know what to do.
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Tucked up in bed & will have another head scratch in the morning but just wondered if you know what browser the client is using and what version iOS on their iPad? Is the client able to physically show you the problem as it occurs?
0
 

Author Comment

by:Richard Korts
Comment Utility
The client & I are both on IOS 8.0.2. In researching this, I was told that the version of Safari was built into IOS.

But that makes me think, they MIGHT be using Chrome on the iPad, I seem to recall something about that.

I am in the San Diego CA area & the customer is in Fort Worth Texas so I cannot physically see it.

But I will ask them about Chrome, that might be it.

Thanks!
0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

Client is using Safari, so that's a dead end.

Thanks
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Been awake a while and had two coffees...
I've tried alternative browsers without success so I'm finding it hard to diagnose when I am unable to duplicate the error, as I'm sure you are!

I recall that some browsers would open a blank window as well as the window.open popup but given this configuration I wouldn't have expected it but I'm wondering if that might be what happening here. Can you ask the client if the original tab is still there behind the blank tab, i.e.
-- page 1
-- blank tab
-- popup map

Another thing I tried is to turn off tabs, in Safari settings set SHOW TAB BAR to OFF then reopen Safari and repeat the process, making sure the map tab/page is already closed. Then when you click the multi-page icon top right, you see all open pages in a grid and the bottom row should have the appointment detail page and the map popup pages side by side. What happens if the client closes the map page here?
0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

I asked customer for screen shots. He sent following with 4 screen shots:
_______________________________________

First is after clicking Map button
Second is blank screen after closing the map tab
Third is after refreshing the page once and it only partially loads
Fourth is after second refresh and the page loads like normal

It seems to work every other time you try it.
_______________________________________

I will call him & ask what "It seems to work every other time you try" means.

Are you in England or Europe?

Thanks
image1.PNG
image2.PNG
image3.PNG
image4.PNG
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Ahem! England IS in Europe.
But sometimes we're not in the EU...
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
I see he is operating on a mobile network and so I'm wondering if the page has not been downloaded fully. Certainly the map page looks half baked as if it is missing a style sheet. Can you get him to try again on WiFi?
0
 

Author Comment

by:Richard Korts
Comment Utility
Yes, I see.

This opens up a HUGE Pandoras box as I suspect the Techs (field personnel) will HAVE to use mobile as they will generally be in the field.

But that sounds like the reason.

I did not mean to disparage England by saying "England or Europe", I was just curious of the time zone difference, I see it's 8 hours. Or maybe 7 or 9, do use use daylight savings time?

I have only been to England once, London about 7 years ago.
0
 

Author Comment

by:Richard Korts
Comment Utility
I asked the customer to try it with WiFi. She (it turns out she is the main tester) says this:

Tried with the WiFi and it gave me the same error one time but never again. Tried it in two different work orders and it only did it the very first time on one work order and not at all on the other.

Also, this same person says it works properly on her iPhone. I'm assuming the iPhone is connected through a mobile network, but I'll ask.

My thinking was, before this message, that the first two items (the Map & the "AsBuilt") are images, potentially large & thus slower download times.

This seems to negate that.

Your thoughts?

Thanks
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
On one hand the inconsistency  of the problem doesn't help but then it does add some credence to our diagnosis thus far. Therefore difficult to say for sure but it seems as though we are getting closer. I appreciate that techs will be remote most of the time though...

That said, I wonder if some of the problem is caused by the Google map page as I am on my laptop on WiFi and that page alone took neat 8 seconds to load and there are several elements that have failed to load.

So perhaps we can look at ways of reducing the download footprint.

Have you tried using the Google API to create your own map rather than loading the whole google maps page? For example, this quick & dirty example took only 53ms to load - a helluva lot quicker than 8 seconds!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(32.698329,-97.38288);

		var myOptions = {
			zoom: 16,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		var marker = new google.maps.Marker({
			position: latlng,
			map: map,
			title: "3420 Overton Park West"
		});
				
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		marker.setMap(map);
		
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:732px; height:549px"></div>
</body>
</html>

Open in new window



Daylight  savings currently in effect, terminating on the last Sunday of October so currently 8 hours. Never made it to San Diego, but did work for a month at our office in San Francisco about oh, 15 years ago or more. That's my kind of city - quiet & laid back, but with a fun side if you want to find it. I then lived in New York for a couple of years and that was lovely but too frenetic for me - that place never goes to sleep!
0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

That's an excellent idea.

How did you get the Lat / Long of the address? I need to generalize that as of course each customer home is different.

I've done it before, I know there is a Google Maps function.

Thanks
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 11

Expert Comment

by:Murfur
Comment Utility
You can see the lat/long in a Google Map page if you open the page in a tab rather than in a popup with no address bar.... look for the part @32.698329,-97.382883 or ll=32.698329,-97.382883

You could manually get the LL for each address in your database and add that to the client record so that it populates the link behind the Map button (probably quite a laborious process) or you can use the Google Map   geocode API to do that for you, calculating the LL on the fly by searching for the specified street address. Bear in mind though, that the free version is limited to 2,500 requests per day.

I've put both of these online so you can see them working:

Basic map API withLat/Long supplied
map with Lat/Long calculated from address search

The latter one is printed below

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="utf-8">

		<title>EE Q_28529639 - Google Map geocoding</title>

		<style>
			html, body { height: 100%; margin: 0px; padding: 0px; }
			#map_canvas { width:732px; height:549px; }
		</style>

		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

		<script>
			var geocoder;
			var map;

			/*	initialize map	*/
			function initialize() {
			
				geocoder = new google.maps.Geocoder();

				/*	initialisation requires a starting LL  - something local would be suitable, in this case (for me) The Prime Meridian!	*/
				var latlng = new google.maps.LatLng(51.476793, -0.000494);

				var mapOptions = {
					zoom: 16,
					center: latlng
				}
		
				map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
			}
			
			/*	calculate LL from address search	*/
			function codeAddress(address) {

				geocoder.geocode( { 'address': address}, function(results, status) {

					if (status == google.maps.GeocoderStatus.OK) {

						map.setCenter(results[0].geometry.location);

						var marker = new google.maps.Marker({
							map: map,
							position: results[0].geometry.location
						});

					} else {

						alert('Failed to calculate address Lat/Long: ' + status);

					}

				});
			}
			
			google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="codeAddress('3420 Overton Park Dr W, Fort Worth, TX 76109')">
    <div id="map_canvas"></div>
  </body>
</html>

Open in new window

0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

I incorporated the logic you suggested to geocode the address & get a map. I incorporated it into the system. I asked the customer to try it. She responded:
______________________________________________

Still have the same issue. First time using the map button for 193464 it opened another tab and upon closing, the work order screen is still visable, fully loaded, and functional. Second time using the map button, another tab opened and upon closing the tab, the work order screen is blank. Refreshed once and it only loads part of the page and is not functional. Refreshed a second time and it works properly.

The only difference this time from when we tried it last week is that when the google maps tab opens, we no longer have the google options, such as directions (See screen shot)
__________________________________________

I didn't realize it worked the FIRST time, NOT the 2nd. I will try that way on my iPad, maybe I need a programmed "Close" button in the opened window that will invoke "self.close; (or whatever that syntax is).

Thanks
Google-Map.JPG
0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

Worked perfectly (1st & 2nd times) on my iPad.

Thanks
0
 

Author Comment

by:Richard Korts
Comment Utility
I think I will have to go to Apple Store.

This is impossible.
0
 

Author Comment

by:Richard Korts
Comment Utility
To To Murfur,

Do you know the degree to which Safari / IOS deal with JavaScript opened windows as opposed to say FireFox / Chrome on a Windows 7 based PC?

Thanks
0
 
LVL 11

Accepted Solution

by:
Murfur earned 500 total points
Comment Utility
Google map options e.g. directions etc. can be added as required on the script. My basic example was just that - basic. :)

You could consider opening the google map with a jQuery reveal or in a lightbox so that way no tabs of any kind are involved. The reveal would just move the other form elements out of the way but I think the lightbox is the neater solution. FYI I'm  using a very plain (but effective) tool called Lightbox_me

See examples here:
Reveal
Lightbox

and the code:
Q-28529639-geocoder-reveal.php
Q-28529639-geocoder-lightbox.php
0
 

Author Comment

by:Richard Korts
Comment Utility
Great idea.

The first time I opened the lightbox version, it was perfect. The second time, I get nothing (blank page), except for the address text box & the button.

When I open the reveal I get the attached; it's like doing a part of the map, the upper left corner??
geocoder-reveal.jpg
0
 

Author Comment

by:Richard Korts
Comment Utility
Murfur,

I tried both in Chrome, same issues.

I'd LOVE to try that, I think it's a GREAT idea.
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Hmm... weird - kept getting 304 Not Modified errors...
Rewritten and uploaded to same url Q-28529639-geocoder-lightbox.php

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="utf-8">

		<title>EE Q_28529639 - Google Map geocoding</title>

		<style>
			html, body { height: 95%; margin: 0px; padding: 0px; }
			#address { margin: 10px; }
			#map_canvas { width:732px; height:549px; display: none; }
		</style>
		
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src="jquery/jquery.lightbox_me.js"></script>

		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

		<script>
		
			$(document).ready(function() {
			
				$('#button').click(function(e) {
					$('#map_canvas').lightbox_me({
						centered: true,
						closeClick:	true,
						onLoad: function() { 

							/*	starting LL required for map initialisation - The Prime Meridian seems suitable!	*/
							var latlng = new google.maps.LatLng(51.476793, -0.000494);
				
							var mapOptions = {
								zoom: 16,
								center: latlng
							}
					
							var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

							/*	get address details	*/
							var address = $('#address').val();

							/*	calculate LL from address search	*/
							var geocoder = new google.maps.Geocoder();
							geocoder.geocode( { 'address': address}, function(results, status) {
			
								if (status == google.maps.GeocoderStatus.OK) {
			
									/*	move map to new location	*/
									map.setCenter(results[0].geometry.location);
			
									var marker = new google.maps.Marker({
										map: map,
										position: results[0].geometry.location
									});
			
								} else {
									alert('Oops! Failed to calculate address Lat/Long: ' + status);
								}
								
								marker.setMap(map);
			
							});
						
						}
							
					});
					e.preventDefault();
				});				

			});

    </script>
  </head>
  <body>

  	<div id="launcher">
	  	<input type="text" id="address" name="address" size="50" value="3420 Overton Park Dr W, Fort Worth, TX 76109" />
  		<input type="button" id="button" value="Show me" />
  	</div>

    <div id="map_canvas"></div><br /><br />
    
	<? require_once( '../statcounter.php' ); ?>
  </body>
</html>

Open in new window

0
 

Author Comment

by:Richard Korts
Comment Utility
I tried it twice in FF & in Chrome; worked all times. Going to adapt it to my site & see.

Thanks a lot for ALL your effort on this.
0
 

Author Comment

by:Richard Korts
Comment Utility
I copied your code & took out the <? require_once( '../statcounter.php' ); ?>

I uploaded it to my site & ran it. http://fwsprinklercdb.info/Murfur_lightbox.html

Produces nothing.

I seem to recall you used to have to register to use the Google API; maybe it's not doing it for me because the site is not registered to use the API?

Thanks
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
404 file not found: jquery.lightbox_me.js
0
 

Author Comment

by:Richard Korts
Comment Utility
To Murfur,

I found that, fixed it & it WORKS!!!
0
 

Author Closing Comment

by:Richard Korts
Comment Utility
Excellent & persevering.

Thanks!
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
Very glad it works for you - it has been a fun exercise!

Obviously you can do the same for the VIEW button.

Another thought from a design perspective, you could try putting a mini-map to the right of the form and if they want to see more detail they can click on it to make a bigger one open in the lightbox. Same idea with the hand drawing and the view button. It is a little thing but can improve the user experience by having less clicks.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

There is a security feature on iOS devices that is nearly impenetrable when it has been activated.  This article will provide some possible solutions as well as necessary steps to take to ensure you do not end up with a locked device.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now