$.mobile.pageContainer refers to the element that contains other virtual pages. It is set to <body>. So I assume that it can be changed. Indeed, some JQM methods (changePage) lets you specify non-default page container for a page. The JQM docs are lacking the necessary details. So my questions are:
Can you change the default page container in markup/code? How?
What are the reasons to have a page container other than <body>?
Does it mean that there can be multiple page containers with some "pages" residing in one page container and other "pages" residing in other containers? Why would you want to do this?
1 You can place your page divs within a container element in markup.
2 I use ASP.Net Webforms which requires a FORM element, so sometimes I add my jQM pages to a top level FORM instead of the body allowing me to use ASP.Net controls within my separate pages while sharing the same FORM element.
3 I think you need to keep all pages within the same container, otherwise links between pages break. Here is a jsFiddle with 2 pages in a container linking to eachother. Try putting them in separate containers and you will see the linking stop working.
<div id="PageContainer1">
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page 1</h1>
</div>
<div data-role="content"> Go to Page 2
</div>
</div>
<!-- insert separate container here
</div>
<div id="PageContainer2">
-->
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<h1>My page 2</h1>
</div>
<div data-role="content"> Go to Page 1
</div>
</div>
</div>
UPDATE: As pointed out in the comments, you can certainly navigate to pages in other containers via changePage, just the standard href="#page2" links break.
$.mobile.changePage("#page2", {"pageContainer": $("#Container2")});
I am not sure of a use case for having separate containers, perhaps code organization?
Related
I'm not sure I understand what's possible with multi-page templates in JQM so I need a bit of help. I'm using version 1.4.5.
Let's say my app has only two pages (Page A and B) generated by a multi-page template. It takes the server several seconds to generate each page because they require many database calls and data processing. Currently, this multi-page template is generated by a single script on the server, index.pl.
Both pages are accessed by the user through a navbar. Page A is the first page in the template so it's visible to the user first.
To speed up the app, I want the HTML for Page B to get generated and fetched from the server only after the user taps the navbar menu item for Page B.
After Page B loads, the user should now be able to switch between pages instantly since the content for both pages are loaded into the DOM.
What is the proper way of accomplishing this desired result?
Do I tie the navbar tap on Page B to an ajax call and inject the server response into Page B? This seems kludgy.
I'm thinking I'm missing something fundamental about JQM but I'm not sure what. Can someone help?
SERVER-SIDE SCRIPT PSEUDOCODE:
<!-- PAGE A -->
output <div data-role="page" id="page_a">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_a();
output </div>
output </div>
<!-- PAGE B -->
output <div data-role="page" id="page_b">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_b();
output </div>
output </div>
For your architecture the best approach is single page template but you can use the pagecontainer API to load any page programmatically.
$(":mobile-pagecontainer").pagecontainer("load", "about.html", { role: "dialog" });
Check the jQM docs for more information.
So I have an app that I am trying to strip out all of the JQuery Mobile and now use Intel's App Framework. I am having trouble figuring out how to integrate multiple html pages into the app so that I don't have to have all my code in a single file. I tried this:
$.ui.loadContent("page2.html");
but that doesn't seem to work. I get a 'loading content' spinner but nothing seems to happen.
How do I link pages together from different files?
Ok so I have figured it out. The documentation can sometimes be hard to search and there is no search box available on their website right now. But if you go to the quickstart and then then AFUI(on the left) and then panel properties they say:
data-defer="filename.html" - This will load content into the panel
from a remote page/url. This is useful for separating out content into
different files. af.ui.ready is not available until all files are
loaded asynchronously.
So in my index.html file I have something like this:
<div id="afui">
<nav>
<ul class="list">
<li>Post a Lunch</li>
<li>Personal Profile</li>
<li>Select University</li>
</ul>
</nav>
<!--Main View Pages-->
<div class="panel" title="Events" id="event-list_panel" data-defer="event-list.html" data-load="loadMainEventsList"> </div>
<div class="panel" title="Description" id="description_panel" data-defer="description.html" data-load="loadEventDetails"> </div>
<div class="panel" title="Select University" id="select-university_panel" data-defer="select-university.html"> </div>
</div> <!--id="afui"-->
and then I have the details of each page in seperate files. In my mind this does a literal copy/paste, and I haven't found any evidences yet that it isn't just a copy/paste.
Update:
in AF3 data-defer is now data-include
I'm just starting using jquery mobile in a project. The problem I'm having is that every anchor tag I add, it sets its content to a fixed height value. I can't find a way to modify that behaviour.
An example of the code I'm using is:
<div data-role="content" data-theme="none" class="flex-container">
<div><strong>Something</strong></div>
<img src="../animg.png" alt="Icon" />A text
</div>
Does it only happens to me?
I think this depends where your link is. Is it in a listview?
I tried to make two links with two different images inside (different size) and I don't see the behaviour you are describing.
Also, even though probably unrelated, # in links is normally used to link to another page.
See here - http://jsfiddle.net/TeNCE/
Can you either provide your jsFiddle or edit this one?
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content" data-theme="none" class="flex-container">
<div><strong>Something</strong></div>
<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/64/social_google_box.png" alt="Icon" />
<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png" alt="Icon" />
</div>
</div>
I have created a HTML layout below with jQuery UI tabs
All the tab information are related to Employee
HTML Code:
<div id="tabs">
<ul>
<li>Details</li>
<li>Deparment</li>
<li>Salary Info</li>
</ul>
<div id="tabs-1">
<p>Some fiels here</p>
</div>
<div id="tabs-2">
<p>Some fiels here</p>
</div>
<div id="tabs-3">
<p>Some fiels here</p>
</div>
</div>
All i need is i want to keep this in MVC page.
Can i have all tabs in one View or i can use #Html.Partial? or PartialViewResult? for each tab.
Some time the user may update only Department information. Here i should save only that tab information.
I want all these tabs loaded at first time and not in on demand using ajax.
Can anyone suggest how can i organize my need in MVC?
Note: Also another thing is i want to use the same for Add and Edit employee. In case of Add Employee i should able to view only Basic Detail as enabled and other tabs in disabled mode. Once the user save basic detail other tab should get enabled.
View fragmentation:
You can do either single view, or split it on multiple partials. It doesn't really matter till they render necessary html.
To save information from each tab separately, wrap each tab content in <form />, so you'll have multiple forms instead of one.
To show next tab on submit, solution will depend on submit process. If you have synchronous Post(Get) then you'll have to pass pass tab parameter with Response and depend on response open next tab on DOM ready (use jQuery for that). Otherwise, if you submit tabs with ajax, you may switch tab in your handler.
Here's a very simple fiddle:
http://jsfiddle.net/mmSKj/
If you click the "presets" button in the header bar, it opens a dialog. If you click the "close" button on the dialog, instead of going back to the page it came from, it goes to the last page (excluding the dialog itself) on the page (the one with the content This is another page). How come? Is there a way to fix the automatically inserted back button so it behaves itself properly (like the "home" button I included in the dialog) or, failing that, is there a way to remove the close button.
<div data-role="page" id="index">
<header data-role="header">
<h1>Index</h1>
Presets
</header>
<article data-role="content">
<div>This is the main page</div>
</article>
</div>
<div data-role="page">
This is another page
</div>
<div data-role="page" id="presets">
<header data-role="header">
<h1>Presets</h1>
</header>
<div data-role="content">
This is a dialog!
</div>
</div>
Update
As Taifun pointed out, the problem is the lack of an id on the page. Adding an id fixes my first fiddle. However, my real situation is a little more complicated, as shown in this fiddle:
http://jsfiddle.net/mmSKj/2/
Here I am actually creating pages dynamically using knockout, and I assign IDs to those pages via data binding, but, it seems, those ids are not recognized by jQuery Mobile for some reason. If you look with Firebug, you can see that the ids are correctly added to the attributes of the pages, but when you close the dialog, you end up on page 3 rather than the original page.
Update 2
Simple fix, I just added a dummy id to the bit of html that knockout is going to use as a template:
<!-- ko foreach: pages -->
<div data-role="page" data-bind="attr: {id: name}" id="dummy">
This is <span data-bind="text:name"></span>
</div>
<!-- /ko -->
See here.
The dummy id is replaced by knockout, so links to that page work correctly and jQuery mobile seems to be happy!
add an id to your other page
<div data-role="page" id="anotherpage">
This is another page
</div>
then it will work, see jsfiddle
coming back to another solution, because you mentioned: is there a way to remove the close button? Yes, just add this style, see also this answer...
<style>
.ui-dialog .ui-header a[data-icon=delete] {
display: none;
}
</style>
and another jsfiddle to demonstrate that