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>
Related
According the next code, i'm creating a login process, that process through a PHP file is working fine, but after success the view doesn't change, here:
(function (){
var app = angular.module('starter', ['ionic']);
var app2 = angular.module('nuevo', []);
app.controller('controller', function($scope, $http, $state) {
$scope.registrar = function(){
$http.post("http://127.0.0.1:8080/php/Conexion.php",{
correo:$scope.mail, pass:$scope.word,
}).success(function(data){
alert("SESIÓN INICIADA")
$state.go('main');
});
}
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html',
controller: 'controller',
})
$urlRouterProvider.otherwise('/index.html');
});
My HTML file, here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<div class=" col text-center">
<h3 >Taxi App</h3>
</div>
</ion-header-bar>
<div ng-controller="controller">
<img class="indexImg" src="img/saludoIndex.jpg">
<br><br>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-at placeholder-icon"></i>
<input type="text" placeholder="Dirección de email" ng-model="mail">
</label>
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-locked placeholder-icon"></i>
<input type="text" placeholder="Contraseña" ng-model="word">
</label><br>
</div>
<div class="col text-center">
<br><h4><a>¿Olvidaste tu contraseña?</a></h4><br><br><br><br><br>
<a class="button button-stable button-large" href="templates/Register.html">
<b>Crear una cuenta gratuita</b></a>
</div>
<ion-footer-bar class="bar-positive tabs">
<a class="tab-item">
<h4 style="color:white;" ng-click="registrar()">INICIAR SESIÓN</h4>
</a>
</ion-footer-bar>
</div>
</ion-pane>
</body>
</html>
But the network log shows me the info inside the page (simple test data), main.html just have simple data for testing if change is working but doesn't load the page on app's screen.
I hope you can help me with this issue, thank you very much.
Reading more about this issue i found that i had to add on the body of index.html and main.html this and it works perfect
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>
I am working with a mobile app in Phongap and Cordova.
I have my index.html page with ons-list and in each item I get redirected to another page.
I'm doing this as follows:
<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">
In the new page I have an ons-toolbar with ons-back-button that dosn't work. I want to do a popPage() to return to Index.html.
Could someone give me some help with this?
This is my code:
Index.html:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppController">
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu"
type="overlay">
</ons-sliding-menu>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">MyAppName</div>
</ons-toolbar>
<div style="width:100%;height:70%">
<ons-list>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 1</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 2</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 3</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 4</div>
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
<div style=" text-align:center">Item 5</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
Home
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
Help
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
About My App
</ons-list-item>
</ons-list>
</ons-template>
</ons-navigator>
</body>
</html>
NewPage.html (containing the back button that doesn't work):
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">My New Page</div>
</ons-toolbar>
<div>
<div>
<input class="text-input" id="my-input" placeholder="Enter some Text...">
</div>
<div>
<ons-switch var="mySwitch1"></ons-switch>
</div>
<div>
<select id="select1"></select>
</div>
<div>
<ons-switch var="mySwitch2"></ons-switch>
</div>
<div>
<select id="select2"></select>
</div>
</div>
</ons-page>
<div class="left" onclick="fn.load('home.html')" tappable><ons-back-button>Back</ons-back-button></div>
And in your js file:
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content.load(page).then(menu.close.bind(menu));
};
The declaration of the ons-navigator is wrong, you should put the navigator in your main page. The structure should be something like:
<ons-template id="mainPage.html">
<ons-navigator var="myNav">
<ons-page>
...content...
</ons-page>
</ons-navigator>
</ons-template>
You can find a working CodePen example HERE, hope it helps!
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();
});