Steps:
1. ionic start Hello blank
Add button to the index.html
<ion-content>
<button class="button" onclick="javascript:alert('x');">Try Click</button>
</ion-content>
inside hello dir: ionic run android
click the 'Try Click' button. Nothing happens.
Info:
Emulator: Android 4.4.2 API 19
change it to ng-click and in general it is better to call a function.
You should separate your logic from your views.
example HTML
<div ng-controller="LoginController">
<ons-button ng-click="yourFunction()">Click Me!</ons-button>
</div>
JS
.controller('SomeController', function () {
$scope.yourFunction = function () {
console.log("x is triggered");
alert('x');
}
}
Use
<ion-content>
<button class="button" ng-click="javascript:alert('x');">Try Click</button>
</ion-content>
ng-click instead of onclick..
Related
I have set up ionic environment
1) node and npm
2) cordova and ionic with sidemenu template
While using the ionic 4 components in the application its classes are not working
You can see it shows button without css.
Any help is appreciated.
Thank you
Components are working, I can see <ion-content> and <ion-header> in the console. probably you css is not working , try this in html
<ion-content padding>
<button ion-button class="btn">My button</button>
</ion-content>
and in scss
.btn{
background: red;
}
you can change the css property it this btn class and it should reflect when running the app
I need a routine on Ionic that calls the cellphone's Keyboard to an ion-input when entering the page.
An example of a page would be:
<ion-content padding>
<form>
<ion-row>
<ion-col>
<ion-input #user name="user" type="text" placeholder="Usuário"></ion-input>
</ion-col>
</ion-row>
</form>
</ion-content>
What I want is to use the Navigating Lifecycle from Ionic (I believe that in this case using the ionViewDidEnter) to bring the focus and the Keyboard in the field automatically, I have already tried some codes but unfortunately sometimes it works and sometimes not, thank you right away.
You can set focus in your textarea in the method ionViewDidEnter and show the keyboard by using keyboard plugin of ionic.
#ViewChild('user') input ;
ionicViewDidEnter(){
setTimeout(() => {
this.input.setFocus();
},150);
this.keyboard.show();
}
I have referred the following links. Please go through it for more information:
https://ionicframework.com/docs/native/keyboard/
https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4
Set focus on an input with Ionic 2
I am developing an IONIC project on iot relay switch. ( any help will be appreciated)
Whenever i am triggering a url, either it is opening in same app or launching a new browser.
but my need is that, it should trigger a url but it should not open anywhere.
I have a basic code like this:
<ion-header>
<ion-navbar>
<ion-title>
IOT Project
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3 text-center> Basic Switch </h3>
<hr>
<p>
<a href="http://192.168.1.5/gpio?state_12=0" target = nobrowser>switch On</a><br><br>
<a href="http://192.168.1.5/gpio?state_12=1" target = nobrowser>switch Off</a>
</p>
</ion-content>
Use HTTP for this. If just want to hit the url, try this.
HTML
<button (click)="call(0)">switch On</button>
<button (click)="call(1)">switch Off</button>
TS
call(id) {
this.http.get(`http://192.168.1.5/gpio?state_12=${id}`);
}
I'm trying out the ionic framework and it looks really nice. However, I have a problem with form submission: the form fires twice. First when the submit button is pressed, and then if I just tap anywhere on the screen. This happens both in the xcode simulator and on my iphone 4gs.
This is what I have done:
I install the sidemenu template with: ionic start myApp sidemenu.
I then simply paste this form in to the tab-dash template:
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
And in my controller I simply have:
$scope.createTask = function(task) {
alert(task.title);
};
This is the only change I made to the starter template, and still the form submits twice. I have no idea why. Would really appreciate some guidance here!
Remove the type="submit" from the button and remove the ng-submit from the form and move it as a ng-click on the button itself.
So you should end up with
<button ng-click(createTask) class="...">Create Task</button>
This is possibly because whenever the ng-click is called there are two calls made ,one by angular and other by ionic .As ionic and angular comes as a bundle when you are working with ionic project.
You could try one of this method.
1) have ionic and angular javascript seperated in your index.html
instead of including (ionic and angular in one javascript file)
ionic.bundle.min.js
use as
ionic.min.js
angular.min.js
2) Alternatively you can create a directive of your own instead of ng-click like below.
before that Include angular-touch.js and inject ngTouch as a module in your app in app.js
app.directive('myclick', function() {
return function(scope, element, attrs) {
element.bind('touchstart click', function(event) {
event.preventDefault();
event.stopPropagation();
scope.$apply(attrs['myclick']);
});
};
});
Hope this helps.
in your controller
$scope.createTask = function(task) {
alert(task.title);
};
add $scope.task= {}; to init
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!