Hi all,
I'm hoping someone can point me in the right direction on this issue that I only get on a mobile device.
It's easier to point to the site than to explain it so here goes...

1. Click here for the site
2. Select Lookups from the menu and make the following selections...
3. Manufacturer: Hayward
4. Category: Pumps
5. Subcategory: Inground Pumps
6. Assembly: Super Pump 2600 Series, Full Rated
7. On the Parts Explosion, touch #13 (Seal Assembly).
   A panel is displayed.

Ok, here's where the problem starts...
In the lower right corner of the panel, is an icon (like the letter "i") that, when touched, displays a modal with additional information. The problem is that, sometimes, that link is dead (i.e. touch it- nothing happens). What's weird is that I have only seen it happen on mobile devices in portrait orientation. If I rotate the device to landscape orientation, it works. I mean literally, I touch it in portrait orientation (doesn't work), immediately rotate the device to landscape, touch it again and it works.
I'm baffled.

Here are the key pieces of information that I can think of...

• The parts breakdown template is loaded ONCE when the page loads.
  After that, all requests are AJAX calls to a REST-like service fetching JSON, so the layout is not parts-list-specific.
  This page uses Angular to render the display on each request.
• Touching the "More Info" icon makes an AJAX call to the server.
• The problem does not occur on all parts breakdowns but, generally, if it happens to one part in a parts breakdown, it will happen with all parts in that breakdown.
• There were cases where it worked fine for a given parts breakdown for a while and then, for no apparent reason, this problem started.
• The problem only happens on mobile devices, Android and iPhone - have not been able to reproduce it in a desktop browser, even in responsive mode.
• Only happens in portrait orientation - landscape is fine.

Finally, when I clear out the unnecessary cached data in an Android device, the problem goes away.

Does anyone know what might cause this?
I'm wondering if it could be related to the CSS but I don't know what I should look for.
Any ideas would be greatly appreciated. Thanks.

Carl

What version of Bootstrap are you using?

Bootstrap broke modals past 3.33 I think on mobile devices which resulted in odd behavior with modals not popping up or the black background not behaving properly. The workaround is to ensure any modals are defined directly off the root.

+++ Rick ---

Hi Rick,

I'm using Bootstrap v3.3.2
But it's not even getting to the point of trying to display the modal. The "More Info" icon link makes an AJAX call for the data before trying to display the modal. That call is not being made. The link icon is dead. But when I rotate the phone to landscape orientation it becomes alive, the AJAX call is made and the modal is displayed as it should.
I rotate the phone back to portrait orientation and the icon is dead again.

But it's sporadic. It does not behave this way all the time. But it does not seem to come and go for a given parts breakdown. So far, for any given parts breakdown, it works fine until such time as it stops working. Then it does not work again until I clear the cache.

Carl

Well, I thought I had tried this before but maybe I was mistaken.
I refreshed the main lookups page and the problem went away. So it certainly appears to be a caching issue.

So I'll wait until the problem resurfaces and add Response.AppendHeader("Cache-Control", "no-cache") in the method that fetches the parts data and see what happens.

Caching could be the problem but from what you describe I think it might be something a little different. You should keep an eye on that.

Also, if you have to explicitly force caching on a page there generally is something wrong with the design of the page. Either the page should always display the same thing or you need to differentiate the URL in some way (ie. a user id or other identifier or query string value) to make sure each URL with specific content is unique.

+++ Rick ---

Hi Rick,

The page itself only loads once and after that everything is handled by AJAX calls. Each parts list request is made via an AJAX call. What was puzzling me is that the "More Info" link was live for most parts lists but would go dead for others.

The problem did resurface yesterday afternoon (i.e. the "More Info" link was previously working and then went dead) so I added Response.AppendHeader("Cache-Control", "no-cache") in the process method that responds to the AJAX call for the parts list. All the parts lists that I had found having the dead link "fixed themselves" (i.e. no manual page refresh or clearing the cache) and the problem has not yet resurfaced. I've been checking the "problem parts lists" every few hours since I made the change and, so far, it's working fine.

I still don't understand why the link would toggle between dead and alive simply by rotating the phone between portrait and landscape orientations. Any ideas on that?

Thanks,
Carl