Just try to implement pull to refresh from ionic framework, but it does not work, the icon just keep showing and nothing happen.
Anyone can point where is the problem?
Here is the code.
lists.html
<ion-header-bar align-title="center" class="bar-stable">
<h1 class="title">Latest Items</h1>
<button class="button button-clear button-positive" ui-sref="addlist">New</button>
</ion-header-bar>
<ion-view title="Terbaru">
<ion-content>
<ion-refresher on-refresh="doRefresh()">
pulling-text="Pull to refresh..."
</ion-refresher>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" name="dash.search" value="" placeholder="Search">
</label>
<div class="list card" ng-repeat="x in data" type="item-text-wrap" href="#/tab/chat/{{x.id}}">
<div class="item item-avatar">
<img data-ng-src="data:image/png;base64,{{x.photopath}}">
<h2>{{x.title}}</h2>
<p>{{x.tgl}}</p>
</div>
<div class="item item-body">
<img class="full-image" data-ng-src="data:image/jpeg;base64,{{x.imagepath}}">
<p>
{{x.descr}}
</p>
<p>
1 Like
5 Comments
</p>
</div>
</div>
</ion-content>
</ion-view>
controller.js
angular.module('ionicApp.controllers', [])
.controller('AddListCategoryCtrl', function($scope, $http) {
var xhr = $http({
method: 'post',
url: 'http://www.mywebsite.com/api/listCat.php'
});
xhr.success(function(data){
$scope.data = data.data;
});
$scope.doRefresh = function(){
$http.get('http://www.mywebsite.com/api/lists.php')
.success(function(data){
$scope.data=data.data;
console.log($scope.data);
})
.finally(function(){
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply()
});
}
});
There is an error in your code. Pulling text should be an attribute of ion-refresher.
This is the correct code:
<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh...">
</ion-refresher>
You added the closing tag before the pulling-text attribute.
Related
I have a simple modal form to get comment. When the Submit button or the Close button is clicked, the modal form is supposed to close, but it doesn't.
The following is code snippet from my controller:
$ionicModal.fromTemplateUrl('templates/sharing-comment.html', {
scope: $scope
}).then(function (modal) {
$scope.commentForm = modal;
});
// Triggered in the comment modal to close it
$scope.closeCommentForm = function () {
$scope.commentForm.hide();
};
// Open the comment modal
$scope.showCommentForm = function () {
$scope.commentForm.show();
$scope.popover.hide();
};
The following is code snippet from my modal form:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Submit Comment on Sharing</h1>
<div class="buttons">
<button class="button button-clear" ng-
click="closeCommentForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form id="commentForm" name="commentForm" ng-submit="submitComment()">
<div class="list">
<label class="item item-input">
<span class="input-label">Your Comment</span>
<textarea type="text" ng-model="mycomment.comment"></textarea>
</label>
<label class="item">
<button class="button button-block button-positive"
type="submit">Submit</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
Try this, I made codepen for you
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope
}).then(function(modal) {
$scope.commentForm = modal;
});
$scope.createContact = function() {
$scope.commentForm.hide();
};
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Contacts</h1>
<div class="buttons">
<button class="button button-icon ion-compose" ng-click="commentForm.show()">
</button>
</div>
</ion-header-bar>
<script id="templates/modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="commentForm.hide()">Cancel</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">First Name</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
</div>
</ion-content>
</ion-modal-view>
</script>
</body>
</html>
my modal:
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary ">
<h1 class="title ">New Task</h1>
<button class="button button-clear button-positive " ng-click="closeNewTask() ">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="">
<div class="list ">
<div class="item">
<label class="item item-input ">
<input type="text " placeholder="What do you need to do? ">
<button type="button" class="button button-icon" ng-click="openPopover($event)">
<i class="icon ion-information-circled red font-size-25"></i>
</button>
</label>
</div>
</div>
<div class="padding ">
<button type="submit" class="button button-block button-positive ">Create Task</button>
</div>
</form>
</ion-content>
</div>
this is my modal it works fine but the "icon information" inside the modal doesn't work ... i put a $ionicPopover in the controller and the functions
var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
everythink works good out of the modal , but inside not
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
change it to
$scope.openPopover = function(e) {
$scope.popover.show(e);
};
Hi Developing an Mobile app using Ionic Framework.
I know its very basic question but i m new to this.
In the Index.html is having two buttons 1 is for Login and other for SignUp
index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
</head>
<body ng-app="starter" ng-controller="MainCtrl">
<ion-pane>
<div class="bar bar-header bar-calm">
<h1 class="title">Heading</h1>
</div>
<ion-content paging="true" class="has-header" >
<div>
<img src="img/Logo.jpg" width="100%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" />
<img src="img/Team.jpg" width="70%" height="auto" style="display:block;margin-left:auto;margin-right:auto;" />
</div>
<div ng-cntroller="loginCtrl">
<button id="btnLogin" class="icon icon-right ion-log-in left button button-positive button-block " style="border-radius:15px 15px 15px 15px;" ng-click="login()">Login</button>
</div>
<div ng-cntroller="signupCtrl">
<button id="btnSignUp" class="button button-positive button-block icon icon-right ion-person left" style="border-radius:15px 15px 15px 15px;">SignUp</button>
</div>
<div class="bar bar-footer bar-calm">
<div class="title">Copyright <strong>#</strong></label>
</div>
</ion-content>
</ion-pane>
On login click it open the Login.html page similar way click on sign up it open Signup.html
app.js
angular.module('starter', ['ionic','starter.controllers','starter.routes','starter.services','starter.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
routes.js
var app = angular.module('starter', [])
app.config(function($stateProvider,$urlRouteProvider){
$stateProvider
.state('text', {
url: '/page1',
templateUrl: 'templates/text.html',
controller: 'textCtrl'
});
.state('login', {
url: '/page2',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
});
.state('signUp', {
url: '/page3',
templateUrl: 'templates/signup.html',
controller: 'signupCtrl'
});
.state('chats', {
url: '/page4',
templateUrl: 'templates/chats.html',
controller: 'chatsCtrl'
});
$urlRouteProvider.otherwise('/page1')
});
controllers.js
var app = angular.module('starter')
app.controller('textCtrl',function($scope){
});
app.controller('loginCtrl', function ($scope) {
$scope.login = function(){
alert("Hi")};
});
app.controller('signUpCtrl', function ($scope) {
});
app.controller('chatsCtrl', function ($scope) {
});
login.html
<ion-view title="Login" id="page2" class=" ">
<ion-content padding="true" class="has-header">
<form id="login-form1" class="list ">
<ion-list id="login-list1" class=" ">
<label class="item item-input " id="login-input1">
<span class="input-label">Username</span>
<input type="text" placeholder="">
</label>
<label class="item item-input " id="login-input2">
<span class="input-label">Password</span>
<input type="password" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a ui-sref="chats" id="login-button3" style="border-radius:15px 15px 15px 15px;" class=" button button-calm button-block ">Log in</a>
<a ui-sref="signup" id="login-button4" class=" button button-positive button-block button-clear ">Or create an account</a>
</form>
</ion-content>
</ion-view>
You need to define what the login button should do. Two ways to go
Either do
<button id="btnLogin" ui-sref="login">Login</button>
or do this on ng-click of the button like
$scope.login = function(){
$state.go('login');
};
Make sure $state is injected into your controller.
using this link will help to solve my issue
http://www.joshmorony.com/user-authentication-with-ionic-and-parse-part-1-email-login/
I am using Ionic.
I have a link here:
https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect
when I use WeChat Scan QR Code function to scan it, the link will redirect to the “redirect_uri” with code as a request parameter:
http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&code=0110c30e667a2ae723b06c542ddc055W&state=1234567abc
I need to get request parameter code's value 0110c30e667a2ae723b06c542ddc055W in an ionic framework.
Here is the code:
<script id="templates/sign-in.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="form-group">
<iframe id="upload_target" name="upload_target" src='https://open.weixin.qq.com/connect/qrconnect?appid=wx0f05d08a307a4050&redirect_uri=http://my.duangwifi.cn/yii2-basic/web/index.php?r=site/apptest&response_type=code&scope=snsapi_login&state=1234567abc#wechat_redirect' style="width:340px;height:340px;border:0px solid #fff;" scrolling="no" frameBorder="no"></iframe>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<!--<p class="text-center">
Forgot password
</p>-->
</div>
</ion-content>
</ion-view>
</script>
How can I achieve that?
I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not work.
HTML:
<ion-view hide-nav-bar="true">
<ion-content padding="true">
<img class="logo" src="img/logo.jpeg" />
<div class="login-form">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</ion-content>
I would like to set as "fixed" the div.login-form.
Using the following CSS does not work:
{
position: fixed;
bottom: 20px;
}
Also, with position:fixed input texts seem no more editable.
In Ionic, is it possible to fix part of the content to bottom?
Thx!
You could use anythnig out the ion-content with a button inside of it.
Demo
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
<div class="fixed-outside">
<div class="row">
<div class="col">
<button class="button button-circle button-energized icon ion-log-in"></button>
</div>
<div class="col">
<button class="button button-circle button-positive icon ion-social-facebook"></button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</div>
How about just using the default ionic tab bar and just change the height to auto or any px that you wishes. Just make sure you put the code below ion-content tag.
Code:
<ion-content padding="true">
</ion-content>
<div class="tabs tabs-dark" style="height:auto;">
<div class="row">
<div class="col">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" >
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-positive">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
Codepen example : http://codepen.io/ridwan/pen/JozeYK
You could use a directive to calculate the height of the form. It will recalculate on window resize. I haven't tested navigating away from the page.
Codepen
Relevant HTML
<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
<ion-content padding="true" scroll="false">
<ion-scroll scroll-height>
Content to go above the form
</ion-scroll>
<div class="login-form">
Login form
</div>
</ion-content>
</ion-view>
CSS
.scroll-content {
position: relative;
}
div.login-form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Directive
.directive('scrollHeight', function($window) {
return {
link: function(scope, element, attrs) {
scope.onResize = function() {
var winHeight = $window.innerHeight;
var form = angular.element(document.querySelector('.login-form'))[0];
var formHeight = form.scrollHeight;
var scrollHeight = winHeight - formHeight;
element.css("height", scrollHeight + "px");
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
})
all the elements which you want to have fixed in the bottom should be out of the ion-content. This is a working example:
<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
<img class="logo" src="img/logo.jpeg" />
</ion-content>
<!-- align to the bottom of the page -->
<div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
I just find a simple solution, which works fine for me.
<ion-content>
<ion-scroll style="height: 300px">
<div style="height: 1000px">
your scroll content
</div>>
</ion-scroll>
<div>
your fixed div, maybe a form
</div>
</ion-content>
you can also refer to: http://ionicframework.com/docs/api/directive/ionScroll/
I hope it helps.
I ended up more or less circumventing Ionic's intentions and using a flex box layout:
<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
<div class="flex-head"> ... </div>
<div class="flex-body flex-1"> ... </div>
<div class="flex-foot"> ... </div>
</ion-view>
The SCSS, using Ionic's mixins, looks something like this:
.flex-wrapper {
#include display-flex;
#include flex-direction(column);
...
}
.flex-1 {
#include flex(1);
...
}
actually i am using the version Ionic 2.0.0 i resolve with this code
<ion-fixed class="fixed">
<button fab fab-right fab-bottom>
${{ totalPrice }}
</button>
</ion-fixed>
in your File Scss
.fixed {
bottom: 50px;
right: 10px;
}