Angular JS ng-click does not work on search icon - javascript

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>

Related

Boostrap autocomplete alignment

I have a search box with input-prepend and input-append groups.
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
<input class="form-control autocomplete" type="text" name="q" value="..." aria-label="Search" autocomplete="off">
<div class="input-group-append barcode-scan d-none">
<i class="bi bi-upc-scan"></i>
</div>
</div>
bootstrap-autocomplete is used for autocomplete widget.
However, the dropdown alignment breaks when reducing the browser width:
The dropdown shifts left. It's aligned with 'Search' and not the input element.
The appended input group is rendered as part of the dropdown and not the search element. See image below.
Any pointers appreciated.

Display query and result on the same page

I am currently having a two page application which lets the user enter the data and hit submit and the next page opens with the Query result in a grid. like below
home.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">From Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="fromDate"
name="fromDate"
uib-datepicker-popup="{{format}}"
ng-model="request.fromDate"
is-open="popup1.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.fromDate.$error"
ng-if="homeForm.fromDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div>
<label style="font-size: medium">To Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="toDate"
name="toDate"
uib-datepicker-popup="{{format}}"
ng-model="request.toDate"
is-open="popup2.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<div style="color:maroon" ng-messages="homeForm.toDate.$error"
ng-if="homeForm.toDate.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class='btn btn-danger' ng-click="clearRequest(homeForm)">Clear</button>
<!--ng-disabled="!homeForm.$valid" -->
<button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
</div>
</div>
</div>
</form>
result.html
<div>
<h4 class="text-primary">Search Results</h4>
<div layout="row" layout-sm="column" layout-align="space-around">
<md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
</div>
<div id="gridStyle" ng-if="gridOptions.data"
ui-grid="gridOptions"
class="myGrid"
ui-grid-resize-columns
ui-grid-pagination
ui-grid-selection
ui-grid-auto-resize
ui-grid-cellNav
ui-grid-exporter>
</div>
</div>
Now I am trying to put all the query and the query result together in a page. Like all the inputs/buttons on the left and the grid on the right.
Adding the code in to Plunker here
Do I need to add one more html page that will have both these html, and I should be calling that in the app.js? I am very new to AngularJS not sure how can I do this
Yes, you should create a view component, which will include your two components which will become the child components of the newly added view.
Check out this tutorial to learn the concept.
You can use Asynchronous XHTML And JavaScript (AJAX) to have everything on a single page, without loading a different page, which is what I would do unless you have requirements to display results on a separate page.
Considering you have type=button for the submit button, it appears AJAX was intended since this will prevent the page from reloading when the submit button is clicked.
Basically, in the createRequest() function, send the query parameters (which appear to be included in the homeForm argument) to the query service. When the response is received, update the gridOptions.data with the values you want displayed in the table... Angular should take care of the rest.

Validation of the browser in dropdown form

I have implemented a dropdown for the login but when I submit it with some empty field the dropdown is closed and therefore the validation notifications of the browser don't appear.
This is my dropdown with the form:
<div class="btn-group dropleft" >
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<spring:message code="master.page.login"/>
</button>
<div class="dropdown-menu p-4" style="width: 250px;" aria-labelledby="dropdownMenu">
<form:form action="j_spring_security_check" modelAttribute="credentials">
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
<form:input id="username" path="username" cssClass="form-control" aria-describedby="basic-addon1" required="required" />
<form:errors class="error" path="username" />
</div>
</div>
<div class="form-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">
<img src="images/password.png" style="height:15px;width:auto" />
</span>
<form:password id="password" path="password" cssClass="form-control" aria-describedby="basic-addon2" required="required"/>
<form:errors class="error" path="password" />
</div>
</div>
<button type="submit" class="btn btn-dark">Login</button>
<br />
<br />
<jstl:if test="${showError == true}">
<div class="alert alert-danger small" role="alert">
ERROR!
</div>
</jstl:if>
</form:form>
</div>
</div>
I have also tried adding an 'onclick' event for the submit to try to open the dropdown with jQuery but it doesn't seem that the button works as it should. I have used this code that, by contrast, has helped me to open the dropdown when there is an error of incorrect credentials when calling the database:
$(".dropleft").addClass("show");
$("#dropdownMenu").attr("aria-expanded", "true");
$(".p-4").addClass("show");
Any idea how to get to visualize the validation?
The problem is any click inside the dropdown closes it and it can be solved, in this particular case, with:
$("[modelAttribute='credentials']").click(e => { e.stopPropagation() })
For the record, placing a <form> inside a dropdown is a no:no.
Improving the answer of Andrei, for my case worked I've needed to add this code:
$(".dropdown-menu").click(function(e){
e.stopPropagation();
});

Can't clear input field in Angular on click

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>

Prevent from dynamically changings with ng-model

I have some fields to edit user' data. One of the field is also used in breadcrumb:
I use ng-model to bind all the fields:
...
<ol class="breadcrumb">
<li>Home</li>
<li>{{user.name}}</li>
<li class="active">Profile</li>
<li class="active">Edit</li>
</ol>
<hr>
<form role="form" class="col-sm-2">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-model="user.name" placeholder="Username" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.birthday" placeholder="Birthday" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" ng-value="user.city" placeholder="City" class="form-control">
</div>
<button id="submit" ng-click="saveUser(user)" class="btn btn-success pull-right">Save</button>
</form>
...
The problem and also the right behavior of ng-model changes the name value of breadcrumb on input updating:
Is it possible to set value in breadcrumb as a static and prevent it from changing?
The actual result I want to achieve:
Answer is that I should use one-time data-binding using :: on my li element in the breadcrumb like so:
<li>{{::user.name}}</li>
It prevents data from future changing once it was rendered.

Categories