We Keep Coding

Cannot search using AJAX in a Laravel app

I cannot search using ajax, that is my problem. I need to search without refreshing.
Here is my controller code; am I missing something here?
public function search(Request $request){
if($request->ajax())
{
$employees = DB::table('employeefms')->where('last_name','LIKE','%'.$request->search.'%')
->orWhere('first_name','LIKE','%'.$request->search.'%')->get();
return response();
}
}
Here is my view. I know I have a lot of fields in here! Please check if I'm missing something:
#foreach ($employees as $employee)
<tbody>
<tr>
<td>{{ $employee->employee_no}}</td>
<td>{{ $employee->last_name}}</td>
<td>{{ $employee->first_name}}</td>
<td>{{ $employee->middle_name}}</td>
<td>{{ $employee->nick_name}}</td>
<td>{{ $employee->gender}}</td>
<td>{{ $employee->birthdate }}</td>
<td>{{ $employee->age}}</td>
<td>{{ $employee->birthplace}}</td>
<td>{{ $employee->province}}</td>
<td>{{ $employee->doMarriage}}</td>
<td>{{ $employee->height}}</td>
<td>{{ $employee->weight}}</td>
<td>{{ $employee->bloodtype}}</td>
<td>{{ $employee->nationality }}</td>
<td>{{ $employee->religion}}</td>
<td>{{ $employee->civil_stats}}</td>
<td>{{ $employee->sss_no}}</td>
<td>{{ $employee->tin_id}}</td>
<td>{{ $employee->phil_no}}</td>
<td>{{ $employee->pagibig_no}}</td>
<td>{{ $employee->address_no}}</td>
<td>{{ $employee->street_no}}</td>
<td>{{ $employee->brgy}}</td>
<td>{{ $employee->municipality}}</td>
<td>{{ $employee->cur_province}}</td>
<td>{{ $employee->region}}</td>
<td>{{ $employee->zipcode}}</td>
<td>{{ $employee->per_address_no}}</td>
<td>{{ $employee->per_street_no}}</td>
<td>{{ $employee->per_brgy}}</td>
<td>{{ $employee->per_municipality}}</td>
<td>{{ $employee->per_province}}</td>
<td>{{ $employee->per_region}}</td>
<td>{{ $employee->per_zipcode}}</td>
<td>{{ $employee->mobile_no}}</td>
<td>{{ $employee->tel_no}}</td>
<td>{{ $employee->email_ad}}</td>
<td>{{ $employee->guard_name}}</td>
<td>{{ $employee->guard_add}}</td>
<td>{{ $employee->guard_relat}}</td>
<td>{{ $employee->grd_mobile_no}}</td>
<td><i class="fa fa-edit"></i></td>
<td>
{!!Form::open(['action'=>['Admin\EmployeeFilemController#destroy', $employee->id],'method'=>'POST', 'align'=>'right'])!!}
{{Form::hidden('_method', 'DELETE')}}
{{Form::button('<i class="fa fa-trash"></i>',['type' => 'submit','class' => 'btn btn-sm btn-danger'])}}
{!!Form::close()!!}
</td>
</tr>
</tbody>
#endforeach
My AJAX:
<script type="text/javascript">
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{ URL::to('admin/employeemaintenance/search') }}',
data : {'search':$value},
success:function(data){
var data1 = jQuery.parseJSON(data);
if(data1.msg == "success"){
$.each(eval(data1.data), function(){
$('tbody').html(data);
})
},
//no data found
}
});
})
</script>

You have to make two improvements in your code as
1) either you need to turn off the CSRF protection for your route or pass "_token": "{{ csrf_token() }}" parameter with your data
2) you are returning response(), which doesn't make sense return $employees instead of that

Delete record in firebase with Javascript - Vuejs

