Couldn't find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that's not the case here.
Problem:
I have with classes 'active', and 'inactive'.
On inactive - the list item will have a background image 1
on active - hte list item will have background image 2
<ul>
<li class="active"><a></a></li>
<li class="inactive"><a></a></li>
</ul>
On click, it's supposed to switch them right... example code:
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
With JQUERY MOBILE this code doesn't work, I've tried adding the class first, then removing... also tried toggleclass for the active.
If I removing jquery mobile from being included, it works perfectly.
Add jquery mobile library back in, doesn't work.
Not a css problem.
Upon inspection with firebug, it seems removing classes works find, it's when it tries to add it?
This works:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<style type="text/css">
.inactive {color:red;}
.active {color:blue;}
</style>
<script>
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
$('ul li.active>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('active').addClass('inactive');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>index.html</h1>
</div><!-- /header -->
<div data-role="content">
<ul>
<li class="active"><a>One</a></li>
<li class="inactive"><a>Two</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Related
I am new for jquery mobile. I got two pages which are page1.html and page2.html. page1 will navigate to page2 and inside page2 got a navbar.
Here is my code
page1.html navigate to page2
$.mobile.pageContainer.pagecontainer("change", "page2.html", {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
reloadPage: false,
changeHash: true
})
page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div id="fragment-1">
<p>This is the content of the tab 'One', with the id fragment-1.</p>
</div>
<div id="fragment-2">
<p>This is the content of the tab 'Two', with the id fragment-2.</p>
</div>
<div id="fragment-3">
<p>This is the content of the tab 'Three', with the id fragment-3.</p>
</div>
</div>
</div>
</div>
</body>
</html>
It can be work if i run page2 individually. But problem come once i change page from page1 to page2. please dont reply me add rel="external" It may cause white screen issue once i using rel="external"
This is a known jQuery Mobile 1.4 bug, it will be fixed in jQuery Mobile 1.4.3 version.
Read more about it here: https://github.com/jquery/jquery-mobile/issues/7169
There you will also find a workaround.
There's one other solution, it requires you to dynamically create tab widget, something like this:
$(document).on("pagecreate", "#p2", function () {
var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li>Tab 1</li><li>Tab 2</li><li>Tab 3</li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>';
$("#p2 .ui-content").append(tabs).enhanceWithin();
});
Working example: http://jsfiddle.net/Gajotres/JAuwV/
Hello friends i m using angularjs with jquery mobile in my app and done routing with mobileangular adapter javascript that will handle routing (jquery-mobile-angular-adapter-standalone.js).
i have used angularjs for data binding , underscorejs for data processing and routing for my dynamic template. My app work well with routing in forward direction but when i use
back button which to not carry back to my previous page. my url shown in address bar is the same that of previous page but page do not display with previous data
i m placing all my code below
index.html
<!doctype html>
<html lang="en" ng-app="work">
<head>
<meta charset="utf-8">
s
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css"/>
<script src="js/components/jquery-mobile-angular-adapter-standalone.js" type="text/javascript"></script>
<script src="js/components/angular-resource.min.js" type="text/javascript"></script>
<script src="js/components/underscore-min.js" type="text/javascript"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/app.js"></script>
</head>
<body>
<div data-role="page">
</div>
</body>
</html>
html use to display da
showMenuView.html
<div id="menu-list" data-role="page" ng-controller="showMenuController">
<div data-role="header">
Back
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li ng-repeat="menuItem in mainMenuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<p>Total {{mainMenuItems.length}} menu item</p>
</div>
</div>
Controller.js
'use strict';
function showMenuController($scope, $location, Data, $routeParams) {
Data.query(function(data) {
$scope.foo = data;
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:$routeParams.parent});
});
$scope.selectMenuItem = function (id) {
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:id});
}
}
service.js
angular.module('dataservices', ['ngResource']).
factory('Data', function($resource){
return $resource('data/data.json', {}, {
query: {method:'GET',isArray:false}
});
});
app.js
angular.module('work', ['dataservices'])
.config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
//.when('/showMenu', {parent:'none',templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.when('/showMenu/:parent', {templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.otherwise({redirectTo: '/showMenu/none'})
;
}]);
pls help me ,thanks in advance
I have not worked on it myself, but while exploring on whether JQM and angular can work together I stumbled upon this page.
http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/
he makes a good point (i.e. both angular and JQM uses and manipulates the url) that appears to be valid in your case also. he suggests to let JQM do this. I think you can also use different special character to process url i.e. angular uses ! and JQM uses # or something like that.
In my HTML file:
<div data-role="content" id="termsContent">
<div id="termDiv"></div>
</div>
in my js file:
$(function () {
$("#termsPage").live('pagecreate', function(event,ui){
$("#termDiv").load("tnc.html").trigger('create');
});
});
Then, in my tnc.html file:
<a href="http://www.xxx.com/usage-terms.html">
I seem can't find any solution in Google on how to load the local html page correctly. Does anyone have suggestion/experience on this? I want to show the clicked link directly.
You were close but not enough.
.trigger('create') can not be used after a load function. Load function is asynchronous so we need to wait for success state to trigger pagecreate.
Button example is not going to be shown, it needs to be closed.
Do not use pagecreate, in this case pagebeforeshow
Here's a working example:
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="termDiv">
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
load.html :
Onen link
index.js :
$(document).on('pagebeforeshow', '#index', function(){
$("#termDiv").load("load.html", function(){
$('#index').trigger('create');
});
});
I hope this was what you wanted all along.
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>
When calling changePage() with changeHash = false, the location bar does not change.
Can I have identical behavior with anchor links (e.g. Blah)? I set $.mobile.hashListeningEnabled = false, but the location bar is still updated.
Thanks for the help.
This can be done by setting $.mobile.changePage.defaults.changeHash = false;
Sample code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<a data-role="button" href="#page2">Go to page2</a>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
figured I'd answer this with a nifty block of code that you can put BEFORE you load jquery mobile AFTER you load jquery, adds the extra attribute 'data-change-hash' to any link tag so that the location does not change
$('a[data-change-hash="false"]').on('click',function(e) {
$.mobile.changePage($(this).attr('href'),{'changeHash':false});
e.preventDefault();
});
will enable you to do this
Test Me!
and your url will stay like http://example.com instead of changing to http://example.com#my-page
try it out: it works for me in jQM 1.4.5
$.mobile.hashListeningEnabled = false;
When applied then page changes does not alter the browser's address bar anymore, in the same way when using explicit calls to:
$.mobile.pageContainer.pagecontainer("change","tosomewhere.html",{ changeHash: false });
Although I like Chad Brown's solution for this, I went with a much simpler and easier to grasp approach specially for people new to jquery.
so I start by creating a function script and can be placed anywhere with in your code, doesn't need to be in a specific handler or callback.
<script>
function goTo(pageID,track){
$.mobile.pageContainer.pagecontainer('change','#'+pageID, {changeHash: track});
}
</script>
and then in my anchor tags I will do just call the function just like this
New Trip