javascript - Data transition = Slide not working -dynamic list -
i new jquery mobile.
i trying sliding effect when navigate page # display2 thie below code.
but not able slide effect.
if remove rel="external" able slide on #display2(page whihc navigate to),the query string values returned null.
so if put rel="external" parameters passed #display2 slide transition not working. if remove re="external" slide works querystring parameters returned null.
can please let me know there way 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'); } }); });
part 1 - why rel=external worked & other options
the reason why rel=external works no transition because expects browser open external page , therefore, disable ajax. counter-effect this, you've got numerous options :
by using single page template
you make 2 pages single page. called single page template , second page's reference #page2 (or name you'd give id). how it'd :
<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 power of ajax driven navigation.
- this make partial loading, script loading easy, you'll need refer once.
- data-transfer between pages simple. you'll have store data in need in global variable or in
dataproperty of#page2, , retrieve inpageinitorpageshow(or event) of second page. - transitions, etc work.
- there no page refresh.
disadvantages
- if html content of 2 pages large, it'll difficult maintenance.
by using rel=external
as might have seen, rel=external can used when page refresh absolutely needed. upto user's choice. if a tag marked rel=external means browser treat external link, , ignore jquery mobile's ajax navigation system.
by referring scripts of page 2 in page 1
generally, able use page transitions, must use ajax system of navigation in jqm. general behaviour of ajax follows :
page1requestpage2in page2.html.- the
<body>of page2.html alone taken page2.html. - the
<head>section( might contain scripts, might have query-string logic) will ignored.
so change this, can refer page2's scripts in page1.html's head these scripts loaded , ready when jqm's ajax system pulls 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 working properly.
- the common scripts not referred multiple times, hence faster loading times.
- query strings work
disadvantages
- if 2 pages have little in common, you'll end having unwanted scripts in first page.
- what if have more 2 pages? if have 10 pages? refer 10 pages' scripts in
page1. dont think thats way.
by referring page2 scripts inside "data-role=page" section of page2.html (recommended)
this bring scripts along page when ajax brings in. work query strings. :
<div data-role="page" id="page2"> <script src="page2.js"></script> <!--- html--> </div> advantages
- the scripts pertaining particular page restricted within page.
- transitions work.
- query strings work
part 2 - alternative query string
the reason i'm saying because query strings archaic technology, because @ time, there no way store data. they're insecure because user can see data send on url. must consider using localstorage. i'm not saying must not use query strings. it's there better options available mobile data storage. see link more info how can use localstorage. also, see options have. now, looking @ query string :
platform=' + output.foldername + '&sid=test this made object. in click function of anchor tag inside <li>,
$(document).on("click", "li a", function(e) { //stop default action. e.preventdefault(); //take href; im assuming page2.html?platform=outputfolder&sid=test var params = this.href.split("?"); //now params[0] = page2.html //param[1] = platform=outputfolder&sid=test //set in localstorage localstorage["page2params"] = param[1]; //change page2.html $.mobile.changepage("page2.html", { transition : slide }); }) then, in page2.html's pageinit method, retrieve use :
//assuming have page page2 id in page2.html $(document).on("pageinit", "#page2", function() { var params = localstorage["page2params"]; //do want params. });
Comments
Post a Comment