0

I am new to Jquery mobile.

I am trying to get Sliding effect when i navigate to another page say # display2 from thie below code.

but i am not able to get slide effect.

If I remove the rel="external" i am able to slide but on the #display2(page whihc i would navigate to),the query string values are returned as null.

so if i put rel="external" the parameters are passed to #display2 but slide transition not working. if i remove re="external" slide works but the querystring parameters are returned null.

can you please let me know is there a way where both of them work together.

('#display').on('pagebeforeshow', function () {
           // $(this).find('[data-role=header] .ui-title').text(json.getLOBXMLResult[currentItem].FolderName);
                $.ajax("AppstoreWS.svc/getLOBXML", {
                beforeSend: function (xhr) {
                    $.mobile.showPageLoadingMsg();
                },
                complete: function () {
                    $.mobile.hidePageLoadingMsg();
                },
                contentType: 'application/json',
                dataType: 'json',
                type: 'GET',
                error: function () {
                    //alert('Something awful happened');
                },
                success: function (data) {
                    result1 = data.getLOBXMLResult;
                    $('#categoryList').children().remove('li');
                    $.each(result1, function (index, output) {
                        $('#categoryList').append('<li><a href="?platform=' + output.FolderName + '&sid=test#display2"  data-transition="slide" rel="external">' + output.FolderName + '</a></li>');
                                               });
               $('#categoryList').listview('refresh');
                }
            });
        });
BenMorel
  • 34,448
  • 50
  • 182
  • 322
kv.vinay kumar
  • 1
  • 2

1 Answers1

0

Part 1 - why rel=external worked & other options

The reason why rel=external works with no transition is because this expects the browser to open an external page and therefore, disable ajax. To counter-effect this, you've got numerous options :

By using Single page template

You could make your two pages into a single page. This is called a single page template and your second page's reference would be #page2 (or any name you'd give as the ID). This is how it'd look like : 

    <div data-role="page" id="page1">
      <!--Stuff in page 1-->
    </div>
    <div data-role="page" id="page2">
      <!--page 2 stuff-->
    </div>

Advantages

  • The DOM can leverage the power of ajax driven navigation.
  • This would make partial loading, script loading easy, as you'll need to refer all this only once.
  • Data-transfer between pages is very simple. You'll just have to store the data in you need in a global variable or in the data property of the #page2, and retrieve it in the pageinit or pageshow (or any event) of the second page.
  • Transitions, etc will work.
  • There will be no page refresh.

Disadvantages

  • If the HTML content of the two pages are large, it'll be difficult for maintenance.

By using rel=external

As you might have seen, rel=external can be used only when a page refresh is absolutely needed. Its upto the user's choice. If an a tag is marked with rel=external it means the browser will treat it as an external link, and will ignore jQuery Mobile's ajax navigation system.

By referring all the scripts of page 2 in page 1

Generally, to be able to use page transitions, you must use ajax system of navigation in jQM. So the general behaviour of ajax is as follows :

  1. page1 will request for page2 in page2.html.
  2. The <body> of page2.html alone is taken from page2.html.
  3. The <head> section( which might contain your scripts, which might have your query-string logic) will be ignored.

So to change this, you can refer to page2's scripts in page1.html's head so that these scripts will be loaded and ready when jQM's ajax system pulls the body of page2.html.

 <script src="jqm.js"></script>
 <script src="page1.js"></script>

 <!--page 2 scripts-->
 <script src="page2.js"></script>

Advantages

  • Your transitions will be working properly.
  • The common scripts will not be referred to multiple times, hence much faster loading times.
  • Query strings will also work

Disadvantages

  • If the two pages have very little in common, you'll end up having unwanted scripts in your first page.
  • What if you have more than two pages? What if you have 10 pages? Will you refer to all 10 pages' scripts in page1. I dont think thats the way.

By referring to page2 scripts inside "data-role=page" section of page2.html (recommended)

This will bring the scripts along with the page when ajax brings it in. This will also work with query strings. This will look something like this : 

  <div data-role="page" id="page2">
    <script src="page2.js"></script>
    <!--- your html-->
  </div>

Advantages

  • The scripts pertaining to a particular page are restricted to within that page.
  • Transitions will work.
  • Query strings will also work

Part 2 - alternative to query string

The reason I'm saying this because Query strings are archaic technology, because at that time, there was no way to store to data. They're also insecure because user can see the data you send over the URL. You must consider using something like localStorage. I'm not saying you must NOT use query strings. It's just that there are better options available for mobile data storage. See this link for more info about how you can use this localStorage. Also, see this for all the options you have. Now, looking at your query string : 

platform=' + output.FolderName + '&sid=test

This could easily be made into an object. So in the click function of the anchor tag inside <li>, 

$(document).on("click", "li a", function(e) {
  //stop default action.
  e.preventDefault();
  //take the href; Im assuming its page2.html?platform=outputFolder&sid=test
  var params = this.href.split("?");
  //now params[0] = page2.html
  //param[1] = platform=outputFolder&sid=test
  //set this in localStorage 
  localStorage["page2params"] = param[1];
  //change to page2.html
  $.mobile.changePage("page2.html", { transition : slide });  
})

Then, in the page2.html's pageinit method, you could retrieve it for your use : 

//assuming you have a page with page2 as id in page2.html
$(document).on("pageinit", "#page2", function() { 
   var params = localStorage["page2params"]; 
   //do anything you want with params. 
});
Community
  • 1
  • 1
krishwader
  • 11,341
  • 1
  • 34
  • 51