4

The following code

<a data-rel="dialog" href="/Client/Events?ID=c2a7a58e-bef1-4574-987f-4adfc2c3ecc1">
    <div class="ui-li-aside"> 1 </div>
       <div>
          Alejandra Garcia
       </div>
   </a>

This works on my computer browsers, also works on windows phone browser. But does not work on iphone or ipad browser. Looks like the link gets clicked but i see no dialog. Either it is super delayed or just not working.

The response and load time for the page is pretty quick and works seamless on a regular desktop browser. Its a very small page that loads up.

any tips that i should try to get it to work?

MoXplod
  • 3,813
  • 6
  • 36
  • 46

2 Answers2

4

I suspect it has to do with urls you are using and JQM not understanding what to make of links like this:

/Client/Events/StubCheckIn/innasf?stubID=c807321b-5381-4338-adef-9e676374d85d

There is no file ending, no hashtag and I've been fighting with a simple [?para=meter] (https://github.com/jquery/jquery-mobile/issues/4253) link and JQM handling it for a few days.

The easiest way I solve "nothing happening on ipad" is enableing the iPad debugger and console.log-ging through the respective JQM widget. In your case start here (about line 3582):

// click routing - direct to HTTP or Ajax, accordingly
$( document ).bind( "click", function( event ) {
    // your first flag
    console.log("flag 1 - click detected")
    if( !$.mobile.linkBindingEnabled ){
        return;
        }

     var link = findClosestLink( event.target ), $link = $( link ), httpCleanup;

     if ( !link || event.which > 1 || !$link.jqmHijackable().length ) {
        // your second flag
        console.log("flag 2 - not a link?!?)
        return;
        }
      ...

Do this all the way through the click-handler and make sure you flag all returns, which end the function for various reasons.

When you are done with the click-handler (not that long) you will see it firing a changePage, so follow it to the changePage handler and continue flagging. This should start around line (#3232) here:

  // Show a specific page in the page container.
  $.mobile.changePage = function( toPage, options ) {
     console.log("flag x - made it to changepage");
     ...

Go all the way through changepage and then follow to transitionpages (that won't be it I think) and $.mobile.loadPage (about #2931, more likely).

Once you have flagged everything (stop after loadpage! :-), reload the page on browser and ipad and see where the ipad fails vs the browser. Probably will take an hour but you will have a good understanding of how JQM works afterwards :-)

Another reason could be the pushstate handler (about #3781). If a browser supports pushstate (desktop yes, iOS... not sure, iOS3 no) you can make nice URLs, so if you go from your page:

root.com/client/events/checkin/innasf

to a dialog

http://root.com/Client/Events/StubCheckIn/innasf?stubID=96e63aee-1465-4ecd-ad35-123f240d09ff

your browser still displays the page url - probably because you set changehash to false (which keeps the url). This (I believe) is done by the pushstate handler, because your URL should be: 

 root.com/client/events/checkin/innasf#http://root.com/Client/Events/StubCheckIn/innasf?stubID=96e63aee-1465-4ecd-ad35-123f240d09ff&some-dialog-ending

This will be the url non-pushstate devices will try to resolve (my iPad ios3.3, for example), where it also does not work.

My guess however would be that your links fail somewhere in the click or changepage handler, when the URL is resolved by JQM.

If you flag yourself through, let me know where the difference between browser and iOS shows up. Then we can see if this is fixable.

MoXplod
  • 3,813
  • 6
  • 36
  • 46
frequent
  • 27,643
  • 59
  • 181
  • 333
  • That answer gives a lot of insights into how to debug this thing and i am surprised that JQM has problems detecting links without file extensions. Seems old school! i wish i had time to debug jQM, but i dont! :) Maybe i will have to for now just go with a simpler approach of making it a regular page, instead of a dialog. Thanks for your answer. – MoXplod May 03 '12 at 21:52
  • no problem. if you get around, post back, then I will check if my 2cents are of any help. – frequent May 03 '12 at 22:02
  • pushstate was just fixed by jqm. I tried your page again on ipad. still does not work. so, one option ruled out. – frequent May 03 '12 at 22:40
2

Ok, I checked the site under the Debug console in iOS Safari. It appears Safari is blocking the cross-domain request to facebook that your dialog loads (referenced here: Unsafe JavaScript attempt to access frame warning in Safari) - that was the warning the debug console showed. From my research, it seems Safari is stricter about this than other browsers.

Community
  • 1
  • 1
servarevitas3
  • 483
  • 1
  • 6
  • 23
  • Can you share how you debug in ios safari? Is there something like firebug present? – MoXplod May 03 '12 at 20:22
  • You can enable the debug console on your iPad by going to Settings, then Safari, then Advanced. It's not a very good console, but it does help. – servarevitas3 May 03 '12 at 20:23
  • This is another method for debugging mobile websites: http://jsconsole.com/remote-debugging.html – servarevitas3 May 03 '12 at 20:24
  • That's odd, because the error message specifically said it was an attempt to access a frame and gave a facebook URL, much like in the question I posted. I'd copy the message, but the dialog does not let you copy text. – servarevitas3 May 03 '12 at 20:26
  • Did some more testing. The error has not come up again, and I was able to get the dialog to display by tapping around. Have not been able to get it to display again. I think the issue is somewhere in the list code and not the dialog code. – servarevitas3 May 03 '12 at 20:29
  • Most browsers output notices for Facebook/Twitter/Social widgets but none that I'm aware of actually block the communication. – Jasper May 03 '12 at 23:04
  • See this post, it's got better answers than the link posted in this answer: http://stackoverflow.com/questions/3577947/facebook-gives-unsafe-javascript-attempt-to-access-frame-with-url-error-in-chr – Jasper May 03 '12 at 23:07