I am building a mobile app and I'm using Angular JS for my UI.
There is an href element that executes a javascript whenever it is clicked. The problem is that the onclick event is not executing the function placed inside it, but if I put the function implementation directly inside the onclick event of the href element, it gets executed i.e. if I put alert('Alert!!'); in the onclick event, it gets executed but if I call the function callAlertFunc() which also performs alert, it doesn't get executed. what could be the problem?
My Codes are below.
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>xxxxx</title>
<!-- Stylesheets-->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/mapsed.css"/>
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/fonts.css"/>
<!-- Stylesheets-->
<!-- Scripts-->
<script src="js/jquery-1.10.2.js"></script>
<script src="cordova.js"></script>
<script src="scripts/service-integrate.js"></script>
<!-- Scripts-->
<script>
function callAlertFunc()
{
alert('Alert!!');
}
</script>
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Get Details</div>
</ons-toolbar>
<ons-row style="padding: 0">
<ons-col align="center">
<ons-list>
</ons-list>
</ons-col>
</ons-row>
<br>
<br>
<div class="center"> <br>
<input class="text-input" type="text" modifier="large" name="id" placeholder="id">
<br>
</div>
<br>
<a href="#" id="hrefID" onclick="callAlertFunc();">
<ons-button class="home-btn" modifier="large">Get Details</ons-button>
</a>
<br></div>
<div class="center" id="DetailsDiv"> <br>
<u> Details</u>
<br>
<p class="service-data">Status: </p>
<br>
</div>
</ons-page>
</ons-navigator>
</body>
</html>
Related
I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.
I'm using Onsen UI and AngularJS. But i have this problem.
When i back to page1.html from page2.html how to call any function in page1.html ?
page1.html
<ons-list>
<ons-list-item ng-repeat="user in users" modifier="chevron" class="list-item-container">
content
</ons-list-item>
</ons-list>
<ons-button onclick="Navigator.pushPage('page2.html')">Go Page 2</ons-button>
page2.html
<ons-toolbar>
<ons-back-button>Back</ons-back-button>
</ons-toolbar>
Thanks for answers guys. My problem has solved.
Solution:
http://monaca.mobi/en/blog/lets-make-a-phonegap-app-with-angularjs-onsen-ui/
Please try this example. $scope.$watch is called when you leave or enter in page.
<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<!-- --------------- App init --------------- -->
<title>Onsen UI Split View</title>
</head>
<body>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
<!-- -->
<ons-navigator title="Navigator" var="myNavigator">
<ons-page ng-controller="firstctrl">
<ons-toolbar>
<div class="center">Simple Navigation</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
Push Page
</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id="page1.html">
<ons-page ng-controller="secondctrl">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
</html>
<script>
var app = angular.module('app', ['onsen']);
app.controller('firstctrl', function($scope, $http)
{
$scope.$watch(function( $scope )
{
console.log( "Function watched" );
});
});
app.controller('secondctrl', function($scope, $http)
{
});
</script>
I have this problem, which had been working in previous versions, and I dont know what happend since its not working now.
The problem is that only the header and footer in jqm is "sliding/showing".
I've included the problem visually:
My code is:
<!DOCTYPE html>
<html>
<head>
<title>AP</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="js/jqm/jquery.mobile-1.4.3.min.css" rel="stylesheet" />
<style>
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
</head>
<body id="body">
<!-- LOGIN -->
<div data-role="page" id="loginPage" data-theme="a">
<!-- HEADER -->
<div data-role="header" data-theme="b">
<h3>AP</h3>
</div>
<!-- CONTENT -->
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" value="" name="username" id="username" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password" />
</div>
<input type="button" data-theme="b" name="submit" id="loginSubmit" value="Log ind">
</fieldset>
</form>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<!-- MAP -->
<div data-role="page" id="mapPage">
<!-- PANEL LEFT -->
<div data-role="panel" id="mapPanel">
<ul data-role="listview" data-inset="true" id="mapPanelList"></ul>
</div>
<!-- HEADER -->
<div data-theme="b" data-role="header" id="mapHeader">
Menu
<h3 id="headerTitle"></h3>
<a id="logout" data-icon="delete">Exit</a>
</div>
<!-- CONTENT -->
<div data-role="content" style="margin: 0; padding: 0;" id="mapContent">
<div id="map" class="ui-panel-wrapper"></div>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/googlemaps3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/jqm/jquery.mobile-1.4.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="georescue.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
Same code works without googlemaps..
Any help appreciated.
Hi I am new for jquery mobile.I gt two page in my application. Please c the code below
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Smart Realtor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/smartrealtor-theme.css" />
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" href="css/themes/default/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<!-- <script src="js/jquery.js"></script>-->
<!-- <script src="js/globalsetting.js"></script>-->
<!-- <script src="js/jquery.mobile-1.4.2.min.js"></script>-->
<!-- <script src="js/cordova.js"></script>
<script src="js/Calendar.js"></script>
<script src="js/Message.js"></script>-->
<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" data-title="Panel fixed positioning" class=" signupBG" id="landingPage">
<div data-role="content">
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<div id="logoCenter">
<img src="images/smartrealtor_logo_large#x2.png" alt="" width="300" height="310" class="scale-with-grid" />
</div>
<div class="ui-grid-a">
<!-- Click here to register page -->
<a href="register.html" class="ui-btn ui-corner-all ui-shadow" >Register</a>
</div>
<div class="ui-grid-a">
Sign in
</div>
</div>
<!-- /login/register -->
</div>
</div>
<!-- Login Screen -->
<!-- /login screen -->
<!-- Forget Password Screen -->
<!-- /forget pass screen -->
<!-- Register Screen -->
<!-- /register screen -->
<!-- Team Leader Register Screen -->
<!-- /register screen -->
</body>
</html>
Register.html
<div data-role="page" data-title="Panel fixed positioning" class=" signupBG" id="loginPage">
<div data-role="content">
<div data-role="tabs" id="tabs" class="transparentBg">
<div data-role="navbar" data-grid="a" class="topNav topfilter">
<ul id="navfilter">
<li>Agent</li>
<li>Team Leader</li>
</ul>
</div>
<div id="nAgent" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="nTeamleader">
<ul data-role="listview" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
</div>
</div>
My tabpanel in inside the register.html . But it not working nw. The tab panel doesn't refresh the content. anyone gt solution?
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});