I'm using Jquery mobile for my mobile application. before I changing a page I want to make some CSS changes on that page. When I am setting for example adding class to id of the next page,or color change: $("#divA1").css("background-color","blue");
It change the same id on the current page (if it exist) and only then change next page. How can I set my CSS settings while on one page but load the next page with those CSS settings.
In most scenarios, jQuery Mobile loads additional pages into the DOM via ajax calls. This is a fairly fundamental part of how it works and you should insure that all markup IDs across all pages are unique.
<div id="page1" data-role="page">
<div data-role="content">
<div id="myContent1"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div id="myContent2"></div>
</div>
</div>
If your pages contain similar sub-componants, consider a class instead:
<div id="page1" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content">
<div class="myContent"></div>
</div>
</div>
Classes allow for selection such as $("#page1.myContent").css("background-color");
If it must be on a new page, you have three options.
You can pass a variable in the URL to test on the new page and change the CSS appropriately. eg. www.url.com?newcolor=f00
You can put a hidden form on the current page, update the values in it and pass it when you go to the next page. (Ugly way to do it but it works.)
Set a cookie. (My preferred solution, works great as long as cookies are enabled. Which, honestly, they may not be.)
However, the best option, especially on a mobile device is to keep the current framework of the page and get new content via ajax and load it into a content div on the current page.
I don't understand exactly what you're trying to do, but I would suggest you using an asynchronous ajax call to download the DOM of the next page.
Then you can apply the changes you want to that DOM, and finally you plug it into your current DOM.
An stub for that woul look like this:
$.ajax('path/to/next/page', {
async : true,
complete : function ajaxCallback(newSite) {
$item = $('YOURSELECTOR');
// Here you can make changes, such as CSS edition
$item.css({'background-color' : '#FF0000'});
// Since you want to make changes to the new site only if you did them in the first site...
if ($item.length > 0) {
$(newSite).find('YOURSELECTOR').css({'background-color' : '#FF0000'});
}
// Here you can append the new site to the DOM
}
});
Related
I'm generating pages dynamically in jQueryMobile, but I can't understand why the new generated page is not updated to the last version.
This is the use case:
Page A contains a list of 'a' elements. When I click one, the app redirects to a new page that is generated dynamically. Then I go back to page A. I click another 'a' element, but from now on, the app will always redirect to the first page that was dynamically generated.
Please look at this fiddle:
http://fiddle.jshell.net/cqUrD/
This is my code:
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>static page</h1>
</div>
<div data-role="content"> Create new page
<div data-role="content"> Create another new page
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
jQueryMobile:
$(document).on('click','a',function() {
nameId = $(this).attr('id');
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content"> Last id was: '+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
//alert(nameId); this prints the right value
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
How can I solve this problem? I need to always show the updated version of the new page.
Thanks in advance!
Working example: http://jsfiddle.net/Gajotres/Xfh8p/
Before new page is created previous one must be removed. In this case a DOM was filled with new pages but first one was still there and because they all had same name that first one had a priority.
Also when binding a click event don't bind it to a tag only, this was also a problem. Each time return button was pressed another page was created in DOM.
All in all this will work:
$(document).on('pageinit', '#home', function(){
$(document).on('click','#createfirst, #createanother',function() {
nameId = $(this).attr('id');
alert(nameId);
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
});
$(document).on('pagehide', '#page', function(){
$(this).remove();
});
In this case pagehide event has been bound to dynamically created page. Because it is bound to the document object it will still be there when page is removed. It tells jQuery Mobile to remove page #page during the transition from it.
As you can see I have used jQuery Mobile page events to trigger a page removal. If you want to find more about this topic take a look at my other ARTICLE (my personal blog) or find it HERE.
When you are clicking the button second time, the page with same ID is already in DOM so I think jQuery is unable to create a second one with the same ID (maybe caching). I changed the code a bit. You need to remove the #page if it already exists.
if ($('body').find('#page').length != 0) $("#page").remove();
Link: http://fiddle.jshell.net/cqUrD/1/
Given a one-html-multiple-pages app, in each of my pages I plan JS inject long html codes and animations which can be heavy. HTML code such :
<div data-role="page" id="page11">
...
</div>
<div data-role="page" id="page12">
<h2 id="anchor12">Title: Page 12</h2>
<script>myScript12() // inject complex content to #anchor12</script>
</div>
1. When does my myScript12() is fired ? (When I open the .html file or when I click and open the #page12 ?
2. What happen to the JS generated content when I leave #page12 for an other page ?
Edit: I don't want to load all my 20 heavy pages on .html load.
Solution: +1 for the detailed explanation by Gajotres (JQM: document ready vs page events), below is my current solution. To run the js ONLY when the given data-role="page" is displayed...
Use the following JQM HTML/JS:
<div data-role="page" id="page12">
<h2 id="anchor12">Title: Page 12</h2>
<script>
$('#page12').on('pageinit') { //only run when page is displayed
myScript12() // inject complex content to #anchor12
});</script>
</div>
That script will execute as soon as page is loaded into the DOM. That's why page events exist. Basically if you want to time your code execution do it inside a page event. If you want to find more about page event's read my other answer: jQuery Mobile: document ready vs page events.
When you leave your page that content is still there loaded into the DOM. If you want to prevent large DOM content you can use pagehide event to clean previous page content. There's also an attribute that can be placed inside a data-role="page" div to prevent DOM cashing. Attribute name is data-dom-cache="true" and you can find more abut it here.
I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)
Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});
guys!
I use jquerymobile 1.3.0 and jquery 1.9.1
I have 2(more) jquerymobile pages.
For example:
<div data-role="page" id="firstPage">
<!-- Header -->
<div data-role="header">
<h3>First page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
<div data-role="page" id="secondPage">
<!-- Header -->
<div data-role="header">
<h3>Second page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
I'm need to change from first page to second page, and send some params usually URL
I tried to use this method:
$.mobile.changePage('#secondPage',
{
data: {id: 123, module: 111}
}
);
After this method, the elements on first page is hide and url is change to www.mydomain.com/main.html?id=123&module=111
but page is not change. I think in order to change the page to a URL to a hash of this page.
and the URL must be of the form
www.mydomain.com/main.html?id=123&module=111#secondPage
then i tried to use:
location.href += '?id=1234&module=111#secondPage';
This method is work )))
But when i tried go back to firstPage, page is changed, but in URL remain the data
www.mydomain.com/main.html?id=123&module=111
Then i tried delete this data using next method
location.href = location.href.replace(location.origin, "").replace(location.pathname, "");
But after this method my firstPage is looped to change.
Please help guys. How to send data to secondPage and delete this data when i going back to firstPage?
My back button used native jquerymobile method for go back.
<a data-theme="a" data-role="button" data-transition="fade" href="#firstPage" data-iconpos="notext" class="ui-btn-left backButton"></a>
P/S. I'm sorry for my english, my english level is elementary
If you define two pages in one html, you don't have to send arguments to other page with URL. Just use javascript variables and page events to use them.
If you use URL arguments to run server side code, just use different .html files. One html file, one page style.
But for smooth transition effects on mobile devices and best user experiment, i prefer using AJAX and create/change pages live,
Best regards
I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.
What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?
Here's my code:
<div id="tabs">
<div id="overview">
<a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
</iframe>
</div>
The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.
Ajax with JQuery (use this and you will be loved on SO; the AJAX functions are great and simple)
Ajax with Prototype
Ajax with MooTools
Standalone Ajax with Matt Kruse's AJAX toolbox (Used to use this, using JQuery today because I needed a framework)
AJAX with Dojo (Said to be fast, but AJAX is not as straightforward)
Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.
Maybe the jQuery UI Tab might be helpful here if you like to try it.
EDIT: AJAX example with UI Tabs.
First, the HTML will look like this.
<div id="tabs">
<ul>
<li><span>Overviews</span></li>
<li><span>Gallery</span></li>
<li><span>Reviews</span></li>
</ul>
</div>
Then make sure that you import the appropriate jQuery files:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
etc...
Then add the code to create the tabs:
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
There's an alternative to AJAX!
You can load ALL three possible contents into separate DIVs.
Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".
Cheap, easy, does not require AJAX costs for extra http request or for coding.
Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.
You don't need script.
<ul><li>foo link<li>bar link</ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>
Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).
If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.
It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.
If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>
You would then need to add the following CSS to the BODY element using:
BODY { Background: transparent; }
The HTML iframe is to be used to include/display non-template content, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.
In your case you just want to have a tabbed panel. This can be solved in several ways:
Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block; (show) and display: none; (hide) on the tab content divs accordingly.
Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.
Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.
When going for the JavaScript based approach, I can warmly recommend to adopt jQuery for this.
This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript">
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)
As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.
http://docs.jquery.com/Ajax/jQuery.get
Something along these lines:
$.get("toframe.html", function(data){
$("#tabs-1").html(data);
});
edit..
you could prepopulate or onclick you could do the get dynamically
$("#tabs a").click(function(){
var pagetoget = $(this).attr("href");
$.get...
})
If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.
The get is less code though, easier time.