I am able to show all data from my products record in Firebase DB, what i want now is to delete a certain record that i select.
I got a bit of the documentation of Firebase but i'm not so good with VueJs, although i think this is more of a JavaScript problem.
What i get on my console when i click the delete link is:
Error: Firebase.child failed: First argument was an invalid path:
"undefined". Paths must be non-empty strings and can't contain ".",
"#", "$", "[", or "]"
Here is my code:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product) {
console.log("Product:" + product);
productsRef.child(product['.key']).remove();
toastr.success("Product deleted successfully");
}
</script>
Below you can see my DB:
Any help is appreciated, Thank you.

You need to reference first to that record and then call the remove function, here is an example:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k, k.sellerId, k.prodId)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product, sellerID, prodId) {
var currentRef = db.ref('products/' + sellerID + '/' + prodId);
currentRef.remove();
toastr.success("Product deleted successfully");
}
</script>

I think you should take product id from prodid
productsRef.child(product['prodid']).remove()

Total amount in ng-repeat

I need helping with calculating the total amount of tickets.number in this ng-repeat
HTML
<tr ng-repeat="tickets in listTickets | filter: searchText | orderBy: sortorder:reverse">
<td>{{ tickets.match }}</td>
<td>{{ tickets.number }}</td>
<td>{{ tickets.company }}</td>
<td>{{ tickets.contact }}</td>
<td>{{ tickets.mail }}</td>
<td>{{ tickets.phone }}</td>
<td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button> </td>
<td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td>
</tr>
<tr>
<td colspan="8"> Total of: {{ totalTickets() }} tickets</td>
</tr>
My controller.js
$scope.totalTickets = function(){
}

You can use ECMAScript 5 Array.prototype.map() and Array.prototype.reduce() to get the total sum.
AngularJS method totalTickets passing the filteredArr array parameter as you are filtering in the view ng-repeat:
$scope.totalTickets = function (filteredArr) {
return filteredArr
.map(function (o) {
return o.number;
})
.reduce(function (a, b) {
return a + b;
}, 0);
};
AngularJS view:
<tr ng-repeat="tickets in listTickets | filter: searchText as filteredArr | orderBy: sortorder:reverse">
<td>{{ tickets.match }}</td>
<td>{{ tickets.number }}</td>
<td>{{ tickets.company }}</td>
<td>{{ tickets.contact }}</td>
<td>{{ tickets.mail }}</td>
<td>{{ tickets.phone }}</td>
<td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button></td>
<td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td>
</tr>
<tr>
<td colspan="8"> Total of: {{ totalTickets(filteredArr) }} tickets</td>
</tr>
Code example:
var listTickets = [{number: 1},{number: 2},{number: 3},{number: 4}],
total = listTickets.map(o => o.number).reduce((a, b) => a + b, 0);
console.log(total);

You can also use filter to calculate a total.
Html
<tr ng-repeat="tickets in listTickets | filter: searchText | orderBy: sortorder:reverse">
<td>{{ tickets.match }}</td>
<td>{{ tickets.number }}</td>
<td>{{ tickets.company }}</td>
<td>{{ tickets.contact }}</td>
<td>{{ tickets.mail }}</td>
<td>{{ tickets.phone }}</td>
<td><button class="btn btn-info" ng-click="edit(tickets._id)">Edit</button> </td>
<td><button class="btn btn-danger" ng-click="delete(tickets._id)">Radera</button></td>
</tr>
<tr>
<td colspan="8"> Total of: <span data-ng-bind="tickets.total=(listTickets | total:'number')"></span> tickets</td>
</tr>
Controller.js
app.filter('total', function(){
return function(input, property) {
var total = 0;
angular.forEach(input, function(value, key) { total += parseFloat(value[property]) });
return total;
}
})

