I'm developing an app where the client has a container div on their site and they use jQuery to retrieve my app and inject it into the container. My app is self contained as the html and javascript are all injected into client container. Each client has it's own css file so look and feel can change as needed by client. My app is ASP.Net MVC 4 and can be injected into a web page or a mobile app. I'm using HTML 5, css 3. I'm using ASP.Net MVC 4 to determine if the client is mobile or web and am loading jQuery Mobile if client is mobile.
So, since the app is self contained and I'm using jquery to load subsequent pages into a div as the user interacts with the app, how do i take advantage of jQuery Mobile's page transitions? I have to load subsequent content into a div using jQuery. I cannot do a complete page postback. I can't figure out how to do page transitions.
Thanks for your time.
Try multi-page apps: your file can contain multiple pages:
<div data-role="page" id="first">
...
</div>
<div data-role="page" id="second">
...
</div>
After you load additional pages and add them to DOM, then you call
$.mobile.changePage($("#third"));
More details about multi-page apps here:
http://jquerymobile.com/test/docs/pages/multipage-template.html
Related
Im starting a project from scratch in Worklight. Im using Jquery Mobile and I need to know how Im suppose to do the transition between pages. When I drag and drop a new list view, the following code is generated using Hyperlinks:
<ul data-role="listview" id="listview" data-inset="true">
<li data-role="list-divider" id="divider">Divider</li>
<li id="listitem">Item</li>
<li id="listitem0">Item</li>
<li id="listitem1">Item</li>
</ul>
But if I take into consideration the "building multiple page application" guide, I should not use hyperlinks...How should I do this?
As you rightly so mention, Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
In order to implement multipage navigation, then, you can use either jQuery Mobile's changePage or jQuery's load functions (or the equivalents in other frameworks...), depending how you'd like your application to behave.
jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/
.load()
http://api.jquery.com/load/
Here are a couple of Worklight 6.1 projects demonstrating page navigation:
JQM_multipage_load_changePage.zip - uses either .load or .changePage
JQM_multipage_changePage_pageshow.zip - uses .changePage and .pageShow
In both approaches you have 1 HTML file (Worklight's index.html) and multiple other HTML files; you take the contents of these HTML files and replace with it a specific subset of the index.html. This way Worklight's index.html remains intact (the references to the framework's JS, etc), but the app contents is changed.
Taking the above to your particular case, you can add an onclick to your href and use jQuery Mobile "to transition" and display the contents of "another" page.
I started working with JqueryMobile a little time ago and I'm trying to adapt my website for mobile devices.
I'm using ASP.NET Mvc and the structure of my page is this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
#Scripts.Render("~/bundles/jqueryflexslider")
</head>
<body>
<div data-role="page" data-theme="a">
#RenderBody()
</div>
</body>
</html>
The thing is that inside my layout page I have a partial view with a simple jquery function that animate my menu, slideup/down on click. When I reaload the page it works fine, but when i hit the back button it simple doesn't work anymore, but if i hit refresh again voialaaa, it's works.
I read the jquery mobile documentation about "Scripts & styles in the head" and it says that
..The default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided)
My question is how do i reload the content and get my scripts working (presuming that the problem is the reload thing) if not, someone could point me a direction or what is the best structure for this case?
I finally got it working!
My problem was that everytime I navigate from page to page, my <div id="page" data-role="page"> was duplicated. Since I got two pages on DOM and two IDS of the same menu, the click simple didn't work anymore. Once I add the data-ajax='false' on the links who were responsible for redirect me for another page, my page reloaded as usual and finally i got no more duplicated divs, IDS and everything runs flawless now.
JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET redirects have no problem to normal requests, but cause issues with AJAX. So the my answer is to turn off AJAX. For that, all you have to do is add the attribute data-ajax='false' to the tag.
In my case, an easy solution could be (as changing each Html.ActionLink/Url.Action is time consuming), adding this at the end of the _Layout.cshtml (just before closing of the 'body' tag).
$(document).on('pageinit', function() {
$('a').each(function() {
$(this).attr("data-ajax", "false");
});
});
That would be fine assuming you don't want jQuery mobile to use any Ajax with links too. I am happy to let it go ahead and use Ajax in most circumstances, so I only turn it off selectively where it can cause a problem.
We have an MVC site that has custom formatting throughout. We are using jQuery Mobile and want to use the features in it, but it themes everything. We do not want this.
I found this SO question and I added this Javascript code in the _Layout.cshtml page:
$(function () {
$('html').find('*').attr('data-role', 'none');
});
This works for all of the elements, but sometime after the page loads jQuery inserts a <div> with the attribute data-role="page" which still causes issues.
Can I somehow disable themes altogether?
Try simple add data-ajax=false to the links/buttons who are responsible for the navigation.
Ex:
<a href="#Url.Action("Index", "MyPage")" data-ajax="false">
This will prevent jquery from use ajax for the transitions, you page will reload and the duplicated data-role=page will not be on DOM anymore.
It works for me, maybe can help you too.
I'm working with jquery mobile and I've found that even when I add data-role="none" to an anchor tag, it is still getting intercepted by the mobile ui and treated as ajax. I have one link which I need to pull the ui out of the flow and this is causing it to fail.
From http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior
So you have to use either rel="external" or data-ajax="false" instead of data-role="none".
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.