JQueryMobile: stopPropagation() makes blank page flash on href click

Question

I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.

At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element. For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:

 $(document).on('pagebeforeshow', '#index',function(e){ 
   $('.details').bind('click', function (e) {      
     e.stopPropagation();
     e.stopImmediatePropagation();
   });
 });

And in the HTML:

<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
   <div data-role="collapsible-set" class="uurbon-block">
    <div data-role="collapsible" data-collapsed="false">
      <h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>        
        <span style="float:right;" class="button-span">
            <a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
              Button
            </a>     
        </span>  
      </h3>
    </div>
  </div>
</div>

This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable). Note: I have alredy tried setting body background color in css, won't work. Thanks for your ideas!

I had a similar problem with collapsibles, they seem to generate several different elements without the classes/ids you expect and your event never triggers. Maybe this answer will help you: http://stackoverflow.com/a/19755816/2699475 — mwil.me, Nov 14 '13 at 10:08
I probably didn't express myself correctly: I fixed my evet not triggering with the above JS code. The problem is that for some reason it causes a blank page to flash for 1-2 secs before loading the next page. PD: I can see in the RhoMobile log file that the button is causing the target to be rendered in a new page (instead of transitioning) How could I force it to open it on the same page? — Rubén Torrero, Nov 14 '13 at 10:36
Stopropagation is causing this, why are you using it? Link/button should work normally even if inside a collapsible. — Omar, Nov 14 '13 at 11:31
I tried without stopPropagation, the button would just collapse/expand the collapsible. There are several questions regarding that here in stackoverflow. One example: http://stackoverflow.com/questions/16772061/adding-the-button-to-the-collapsible-set-and-getting-the-value-of-the-collapsibl — Rubén Torrero, Nov 14 '13 at 11:39
try this `$('.details').bind('click', function (e) { e.stopImmediatePropagation(); $.mobile.changePage("file.html", { transition: "slip" }); });` — Omar, Nov 14 '13 at 13:34
No, it doesnt work either. For some reason it redirects me to my main index. In a closer look on the logs, it seems it does what I want, but then, RhoMobile redirects me to my main index (Probably some RhoMobile-specific issue) Any other alternatives so it doesnt process the request on a new browser? Thanks for your time! — Rubén Torrero, Nov 14 '13 at 14:44
Omar, it finnally worked :) Thanks to your suggestion and a little more investigation I got the right answer. Thanks. (im posting the answer now) — Rubén Torrero, Nov 14 '13 at 15:10

score 0 · Answer 1 · edited Nov 25 '13 at 16:04

As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks): and avoid RhoMobile trying to open this in a new browser is by using:

javascript:

$(document).on('pagebeforeshow', '#index',function(e){ 
    $('.details').bind('click', function (e) {
            e.stopPropagation();
            $.mobile.changePage("your_page");
    });
});

HTML: Button

Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.

There is still a problem: I want to be able to load a dynamic URL on that javascript code, so I tried putting a variable inside the tag, and read it on javascript. There are several times that the javascript needs to get run to change the page, but the varaible in javascript will only get the value from the first tag — Rubén Torrero, Nov 15 '13 at 08:21

JQueryMobile: stopPropagation() makes blank page flash on href click

1 Answers1