The cleanest solution involves the ngRepeat as keyword (https://docs.angularjs.org/api/ng/directive/ngRepeat) and a custom total filter as posted by #aravinthan-k.
as keyword has to be last in the filter stack in the ng-repeat. Whatever you do in between with different filters, the as alias will have the final result.
total filter is easily reusable all over your code.
Fiddle: http://jsfiddle.net/25g9hzzd/2/
Example HTML:
<div ng-app="myapp">
<div ng-controller="Ctrl">
<h1>List</h1>
<input type="text" ng-model="form.searchText"/>
<ul>
<li ng-repeat="item in list | filter: form.searchText as result">
{{item.title}}
</li>
<li>TOTAL: {{result | total:'number'}}</li>
</ul>
</div>
</div>
Example filter (by #aravinthan-k) and the controller:
var app = angular.module('myapp', []);
app.filter('total', function(){
return function(input, property) {
var total = 0;
angular.forEach(input, function(value, key) { total += parseFloat(value[property]) });
return total;
}
});
app.controller('Ctrl', function($scope){
$scope.form = {
searchText: ''
};
$scope.list = [
{
title: 'A',
number: 1
},
{
title: 'AB',
number: 2
},
{
title: 'ABC',
number: 3
},
{
title: 'ABCD',
number: 4
},
];
});

Because you've filtered the list and need to count only the filtered elements, you'll need to pre filter the list in the controller. You can use the search filter in your controller to pre filter the list.
// Inject $filter so that it can be used in the controller
function MyController($filter) {
$scope.filteredTickets = [];
// filter the tickets and count how many there are in the filtered list
function updateTickets(searchTerm) {
$scope.filteredTickets = $filter('search')($scope.listTickets, $scope.searchText);
// Use Array.reduce to add up the number of tickets
$scope.ticketCount = $scope.filteredTickets.reduce(function(count, ticket) {
return count + ticket.number;
}, 0);
}
// update the ticket count on initialisation
updateTickets($scope.searchText);
// update ticket count when search text changes
$scope.$watch('searchText', function(newValue, oldValue) {
if (newValue !== oldValue) {
updateTickets(newValue);
}
});
}
Then in your HTML you can ng-repeat through the pre filtered tickets, and use the pre calculated total.
<tr ng-repeat="tickets in filteredTickets | orderBy: sortorder:reverse">
...
</tr>
<tr>
<td>Total of {{ ticketCount }} tickets</td>
</tr>

filter in specific multiple expressions angular js

I want to search in column name or number only, currently i'm only searching in column name.
<input type="text" ng-model="test.name" placeholder="start typing..">
my expressions,
<tr ng-repeat="x in names | filter:test | limitTo:totalDisplayed">
<td>{{ x.name }}</td>
<td>{{ x.number}}</td>
<td>{{ x.city }}</td>
<td>{{ x.country }}</td>
</tr>

Create a custom filter to accomplish this.
html
<input type="text" ng-model="test.name" placeholder="start typing..">
<tr ng-repeat="x in names | myFilter: test">
<td>{{ x.name }}</td>
<td>{{ x.number}}</td>
<td>{{ x.city }}</td>
<td>{{ x.country }}</td>
</tr>
js filter
angular.module('myApp').filter('myFilter', function () {
return function (list, input) {
//input is test object and list is your current array you want to return a filtered array
var myArray = [];
list.forEach(function(o, i){
if(o.name.indexOf(input.name) > -1 || o.number.indexOf(input.name) > -1 )
myArray.push(o);
});
return myArray
};
});

Pass Angular.js binding to javascript function

Allow me to begin by saying that I am a C++ developer by profession and have extremely poor javascript skills, so please forgive me if this is a basic question. What I am trying to do is take a string being generated from an Angular binding and pass it to a function in javascript. I have included an example below. Note that I am trying to pass {{x.VodName}} to the function called "MyFunction(vodName)". Thanks in advance!
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" onclick="MyFunction({{ x.VodName }});">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
<script>
function MyFunction(vodName)
{
window.alert(vodName);
}

In your template you can give an variable to a function by just giving it to the function. And instead of onclick you should use ng-click
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="MyFunction(x.VodName);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
For you function in the controller it can be important to know the difference between var MyFunction = function(name){} and function MyFunction(name){}. For more about this, look here

try something like this, where your controller could look like:
<script>
var vapp = angular.module("vapp", []);
vapp.controller("videoController", ["$scope", function($scope){
$scope.names = [];
$scope.play = function(files){
alert(files.VodName);
};
}]);
</script>
and your html:
<table ng-controller="videoController">
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="play(x);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
</table>