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()
Related
I'm in Vue2 and I have a table, created by a v-for, with the rows that have a class of "included" or "allResults", based on a condition.
I need to show/hide only the table rows with a class of "included" when I trigger a switch (dataShow) that has a value of all or selected.
I've written a simple method for that but I would like to implement this function directly in the vue template, checking if every table row has a class of selected and hide it.
thanks in advance for help
<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
How about using v-if or v-show to toggle the rows?
If dataShow is false, show all rows
or, if dataShow is true, show only the rows listed in watchedProperty
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
If you'd like to use class to toggle the visibility, you need to set css. Something like this...
<table :class="{'showAll': !dataShow}">
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
</table>
<style scoped lang="scss">
table.showAll td:not(.included) {
display: none;
}
</style>
We have Vue.js project with custom table bound to array. It looks as following:
The key part of HTML code looks as following:
<InfiniteScroll ref="scroller" :disable="finished" #load="onLoad">
<swipeable-table
v-if="waitingList.length"
:headers="headers"
:items="waitingList"
:loading="loading"
custom-width
outerBorder
>
<template slot="rows" slot-scope="{ item: booking }">
<tr>
<td>{{ 0 }}</td>
<td></td>
<td></td>
<td>{{ fullName(booking.user) }}</td>
<td>{{ unitName(booking.search_by) }}</td>
...
</tr>
</template>
</swipeable-table>
...
</InfiniteScroll>
The waitingList is an array of objects.
The part of JavaScript code looks as following:
methods: {
fullName(user) {
return fullName.by(user, null, true)
},
unitName(unit) {
return unit?.name ?? ''
},
...
The table is scrollable that is it shows 30 items at the beginning and after you scroll next 30 items (30+30=60) and so on.
The array of objects looks as following:
Is there any way to use some JavaScript method to achieve it? If not how can I do it?
you can add index in the same way as item in template.
<template slot="rows" slot-scope="{ item: booking,index:index }">
<tr>
<td>{{ index }}</td>
<td></td>
<td></td>
<td>{{ fullName(booking.user) }}</td>
<td>{{ unitName(booking.search_by) }}</td>
...
</tr>
</template>
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
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
};
});
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>