We Keep Coding

Why JQuery code does not work when i click on button?

What is the problem with my JQuery code when I click on the button it does not work, I searched a lot and tried many ways but my problem not solved. I used this code in other files, on there it works correctly but it not work in this file.
this my table:
<table class="table table-bordered">
<tbody>
<?php
$insideOrders = \App\OutsideModel::where('total_id', '=', $order->order_id)->get();
?>
#foreach($insideOrders as $index => $inside)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $inside->menu->name }}</td>
<td>{{ $inside->menu->category->name }}</td>
<td>{{ $inside->order_amount }}</td>
<td>
#if($order->status=='1')
<button id="send_order" class="btn btn-primary btn-xs"
order_id="{{$order->order_id}}">ارسال<i id="send_icon"></i>
</button>
#else
<button class="btn btn-success btn-xs" disabled>ارسال شده</button>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
This is my js:-.
$('table tbody').on('click', 'button', function () {
var order_id = $(this).attr("order_id");
$.ajax({
url: '{{route('sendOrders')}}',
type: 'GET',
dataType: 'json',
data: {
'id': order_id
},
success: function (response) {
if (response) {
alert('ارسال شد!');
window.location.reload();
}
else {
alert('ارسال نشد!')
}
}, error: function (err) {
}
})
});

I solved my problem, I put my table inside a dive like below, I don't know what happens when I put it inside a dive. but it works now.
<div id="apended_tb">
<table class="table table-bordered">
<tbody>
<?php
$insideOrders = \App\OutsideModel::where('total_id', '=', $order->order_id)->get();
?>
#foreach($insideOrders as $index => $inside)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $inside->menu->name }}</td>
<td>{{ $inside->menu->category->name }}</td>
<td>{{ $inside->order_amount }}</td>
<td>
#if($order->status=='1')
<button id="send_order" class="btn btn-primary btn-xs"
order_id="{{$order->order_id}}">ارسال<i id="send_icon"></i>
</button>
#else
<button class="btn btn-success btn-xs" disabled>ارسال شده</button>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
Then:-
$('#apended_tb table tbody').on('click', 'button', function () {........}

Replace this
$('table tbody').on('click', 'button', function () {
with following:
$(document).on('click', '#send_order', function () {
And there is a mistake change order_id with
data-order_id

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()

Refresh div by class using jQuery

i have table render with PHP using foreach loop.
#foreach ($comments as $comment)
<tr>
<td>{{ $comment->lot_date }}
<br>
#if (count($comment->ourcar) >= 1)
<p>Saved</p>
#else
<form method="POST" action="/comments/{{ $comment->id }}/ourcars">
{{ csrf_field() }}
<button type="submit" class="btn btn-xs btn-primary">Our Car</button>
</form>
#endif
</td>
<td>
{{ $comment->bid }}
</td>
<td>{{ $comment->auction_name }}</td>
<td class="block">
#foreach(explode('#', $comment->pics_urls, 3) as $pic)
<a href="{{ $pic }}" class='iframe'>
<img src="{{ $pic }}" class="img-fluid" width="30" height="32">
</a>
#endforeach
</td>
<td>{{ $comment->company }}</td>
<td>{{ $comment->model_name_en }}</td>
<td>{{ $comment->model_type_en }}</td>
<td>{{ $comment->grade_en }}</td>
<td>{{ $comment->model_year_en }}</td>
<td>{{ $comment->color_en}}</td>
<td>{{ $comment->displacement }}</td>
<td>{{ $comment->transmission_en }}</td>
<td>{{ $comment->scores_en }}</td>
<td>{{ $comment->mileage_num }}</td>
<td>{{ $comment->start_price_en }}</td>
<td><div class="comment-body">{{ $comment->body }}</div></td>
<td>{{ $comment->lot->result_en or '---' }}</td>
<td>{{ $comment->user->name }}
<td>
<button data-id="{{ $comment->id }}" class="btn-link editButton"><span class='glyphicon glyphicon-edit'></span></button>
</td>
<td>
<form method="POST" action="{{route('comments.destroy', ['id' => $comment->id]) }}">
{{ method_field('DELETE') }}
{{ csrf_field() }}
<div class="form-group">
<button type="submit" class="btn-link" onclick="return confirm('Are you sure?')"><span class='glyphicon glyphicon-trash' style="color:red"></span></button>
</div>
</form>
</td>
</tr>
#endforeach
I create a modal window to add comment to the row using JS. After i submit comment and modal is closed and i want to refresh content in <td class="comment-body">comment</td>
So i have a problem with refreshing div by class, i can use an id because table is looped:
$(function() {
$('.editButton').click(function (e) {
var button = $(this);
var geturl = '/comments/' + button.data('id') + '/edit';
var posturl = '/comments/' + button.data('id');
$.get(geturl)
.done( (response) => {
bootbox.dialog( {
title : "Add comment",
message : response,
buttons : {
addButton : {
label : 'Add comment',
className : 'btn btn-primary',
callback: () => {
var modalForm = $('#modalForm');
if ($('#commentBody').val()) {
$.ajax({
type : 'POST',
url : posturl,
data : modalForm.serialize(),
success : (response) => {
if (response === "ok") {
bootbox.hideAll();
$('.comment-body').toggle();
}
}
})
}
return false;
}
},
closeButton : {
label : 'Close',
className : 'btn btn-default'
}
}
})
})
.fail( ( errorResponse ) => {
bootbox.alert('Error! Comment is not added');
});
});
});
</script>
My modal view:
<div class="modal-body">
<form action="#" id="modalForm" data-id="{{ $comment->id }}">
<div class="form-group">
{{ csrf_field() }}
{{ method_field('PUT') }}
<textarea name="body" id="commentBody"
placeholder="Add Your Comment Here." class="form-control" required>{{ $comment->body }}</textarea>
</div>
</form>
</div>
This is the result:
I tried to use $('.comment-body').toggle(); but it is not working. How should i refresh that div after editing comment?

If I got your point .. I think its very simple
1st: you need to use after var button = $(this);
var comment_section = button.closest('tr').find('.comment-body');
2nd: on ajax success callback function
comment_section.text($('#commentBody').val());

var old_comment = $('.comment-body').text();
$('.comment-body').text(old_comment + '\n' + new_comment);
I don't really understand about your refresh. The code above is to append a new comment to old ones.

Set the innerHTML of the element to populate it, or use empty string to clear it:
$('.comment-body').html("New Comment") // New contents
$('.comment-body').html("") // Clear contents
If you have a .comment-body in more than one row of your table, and you only want to "refresh" one of them, then you'll need to specify an id so you can pinpoint the row that contains the cell. E.g...
<tr id="row1"><td class="comment-body">..comment..</td><tr>
$("#row1").find(".comment-body").html("New Comment Text")
NB: Instead of .html you may also use .text to prevent html code in users' comments from being injected into your page.

$('.comment-body').('');
Try this or
$('.comment-body').html('');

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>

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>