I've got problem with jquery
page1.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 2
page2.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 1
main.js
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
});
This code working for page1.
When I navigate from page1 to page2 on page2 is string "gold value".
Its only working when I change main.js and page2.html like this:
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
$('#gold2').html(100);
});
and
when I change in page2.html
div id="gold2"
Due to the page loading method of jQuery Mobile, you may have many pages in the DOM at a certain time.
jQuery Mobile uses div elements with attribute data-role="page" to represent pages. First, make sure that your pages have a unique id, it does not matter if you separate your pages in many HTML files.
Now you can access your duplicate ID element specifying the current active page:
$(document).pagecontainer("getActivePage").find("#gold");
But I really recommend avoiding duplicate IDs, even in different pages. Use a class instead:
<div class="gold">gold value</div>
and
$(".gold").html(100);
Related
I'm using jQuery to include a header to my main index page (as well as other pages). I want to highlight different items of the nav bar (which is in the header.html) using CSS depending on which page the user is currently on. Say if the user is on the Home page, then CSS will add a class to the Home item of the nav bar found in header.html. The problem I'm having is that the class doesn't get added, presumably because I'm trying to add a class to an element that is in another (jQuery loaded) file
index.html looks like this:
<html>
<head>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</head>
<body>
<div id="header"></div>
<script>
$('.homeNav > a').addClass("navSelected");
</script>
</body>
</html>
The above is the main page of the site, where I'm using jQuery to load header.html into the div in the body. Then in my body script tag I add the class navSelected to the header element
header.html looks like this:
<header>
<h1>title</h1>
</header>
<nav>
<span class="homeNav">Home</span>
<span class="contactNav">Contact</span>
</nav>
So when the user hits this page, I want to add the navSelected class to the span with class homeNav in header.html, but the class does not get added and I'm not sure what the fix is.
If I use jQuery to add the class from within header.html then the class gets added fine, but that defeats the purpose of only highlighting the nav item relevant to the page the user is currently on
jQuery's load() is just a shortcut for $.ajax, and it's asynchronous.
You have to wait for the content to load, before you can manipulate it, and you'd do that by using the callback
$(function(){
$("#header").load("header.html", function() {
$('.homeNav > a').addClass("navSelected");
});
});
Your $('.homeNav > a') probably fail to find the DOM elements because this line is executed before the content is loaded (created). So use the callback of load like #KartikeyaSharma suggested.
There is a little change that the AJAX callback doesn't work because the creation of DOM elements takes time, so it is safer to call this function at the end of header.html:
onNavReady = function (){$('.homeNav > a').addClass("navSelected");}
Inside your header.html call this function at the end
...
<span class="contactNav">Contact</span>
<script>onNavReady()></script>
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600
We have a single page application with two views (essentially, a list of items and a details page for the selected item). Both views are in separate html files, and we’re using sammy.js to transition/navigate between the pages. Everything was working great until we tried to add jQuery Mobile to the mix. Now, when we navigate to the second page (the details page), jQuery Mobile is not styling the page.
Our working app is not set up as described by jQuery Mobile’s multi-page template (i.e., having all page divs in the same html file and use their navigation system to load linked pages into the DOM via AJAX). But, is it possible to have separate pages, use something other than jQuery Mobile’s navigation, and still have jQuery Mobile style the second page? Or, is there a way to force jQuery Mobile to style the second page?
Here’s some code snippets that’ll hopefully help show what we’re doing. (Note: We’re also using ASP.NET razor views.)
index.cshtml
<body>
#RenderPage("Views/items.cshtml")
#RenderPage("Views/item.cshtml")
#Scripts.Render("~/bundles/jquery")
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.loader.prototype.options.text = "loading. please wait...";
$.mobile.loader.prototype.options.textVisible = true;
});
</script>
#Scripts.Render("~/bundles/jquerymobile", ...)
</body>
items.cshtml (this page gets loaded and rendered correctly)
<section id="items-view" class="view" data-role="page">
<section data-role="header">
....
</section>
<section data-role="content">
(navbars, ULs, LIs, etc. are here, with each LI a link to go to the details page)
</section>
<section data-role="footer">
....
</section>
</section>
item.cshtml (this page gets loaded but NOT rendered correctly, there is no jQuery Mobile styling)
<section id="item-view" class="view" data-role="page">
<section data-role="header">
....
</section>
<section data-role="content">
(ULs, LIs, listboxes, textboxes, etc. are here)
</section>
<section data-role="footer">
....
</section>
</section>
router.js (used to route between pages)
....
navigateTo = function (url) {
sammy.setLocation(url); // url = #/items or #/item/1234
},
....
In the js file for the item page, we’ve tried:
var $page = $("#item-view");
//$page.trigger("create");
//$page.listview("refresh");
//$page.page(); (this one kind of work but doesn’t style every object)
//$page.page("refresh", true);
but haven’t got any thing to work correctly and completely.
So, again, given our situation, is there a way to have a jQuery Mobile multi-page app with actual separate physical files and have all pages get style correctly? Or is there a programmatic way to force jQuery Mobile to style all pages correctly?
Thanks.
jquery mobile does NOT load everything from your second page.
when you require a new page with JQM (or it's ajax method), it loads parts of your page's DOMs and get all things under
<div data-role="page" id="yourPageID"></div>
so your could simply try put your stylesheet under "data-role", like this:
<div data-role="page" id="yourPageID">
<link rel="stylesheet" href="yourStyleSheetLink.css" />
</div>
then, when JQM requires a new page, your stylesheets will be loaded.
as a non-English speaker, i hope you can understand my words :)
I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose
Is there a way to do this?
page1.php
--has
<div id="main">
<div id="content">hello</div>
</div>
index.php
--has
<div id="main">
</div>
Can I somehow grab the data from page1.php inside of the content div and load it into the main div in my index.php?
I have done this with the code provided at css-tricks url: http://css-tricks.com/examples/DynamicPage/
But this uses hash change events. I don't want to use the hash feature, just the load content feature, but I can't seem to isolate the code for that because I think it's built into the bbq hashchange plugin.
Is there an Ajax way of doing it?
Something like
$(selector).find('#main').load('#content');
Just put a filtering selector after the URL in .load's first argument:
$(document).ready(function() {
$("#main").load('page1.php #content');
});
That will inject the #main div in the current page with the contents of #content from page1.php.