Jquery mobile data-rel="dialog" doesnot work on iphone or ipad

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?

Answers


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.


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.


Need Your Help

Android adding image to dynamic listview

android listview dynamic imageview drawable

I have already created a dynamic list view that passes text to a SimpleAdapter, however I would like to pass information to make an image appear from the drawable folder. Here is the XML layout for...

Is there any advantage of building bytecode than regular actionscript?

actionscript-3 flash bytecode

Im very curious , is there any advantage of building SWF using bytecode than regular actionscript ?