Link to home
Start Free TrialLog in
Avatar of eugene007
eugene007

asked on

[form-control] Retain values after a POST action

Upon pressing the search button, the values in the form-control disappear.  How do I retain the form control values after triggering the search action.

Employee.php

	<div class="panel panel-default">
		 <div class="panel-heading">Search Employee</div>
		 <div class="panel-body">
			<div class="row">
				<div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name" ng-model="employee.name">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="age">Age</label>
                        <input class="form-control" type="age" name="age" id="age" ng-model="employee.age">                    
                    </div>
				</div>
				<div class="col-md-6">
				    <div class="form-group">
                        <label class="control-label" for="gender">Gender</label>
                        <input class="form-control" type="text" name="gender" id="gender" ng-model="employee.gender">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="company">Company</label>
                        <input class="form-control" type="company" name="company" id="company" ng-model="employee.company">                    
                    </div>
				</div>
			</div> 
		</div>
		<div class="panel-footer">
			<div class="align-right">
				<button type="button" class="btn btn-secondary" ng-click="clear()" data-dismiss="modal">Clear</button>
				<button type="button" class="btn btn-secondary" ng-click="search()" data-dismiss="modal">Search</button>
			</div>
		</div>
	</div>

Open in new window


EmployeeController.js

	scope.search = function(){
		$http({
			method: 'POST',
			url: '/api/v1/employee/search',
			data: {
				name:scope.employee.name,
				age:scope.employee.age,
				gender:scope.employee.gender,
				company:scope.employee.company
			}
		}).then(function successCallback(response){
			scope.employee = response.data;
		});
	}

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Look at line 13 of your controller code

scope.employee = response.data;

Open in new window

You are overwriting the employee property with what is returned from the http.post - so if your response is empty then it will clear the form because scope.employee is overwritten.

Note - it looks like you are using a POST to do a GET - any reason for that?
scope seems to be missing a $?
try adding "return false;" to button clicks...

ng-click="search(); return false;"

or

ng-click="return search()" and add this "return false;" to your search function...
@Huseyin KAHRAMAN,

Angular does not work like that - an ng-click handler does not submit a form - it just handles a click - you don't need to return false.

The issue here is he is wiping out his data in the return from the $http call (line 12)
got it :)

scope.employee = response.data;

I thought it is just a field on the page, but it overwrites everything...
but this is what he wants to do... he puts a name, leaves the rest as empty, click search and it populates all...

but I guess he needs to add a condition to line 12

if (response.data contains something)
scope.employee = response.data
else alert("no data found");

Open in new window

Or a stautus

if (response.data.status == 'Success') {
   scope.employee = response.data.employee;
}

Open in new window

Avatar of eugene007
eugene007

ASKER

Julian Hansen: When I use GET the filter doesn't work.
Also referring to scope.employee = response.data

the result would reflect on the following code:

  <div class="table-responsive">  		
		<table class="employeeGrid table-striped table-bordered table-hover table-condensed">
			<thead>
				<tr>
					<th><a href="" ng-click="orderByField='name'; reverseSort = !reverseSort">Name</a></th>
					<th><a href="" ng-click="orderByField='age'; reverseSort = !reverseSort">Age</a></th>
					<th><a href="" ng-click="orderByField='gender'; reverseSort = !reverseSort">Gender</a></th>
					<th><a href="" ng-click="orderByField='company'; reverseSort = !reverseSort">Company</a></th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="person in employee | orderBy:orderByField:reverseSort">
					<td>{{person.name}}</td>
					<td>{{person.age}}</td>
					<td>{{person.gender}}</td>
					<td>{{person.company}}</td>
					<td>
						 <div class="btn-toolbar" role="toolbar">
							<button class="btn" ng-click="viewEmployee(person.id)"><span class="glyphicon glyphicon-eye-open"></button> 
							<button class="btn" ng-click="editEmployee(person.id)"><span class="glyphicon glyphicon-pencil"></button> 
							<button class="btn" ng-click="deleteEmployee(person.id)"><span class="glyphicon glyphicon-trash"></button>
						 </div>
					</td>
				</tr>
			</tbody>
		</table>     	
    </div>

Open in new window


So if the result is empty then the table would be empty. Otherwise record would be displayed in rows and columns.
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
As suggested, I am using two scopes. I renamed ng-model:

	<div class="panel panel-default">
		 <div class="panel-heading">Search Employee</div>
		 <div class="panel-body">
			<div class="row">
				<div class="col-md-6">
                    <div class="form-group">
                        <label class="control-label" for="name">Name</label>
                        <input class="form-control" type="text" name="name" id="name" ng-model="employeeSearch.name">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="age">Age</label>
                        <input class="form-control" type="age" name="age" id="age" ng-model="employeeSearch.age">                    
                    </div>
				</div>
				<div class="col-md-6">
				    <div class="form-group">
                        <label class="control-label" for="gender">Gender</label>
                        <input class="form-control" type="text" name="gender" id="gender" ng-model="employeeSearch.gender">                    
                    </div>

                    <div class="form-group">
                        <label class="control-label" for="company">Company</label>
                        <input class="form-control" type="company" name="company" id="company" ng-model="employeeSearch.company">                    
                    </div>
				</div>
			</div> 
		</div>
		<div class="panel-footer">
			<div class="align-right">
				<button type="button" class="btn btn-secondary" ng-click="clear()" data-dismiss="modal">Clear</button>
				<button type="button" class="btn btn-secondary" ng-click="search()" data-dismiss="modal">Search</button>
			</div>
		</div>
	</div>

