This is probably a very easy error but I've stuck on it for a while now. If anyone could help me out i would be very grateful!! Thank you, i'll place the code below. The Http.get works fine because i've tested in on a button, it's just when i paste the pull to refresh code it stops working.
Code HTML:
<!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>Announcement</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Pull To Refresh</h1>
</ion-header-bar>
<ion-view view-title="Announcements">
<ion-content>
<ion-refresher on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items" ng-click="getData()">
<div class="list card">
<div class="item item-divider">{{announcement_name}} - {{date}}</div>
<div class="item item-body">
<div>
{{message}}
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</body>
</html>
Javascript:
.controller('Controller', function($scope, $http) {
$scope.items = [1,2,3];
$scope.doRefresh = function() {
$http.get("", { params: { "name": "value1", "date": "value2", "message": "value3"} })
.success(function(data) {
$scope.announcement_name = data.announcement_name;
$scope.date = data.date;
$scope.message = data.message;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
myApp.error(function(newItems) {
alert("something went wrong");
})
};
});
Where is this Controller initialised ? I think you need to add the following :
(for exemple)
<ion-content ng-controller="Controller">
Your problem seems that your controller is not called and therefore, the function doRefresh does not exists
If it s not your issue, what do you mean by :
"it's just when i paste the pull to refresh code it stops working."
Related
I want to use datepicker https://bootstrap-datepicker.readthedocs.io/en/latest/index.html with Bootstrap 4.
Following the examples on above page, I can make it work with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Using this code datepicker appears correctly.
But doing the same with Bootstrap 4:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
Makes it look less professional:
Looks like font and spacing are messed up in Bootstrap 4 version.
How can I get same look and feel of datepicker in Bootstrap 4?
Thanks
You can too override default datepicker classes like the following:
the default bootstrap font size is 1rem or 16px so update .datepicker class
font-size: 0.875em; or/and update the cell width and height:
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<main class="container">
<div class="row" style="padding-top: 100px">
<div class="col">
<input data-date-format="dd/mm/yyyy" id="datepicker">
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style type="text/css">
// solution 1:
.datepicker {
font-size: 0.875em;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
.datepicker td, .datepicker th {
width: 1.5em;
height: 1.5em;
}
</style>
<script type="text/javascript">
$('#datepicker').datepicker({
weekStart: 1,
daysOfWeekHighlighted: "6,0",
autoclose: true,
todayHighlight: true,
});
$('#datepicker').datepicker("setDate", new Date());
</script>
</body>
From documentation:
bootstrap-datepicker.standalone.css
can be used to include the datepicker without depending on the Twitter Bootstrap library.
You can try out https://github.com/satyandra-softuvo/bootstrap4-datetimepicker
$.extend(true, $.fn.datetimepicker.defaults, {
icons: {
time: 'far fa-clock',
date: 'far fa-calendar',
up: 'fas fa-arrow-up',
down: 'fas fa-arrow-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-calendar-check',
clear: 'far fa-trash-alt',
close: 'far fa-times-circle'
}
});
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<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>Input X Icon</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="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
This is my plunker url and code snippet:
http://plnkr.co/edit/lUB8pYKRn5JudhToxykj
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link data-require="bootstrap#3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="twitter-bootstrap#3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
The icon-chevron-up, icon-chevron-down button wouldn't show up and bootstrap seems not working either.
So how to set it up right?
Thanks much!
Zhen
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registration</title>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="underscore.js#*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
<script src="EventController.js"></script>
</head>
<div class="span0 well votingWidget">
<div class="votingButton">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton">
<i class="icon-chevron-down"></i>
</div>
</div>
Started with Ionic but want to add a new button to the right of my apps header.
However, in my index.html I only have this:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And cannot find how to edit the header? Im guessing its generated in a template somewhere, but no searching is returning anything.
If you need a working example... here it is:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('onepage', {
url: '/1',
templateUrl: 'onepage.html'
})
$urlRouterProvider.otherwise("/1");
})
<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 Template</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>
<ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="onepage.html" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="onepage">
<ion-nav-buttons side="left">
<button class="button">
LeftButton
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-assertive">
RightButton
</button>
</ion-nav-buttons>
<ion-content class="padding">
<!-- The content of the page -->
<h3>Bla bla bla</h3>
<p>Bla bla bla</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
check this codepen
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
Available sides: primary, secondary, left, and right
I need a program that includes two buttons to increase and decrease the number and display it
As well as storage and display number after close and open app
for storage data you can use angular-local-storage for get https://github.com/grevory/angular-local-storage
for load data use $scope.storageValue = localStorageService.get('StoreData');
for save data use localStorageService.set('StoreData',$scope.storageValue);
full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- save and load in Local -->
<script src="js/angular-local-storage.min.js"></script>
<script>
angular.module('app', ['ionic','LocalStorageModule'])
.controller('AppCtrl', function($scope, localStorageService) {
// save and load
$scope.storageValue = localStorageService.get('StoreData');
// add salavat
$scope.add=function(){
$scope.storageValue++;
localStorageService.set('StoreData',$scope.storageValue);
}
// sub salavat
$scope.sub=function(){
$scope.storageValue--;
localStorageService.set('StoreData',$scope.storageValue);
}
})
</script>
</head>
<body ng-app="app">
<ion-content>
<div style="height:100%; text-align:center" ng-controller="AppCtrl">
<div class="item item-icon-left" href="#">
<span>Number : {{storageValue}}</span> <br>
<button class="button button-positive" ng-click="add()">
+
</button>
<button class="button button-positive" ng-click="sub()">
-
</button>
</div>
</div>
</ion-content>
</body>
</html>
pic