CODEWITHSUNDEEP
jquery-mobilebuttondynamic
Yako
Yako

Reputation: 3484

Using data-direction with dynamically loaded pages

I'm trying to load dynamic pages with jQuery, following this example.

(EDIT): Updated the code to provide a better view of the context

Here is a code sample

<div data-role="page" id="pageSample">
    <div data-role="header">title</div>
    <div data-role="content">
        <a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
    </div>
    <div data-role="footer">Footer</div>
</div>

$(document).bind( "pagebeforechange", function( e, data ) {
    // Generate dynamic content of targeted pages...
    $.mobile.changePage($(page), {
        transition:"slide",
        dataUrl:url,
        reverse:reverse
    });
});

The back button may be dynamically generated or not (such as this snippet). In both cases, it does not work reverse, as changePage is triggered through pagebeforechange. Therefore, I inserted a reverse variable in changePage() options.

I can't find a way to retrieve the data-direction value of the clicked item. I tried this just before changePage():

reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
    reverse = true;
});

But the reverse value is not updated in changePage(). I guess both codes run synchronously. Is there a way to update the reverse value in changePage() ?

Upvotes: 1

Views: 1784

Answers (1)

Omar
Omar

Reputation: 31732

Final update

As per our discussion and your example http://jsfiddle.net/Iris/UZBhx/21/

Change this

$('a').on("click", function()

to

$(document).on("click", 'a', function()

Another update

Binding the $.mobile.changePage to pagebeforechange triggers all your code twice. Thus you lose the value of reverse or it gets neglected when the command executes the first time.

Try binding it to pagebeforehide as below.

$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {

// Generate dynamic content of targeted pages...

  $.mobile.changePage($(page), {
   transition:"slide",
   dataUrl:url,
   reverse:reverse
  });
});

Update

To use reverse effect on specific buttons, you can follow this method.

First, assign a class for buttons with reverse effect, e.g. ui-reverse and add the below script.

$(document).on('click', '[data-role='button'].ui-reverse', function() {
 $.mobile.changePage( url, {
  transition:"slide",
  reverse: true, 
  dataUrl:url
 });  
});

"Back" button links - Jquery Mobile

data-direction="reverse"

Is meant to simply run the backwards version of the transition that will run on that page change, while data-rel="back" makes the link functionally equivalent to the browser's back button and all the standard back button logic applies.

data-rel="back"

This will mimic the back button, going back one history entry and ignoring the anchor's default href.

Adding data-direction="reverse" to a link with data-rel="back" will not reverse the reversed page transition and produce the "normal" version of the transition.

In your case, you want to reverse transition, use the below code.

$.mobile.changePage($(page), {
 transition:"slide",
 reverse: true, // this will reverse the affect of the transition used in the page.
 dataUrl:url
});

Read more about it here.

Upvotes: 2

Related Questions