For app based on AngularJS, JQuery Mobile and JQuery Mobile Angular Adapter.
When i set ng-controller on tag with data-role="page", ng-model on select tag works perfectly:
<body ng-app>
<div data-role="page" id="product" ng-controller="Controller">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
http://jsfiddle.net/ilya7u/Ddt7G/
When ng-controller present in body tag, variable associated with select tag through ng-model remains unchanged:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
http://jsfiddle.net/ilya7u/qgbj2/
Why and how i can fix it? I want to use one controller in app with many pages!
including the ng-app in the html of your page will solve the problem
try
<html ng-app="myModule">
<body ng-controller="Controller">
<div id="product" >
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
</div>
</div>
</body>
</html>
and change the controller to
var myApp = angular.module('myModule',[]);
myApp.controller('Controller', function($scope) {
$scope.colors = ['red', 'black', 'white'];
$scope.color = $scope.colors[0];
$scope.Print = function () {
alert($scope.color);
};
});
updated fiddle here http://jsfiddle.net/qgbj2/2/
So it looks like there are really two scopes here. The page has its own scope, but the Print is in the parent scope. I've updated the fiddle to show that the color does indeed change, but the $scope.color in Print does not: http://jsfiddle.net/qgbj2/6/
To remedy this particular situation, I would pass in the color to Print from the DOM:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print(color)">print</button>
</div>
</div>
</body>
A general solution for this multiple scope situation does not occur to me at the moment.
Related
I'm facing an issue with the latest beta release of jQuery Mobile. I'm trying to implement a fixed persistent footer navbar, the persistent part is working but whenever I click a link and navigate to another page the ui-btn-active class is lost and no link appears selected.
Here's a demo fiddle that reproduces the issue: http://jsfiddle.net/koala_dev/DgdMg/2/
And here's the complete markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile.structure-1.4.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script>
$(function() {
$("[data-role='header'],[data-role='footer']").toolbar();
$.mobile.window.triggerHandler("throttledresize");
});
</script>
</head>
<body>
<div data-role="header" data-position="fixed" data-id="header">
<h1>My fixed header</h1>
</div>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1 content goes here.</p>
</div>
</div>
<!-- /page -->
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2 content goes here.</p>
</div>
</div>
<!-- /page -->
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li>Page 1
</li>
<li>Page 2
</li>
</ul>
</div>
</div>
</body>
</html>
I followed the instruction from the demos in the docs (which don't seem to be complete) and placed the footer outside the page container. I tried adding .ui-state-persist to the first link and to both links but it didn't produce any effect and since even the demos are not working correctly I'm not sure how to proceed.
I would appreciate any insight on how to keep the ui-btn-active class for the clicked link.
Well, I found this on jQM updated demo page. Adding .ui-btn-active for external fixed toolbars depends on data-role=page's data-title attribute.
<div data-role="page" id="page-1" data-title="Page 1">
Navbar buttons text, should match data-title in order to determine which button should be updated with .ui-btn-active, as well as updating data-role=header title.
Demo
$(document).on("pageinit", function () {
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
});
// Update the contents of the toolbars
$(document).on("pageshow", "[data-role='page']", function () {
// Each of the four pages in this demo has a data-title attribute
// which value is equal to the text of the nav button
// For example, on first page: <div data-role="page" data-title="Info">
var current = $(this).jqmData("title");
// Change the heading
$("[data-role='header'] h1").text(current);
// Remove active class from nav buttons
$("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
// Add active class to current nav button
$("[data-role='navbar'] a").each(function () {
if ($(this).text() === current) {
$(this).addClass("ui-btn-active");
}
});
});
Source: http://view.jquerymobile.com/1.4.0-rc.1/dist/demos/toolbar-fixed-persistent/
I had this same issue for links in the navbar. It was very frustrating. I fired up firebug and debugged jqm. I ended up patching the jquery mobile code like so:
In jquery.mobile-1.4.0.js
From:
$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );
To:
if ( !($navbtns.filter( ".ui-state-persist" ) ) ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );
}
I minified jqm here: http://jscompress.com/
I'm developing a mobile app using PhoneGap & jQuery Mobile. I'd like to keep my view files DRY. How do I achieve this in jQuery Mobile? Should I just put every page element in one HTML file?
Exactly, jQuery mobile is designed for that and I is the best approach to be followed.
you can have something like that:
<html>
<head>
<script src="jquerymobilelibrary.js"/>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput2">Title</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<a data-role="button" href="#page2">Button</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<!-- Content is empty -->
</div>
</div>
</body>
</html>
To switch between pages programmatically in JS you can use
<script>
$.mobile.changePage('#page2')
</script>
In jquery mobile site there is a simple but cool drag-and-drop UI builder to explore what the JQM library can do.
Hope it helps!
jQuery Mobile 1.3.1 has a very nice sliding panel feature, but the panel code must be placed within the same page it's used on.
I'm working on an app that needs to have the same panel on many pages. Instead of replicating code is there a way to dynamically inject the panel into these pages so that it will still retain the jqm panel functionality?
jQuery Mobile >= 1.4
Solution one:
Use an External panel that can be accessed from any page, this is in case you want to have the same panel contents in all pages.
Append panel to $.mobile.pageContainer once only on pagebeforecreate and then enhance the panel using $(".selector").panel().
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#mypanel").panel();
});
Add button to open the panel in each header (or wherever you want).
Note: When using External Panel data-theme should be added to panel div, as it doesn't inherit any styles/theme.
Demo
Solution two:
If you wish to do changes to panel before appending it, based on number of pages in DOM, add panel to each one with a different ID and a button to open that panel.
Note that you don't need to call any kind of enhancement, because you're adding panels on pagebeforecreate. Hence, panels will be auto-initialized once page is created.
var p = 1,
b = 1;
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("[data-role=page]").each(function () {
var panel = '<div data-role="panel" id="mypanel' + p + '" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(this).prepend(panel);
p++;
});
$.mobile.pageContainer.find("[data-role=header]").each(function () {
var panelBtn = ''
$(this).append(panelBtn);
b++;
});
});
Demo
Note: Make sure you use .one() not .on(), if you use the latter, panels will be added whenever a page is created.
jQuery Mobile <= 1.3
You can do it this way, using pagebeforecreate event and by checking if there is no Panel added already. Keeping in mind that panels markup should always be placed before [data-role=header] that's why I used .before().
There is no need to call any enhancement method since panels are added on pagebeforecreate. They will be initialized during that event.
Demo
Your panel
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
Add panels dynamically
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
Update
There are two alternative methods to inject "External Panel" dynamically.
For some one coming across this issue, there is something called External Panels in JQuery Mobile 1.4+, which can make our life easier.
http://demos.jquerymobile.com/1.4.0/panel-external/
You can do something like this.
<div data-role="panel" id="mainPanel">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
<!-- .... -->
</div>
<div data-role="page" id="page2" >
<!-- .... -->
</div>
You can also do one thing create a panel at the end or start of all pages and open that by Id and script code mentioned below.....its working fine for me.
$(function(){
$("#navigation").enhanceWithin().panel();
});
<div data-role="page" id="page1">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-b ui-panel-animate ui-panel-open" data-role="panel" id="navigation" data-position="left" data-display="overlay" data-theme="b" data-dismissible="true" data-swipe-close="true">
<div class="ui-panel-inner">
<ul class="">
</ul>
</div>
</div>
In order for hashcoder his response to work you need to initialize the external panel. Also add .enhanceWithin() to make listviews etc render properly within the panel.
Als add a data-rel=... attribute to the link via which you want to open the external panel.
<script>
$(function () {
$("div[data-role='panel']").panel().enhanceWithin();
});
</script>
<div data-role="panel" id="mainMenu">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
Open main menu panel
<!-- .... -->
</div>
<div data-role="page" id="page2" >
Open main menu panel
<!-- .... -->
</div>
I'm working with jQueryMobile and I want to use a form to input some values in a database.
I have a form which works and uses the test123.php to submit data to a database this:
<form method="get" action="test123.php?test=1">
<input type="submit" value="spiegel" />
</form>
I get a button, but the new page is shown as a normal page.
With this solution:
<a data-role="button" data-rel="dialog" href="#test">
spiegel
</a>
I get a dialog with the same output (i get the message "spiegel").
But I want the confirmation site to appear as a dialog.
A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.
Thank you for your help
<!DOCTYPE html>
<html>
<head>
<!--add all your jquery,jquery mobile as well as its CSS refrences here-->
</head>
<body>
<div data-role = "page">
<div data-role="header">
opendialogpage
</div>
<div data-role="content">
<p>just for sample display</p></div>
</div>
<div data-role="dialog" id="login">
<div data-role="header" data-theme="e"></div>
<div data-role="content">
<form id="login_form">
<fieldset>
<div data-role="fieldcontain">
<label>USER NAME:</label>
<input type="text" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label>EMAIL ID:</label>
<input type="text" id="email" value=""/></div>
</fieldset>
</form>
</div>
</div>
</body>
Okay, so you want data from your PHP page to open in the dialog and not in the next page.
What your looking for is AJAX.
AJAX allows you to refresh and change part of your HTML page without changing the entire page.
$.ajax({
url: 'test123.php',
type: 'POST',
data: {spiegel : 'spiegel'}
error : function (){ document.title='error'; },
success: function (data) {
$('#ajax_content').html(data);
}
});
So this function will return into variable data whatever was generated by test123.php
Link to Docs: http://api.jquery.com/jQuery.ajax/
I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- include your css, jquery, and jquery mobile files here -->
</head>
<body>
<div data-role="dialog">
<div data-role="content">
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>
All you are doing is changing data-role="page" to data-role="dialog".
I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.
Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.
<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain"
data-nobackbtn="true">
<h1>Test screen</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="fullnamediv" data-role="fieldcontain">
<label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
Name*</label> <input id="fullname" name="fullname_r" type="text" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<a id="buttonSave" name="buttonSave" href="#" data-role="button"
data-inline="true">Save</a>
</div>
</div>
<!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<script>
$("#page1").bind("pagecreate", function() {
$('#buttonSave').click(function() {
alert("aaaa");
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
alert("after change");
return true;
});
});
</script>
</div>
<!-- page1 -->
<div data-role="dialog" data-theme="a" id="successdiv">
<div data-role="header" data-theme="f">
<h1>Error</h1>
</div>
<div data-role="content">
<p>This is Page 2</p>
<button type="submit" data-theme="e" name="successok"
value="submit-value" id="successbutton">Close Dialog</button>
</div>
</div>
<!-- Page ends here -->
</body>
</html>
You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:
page2
dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via
open dialog
or
$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});