Open New Windows / iPad

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
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
Richard KortsAuthor Commented:
To Murfur,

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

Thanks
0
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
Ahem! England IS in Europe.
But sometimes we're not in the EU...
0
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
Richard KortsAuthor Commented:
To Murfur,

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

Thanks
0
Richard KortsAuthor Commented:
I think I will have to go to Apple Store.

This is impossible.
0
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
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
Richard KortsAuthor Commented:
Murfur,

I tried both in Chrome, same issues.

I'd LOVE to try that, I think it's a GREAT idea.
0
MurfurFull Stack DeveloperCommented:
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
Richard KortsAuthor Commented:
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
Richard KortsAuthor Commented:
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
MurfurFull Stack DeveloperCommented:
404 file not found: jquery.lightbox_me.js
0
Richard KortsAuthor Commented:
To Murfur,

I found that, fixed it & it WORKS!!!
0
Richard KortsAuthor Commented:
Excellent & persevering.

Thanks!
0
MurfurFull Stack DeveloperCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iPad

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.