I just created an App using Vue JS and Ionic. Always when I'm using click events nothing is happening. The Code is correct. I checked it an also used some code from the documentation and the same problem appears.
The console is empty and no error is displaying.
Does anyone habe the same problem and knows any solution?
I would be very thankful :)
Best regards!
<template>
<ion-page class="ion-page" main>
<ion-content class="ion-content" padding>
<ion-button #click="openModal">Open Modal</ion-button>
</ion-content>
</ion-page>
</template>
<script>
export default {
methods: {
openModal() {
console.log('test');
},
},
}
</script>
Related
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
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..
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'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I'm using the following script to create a toggle effect for opening and closing div's.
<script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery(".content").hide();
jQuery(".heading").click(function()
{
jQuery(".content").hide();
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
<div class="main_text_faq"
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum</div>
</div>
Now I can't just seem to figure out how I can let Header 1 to always be open and to have Header 2 open when entering the content.
Any ideas how I can start coding this? I am in the process of learning how to use Jquery so please forgive me for not having anything to show for what I allready tried to fix my "problem"
Thanks in advance.
Regards!
If I've understood your question correctly, you want the first .content element to stay visible when the others are initially hidden. To do that you can use the :not and :first pseudo-selectors to exclude the first element:
jQuery(".content:not(:first)").hide();
Here's a working example.