Open in new window


	scope.search = function(){
		$http({
			method: 'POST',
			url: '/api/v1/employee/search',
			data: {
				name:scope.employeeSearch.name,
				age:scope.employeeSearch.age,
				gender:scope.employeeSearch.gender,
				company:scope.employeeSearch.company
			}
		}).then(function successCallback(response){
				scope.employee = response.data;
		});
	}

Open in new window


Now it works!
I posted very similar code above and deleted that part from my post since I am not familiar with AJS Model :)
As suggested, I am using two scopes
Explain?
whenever possible, using post is wiser...
No! this is not good advice. Please go and read up on RESTful interfaces and when and why we use GET POST PUT and DELETE

There are very good reasons why we use GET for getting data and POST For updating data - recommending that you always use one is not advised.
Explain?

scope.employeeSearch : for search criteria
scope.employee : for result data
No! this is not good advice. Please go and read up on RESTful interfaces and when and why we use GET POST PUT and DELETE

there are issues with GET like


Security - If we use GET with query strings and https, the query strings can be saved in server logs and forwarded as referral links. Both of these are now visable by server/network admins and the next domain the user went to after leaving your app. So if we send a query containing confidential PII data such as a customer's name this may not be desired.

URL maximum length - Not a big issue, but some browsers have a limit on the length. So if we have several items in our url like query, paging, fields to return, etc....

Post is not cache by default. Some say caching is desired; however, how often is that exact same set of search criteria for that exact object for that exact customer going to occur before the cache times out anyway?

Escape/unescape issues...

... so, I said, whenever possible use POST :)
here is a good writing about this

http://blog.teamtreehouse.com/the-definitive-guide-to-get-vs-post


Simply put, because GET requests are more usable:

GET requests can be cached
GET requests can remain in the browser history
GET requests can be bookmarked
GET requests can be distributed & shared
GET requests can be hacked
scope.employeeSearch : for search criteria
scope.employee : for result data 

Open in new window

That is only one scope - not two. Two scope variables - only one scope.

... so, I said, whenever possible use POST :)

Well you just redefined web programming and RESTful interfaces :)
I have to object though because the information being given here is one sided and not entirely accurate. In terms of security - your requests should be structured such that the requests do not contain critical information - you pass an id or identifier that gets you the data you want not the actual data. If the data is secured behind a login - the cached URL is of no use - unless you have a logon - in which case the point is moot. If it is public facing - again no issue.

There is also the issue of convention - that a well written application is self documenting when proper conventions are followed. A GET request conveys meaning - it says I am asking for information - but not changing it. A POST says I am going to change something.

A GET request conveys meaning - it says I am asking for information - but not changing it.
A POST says I am going to change something.

in both cases we SUBMIT some INPUT data and ask for RESULT :)

I run away from GET whenever possible and use POST, unless it is absolutely necessary...
in both cases we SUBMIT some INPUT data and ask for RESULT :)
Yes but the method tells us what our intent is.
I run away from GET whenever possible and use POST, unless it is absolutely necessary...
That is your choice - does not make it a best practice.
There are good reasons why we use the different methods - in the Angular world the GET / POST / PUT / DELETE methods are used extensively - take a look at Angular Resource (https://docs.angularjs.org/api/ngResource/service/$resource) - an Angular module for implementing RESTFul requests to API's - it makes extensive use of these methods.
This question is in the Angular Topic area - so advising that one should go against convention when parts of Angular rely on it is not really helping.
for 20 years experience, I dealt with problems caused by GET (email, form, email, file upload/download, web app, web services, ftp, ajax etc) and ended up with POST :)


that's why I say "whenever possible, o with POST"
Agree with Julian (I usually do) about GET and POST requests. POST is for changing state or information on the server.  GET is for acquiring information from the server.  Important terms of art are idempotent and nullipotent.  Get requests must be nullipotent with respect to the contents and state of the server.

With respect to the assertion that GET requests can be hacked, I would add that all requests can be hacked, and it's the programmers' job to ensure that a script relies only on known good values.

Why choose GET, especially with URL parameters?  Bookmarks and sharing are the two factors that most (human) clients will cite as important to usability.  There are many ways to screw this up, too.  If you have sequentially numbered database keys, you might be doing it wrong.  If you're sending confidential information in a URL parameter, you're definitely doing it wrong.  But if you want people and search engines to find your web pages, GET requests are the right thing.

Laravel docs probably have good information on request types and routing.
https://laravel.com/docs/5.4/routing

Some related information here.
http://www.php-fig.org/psr/psr-7/
Answer does not match question asked - recommend question is deleted.