I am stuck and I have no clue what I am doing wrong here. So this is the HTML I am using:
<ion-searchbar class="searchBar">
<label>
<input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" />
<a class="clear" ng-click="findAndSearch = '' ">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
And this is the output HTML when I have typed / typing something into my input field:
<ion-searchbar class="searchBar">
<label>
<input class="searchField ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" type="search" placeholder="Search" ng-model="findAndSearch" />
<a class="clear" ng-click="findAndSearch = '' ">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
So what does this say? It says that it automatically puts the classname ng-not-empty and ng-not-empty when it's respectively being not empty and being empty (not filled in).
Whenever I click on the button I've made, it doesn't do a thing. I have no errors in my console, but as I said: whenever I write something into my input field, I can't reset it / remove it with this button.
Any idea what I am doing wrong or what might be going wrong?
PS: I already tried every possible solution in this SO post.
I've got something from Angular Documentation.
It's realted to a button, but I don't think this is a problem.
Check this out: Clear Model
The next example shows how to debounce model changes. Model will be
updated only 1 sec after last change. If the Clear button is pressed,
any debounced action is canceled and the value becomes empty.
<div ng-controller="ExampleController">
<form name="userForm">
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ debounce: 1000 }" />
<button ng-click="userForm.userName.$rollbackViewValue(); user.name=''">Clear</button><br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
Not the debounce, but the $rollbackViewValue() to specific field in your form.
And after user.name=''
Please, try and tell us.
In your code:
<a class="clear" ng-click="findAndSearch = '' ">X</a>
You try:
<a class="clear" ng-click="yourForm.(give some ID to your input).$rollbackViewValue(); findAndSearch = ''">X</a>
Okay, so I have fixed this problem and I still don't know why or what is causing it, but the fix is like this:
<ion-searchbar class="searchBar">
<label>
<input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" />
<i class="icon ion-search placeholder-icon"></i>
</label>
<a class="clear" ng-click="findAndSearch = '' ">X</a>
</ion-searchbar>
As you can see, I have put the anchor with the ng-click outside of the label element and now, suddenly, it works. Unbelievable.
Thanks for the help guys!
I have created snippet on jsfiddle with your code and all work fine:
ngModel is cleared and class ng-not-empty removed when you click on X. So looks like the problem not in this piece of code
<div ng-app="app">
<ion-searchbar class="searchBar">
<label>
<input class="searchField" type="search" placeholder="Search" ng-model="findAndSearch" />
<a class="clear" ng-click="findAndSearch = '' ">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
</div>
Related
Yesterady I asked how I could remove the input before my button How to remove the input element before my button? and I got an answer who worked in the snippet. Now I try to use it in my event but I can't remove the field, I can only remove the button.
Template.myTemplate.events({
'click .removeField': function(event, template){
$(this).prev('input').remove();
$(event.target).prev('input').remove();
$(event.target).prev().prev('input').remove();
$(event.target).remove();
}
the $(event.target) is i.fa.fa-times so I tried with prev().prev('input') to be in a -> input
My HTML is the following one:
<div class="form-style-2">
<div class="form-style-2-heading"></div>
<form action="" method="post">
<label>
<span>Container name
<span class="required">*</span>
</span>
<input type="text" class="input-field nameModif" value="" required/>
</label>
<label id="labelEnv">
<span>Environment
</span>
<input type="text" class="input-field env"/><a class="removeField" aria-expanded="false"><i class="fa fa-times"></i></a>
<a class="addEnv" aria-expanded="false"><i class="fa fa-plus"></i></a>
</label>
</form>
</div>
In some cases $(event.target) will be <i class="fa fa-times"> and it has no previous input. Let's get up to parent <label> then remove children within it:
$(event.target).closest('label').children('input, .removeField').remove();
Update if you have several inputs and you need to remove the input just before a:
var et = $(event.target);
if (et.is('i')) et = et.parent('a');
et.prev('input').remove().end().remove();
Can someone please lead me into the right direction regarding my search icon? I need to make my search icon clickable within the input field to display results.
Please see the following code listed below.
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-enter="runUserSearch()" />
</div>
</div>
Use ng-click instead of ng-enter
<div class="search-input">
<div class="inner-addon right-addon">
<i class="glyphicon glyphicon-search"></i> <input
placeholder="{{'SEARCH_HELP' | translate}}"
type="text" class="input-sm form-control"
ng-model="searchLocation" ng-click="runUserSearch()" />
</div>
</div>
My app is using ionic and angular js.. I am trying to add a clear button for the search, but Its not working?.. my Code is:
HTML:
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Search" ng-model="search">
</label>
<button class="button ion-android-close input-button button-small"
ng-click="clearSearch()" ng-if="search.length">
</button>
</div>
APP.JS
$scope.clearSearch = function() {
$scope.search = '';
};
Maybe i need something more but this is not working?
Any help thanks?
The problem is with ng-if use ng-show instead.
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="Search" ng-model="search">
</label>
<button ng-click="search = ''" class="button ion-android-close input-button button-small" ng-show="search.length">Clear
</button>
</div>
To use a button along the input, swap the label to a span or div, your
ng-clicks will work fine after that.
I know there are already some threads about accessing an element within another element...I tried a lot of stuff but I can't get it to work...
JSFiddle -> http://jsfiddle.net/YcPc8/2/
What I want to do on the page is to fill out the username and the password - then click the login button.
Here is a part of the html code of the webpage:
<section id="notifications"></section>
<div style="display: block;" id="login" class="">
<div id="login-content">
<form>
<h1>Nessus Vulnerability Scanner</h1>
<input name="login" tabindex="1" placeholder="Username" maxlength="128" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" class="required login-username" type="text">
<i class="glyphicons username"></i>
<input name="password" tabindex="2" placeholder="Password" maxlength="128" autocomplete="off" class="required login-password" type="password">
<i class="glyphicons password"></i>
<div id="remember-me" class="floatleft">
<div class="checkbox login-remember"></div>
<span class="floatleft">Remember Me</span>
</div>
<button type="submit" id="sign-in" tabindex="3" class="button secondary login floatright">Sign In</button>
</form>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<h2>Tenable Network Security</h2>
<div class="clear"></div>
Now I want to fill in the login and the password field...
Here is some of the code I tried within a javascript:
var nessus = window.open("https://localhost:8834/html5.html#/scans");
var doc = nessus.document.getElementById("login-content").getElementsByName("login");
doc.setAttribute("value","USERNAME");
element.getElementsByName("login") returns a list of elements. You might want to write this if you're sure it will return 1 element:
var doc = nessus.document.getElementsByName("login")[0];
EDIT : Moreover, getElementsByName is a method of the Document Interface. You can't use it on node element.
You'd better give an ID to your username input field, and access it directly by
var doc = document.getElementById("usernameInput");
doc.value = "USERNAME";
JSFiddle : http://jsfiddle.net/YcPc8/4/
i have a input box needs help message. but it should only show when the input field is active. how can I do it by using angularjs? thanks.
<input id="MiddleName" class="form-control" type="text" value="" ng-model="model.MiddleName" name="MiddleName">
<p class="help-block ng-hide" ng-show="????">this is middle name</p>
can you try it
<input id="MiddleName"
ng-blur="showmsg = false"
ng-focus="showmsg = true"
class="form-control" type="text"
value="" ng-model="model.MiddleName"
name="MiddleName">
<p class="help-block ng-hide"
ng-show="showmsg">this is middle name</p>
showmsg is true on focus, false on blur, and your div is showed if showmsg is true
<div ng-app="">
<div>
<input name="aaa" ng-model="test" ng-focus="focussed = true" ng-blur="focussed = false"/>
<div ng-show="focussed"> This is focussed input</div>
I have used angular.js ver 1.2.1.
Hopefully this will help you.