We Keep Coding

Filter by class in a Vue table, generated with v-for

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>

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

Toggle show/hide element where default on refresh is hide

My script successfully shows and hides a column in the table, I would like by default for it to be hidden and the script to reveal it.
Thanks for your help.
<a onclick="myFunction()" style="float:right;">Hide/Show</a>
<table>
<tr>
<th>TO Date</th>
<th id="myDIV">LDG Date</th>
<th>TO Time</th>
<th>LDG Time</th>
<th>Dep. air.</th>
<th>Arr. air.</th>
<th></th>
</tr>
{% for l in logbook %}
<tr>
<td>{{ l.TO_Date }}</td>
<td id="myDIV">{{ l.LDG_Date }}</td>
<td>{{ l.TO_time }}</td>
<td>{{ l.LDG_time }}</td>
<td>{{ l.dep_airport }}</td>
<td>{{ l.arr_airport }}</td>
<td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

Just add style="display: none;" to your cells:
<th class="myDIV" style="display: none;">
Notice I've changed id to class as you are not supposed to have two equal id's on the same page.
But I'd do that this way:
<style>
.ldg-date-hidden .myDIV { display: none; }
</style>
<a onclick="myFunction()" style="float:right;">Hide/Show</a>
<table id="myTable" class="ldg-date-hidden">
<tr>
<th>TO Date</th>
<th class="myDIV">LDG Date</th>
<th>TO Time</th>
<th>LDG Time</th>
<th>Dep. air.</th>
<th>Arr. air.</th>
<th></th>
</tr>
{% for l in logbook %}
<tr>
<td>{{ l.TO_Date }}</td>
<td class="myDIV">{{ l.LDG_Date }}</td>
<td>{{ l.TO_time }}</td>
<td>{{ l.LDG_time }}</td>
<td>{{ l.dep_airport }}</td>
<td>{{ l.arr_airport }}</td>
<td ><a style="color:red;" href="{{ url_for('logbookdelete',id_del=l.id ) }}">Delete</a></td>
</tr>
{% endfor %}
</table>
<script>
function myFunction() {
document.getElementById("myTable").classList.toggle("ldg-date-hidden");
}
</script>

You can hide the column by setting display:none by default and then you can do the below:
function myFunction() {
var x = document.getElementsByClassName("myDIV");
for(var i=0;i<x.length;i++)
{
if (x[i].style.display === "block") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
}

You can force the initial state by putting the inline style (display:none) on the tag, its not the best way but that should work.
I recommend you to make the styles on a css file separated of the html file to avoid hierarchy issues.
const x = document.getElementById('myDIV');
function toggleVisibility() {
if (x.classList.contains('hidden')) {
x.classList.remove('hidden');
} else {
x.classList.add('hidden');
}
}
CSS file
.hidden: {
display: none;
}

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

Getting chat id by row on click

I have a table filled with data. I have displayed it but now when I click on the History button on each row, to get chat_id of that row and pass it to controller. So far I am passing an array of IDs but I cant make it work.
Below is my code so far:
//views
<?php $arr = 0; ?>
#foreach($chat as $row)
<tr>
<td>{{ $row->chat_id }}</td>
<td>{{ $row->fullname }}</td>
<td>{{ $row->email }}</td>
<td>{{ $row->plaintext }}</td>
<td>{{ $row->transcript_text }}</td>
<td>{{ $row->duration }}</td>
<td>
<button type="submit" name="history" onclick="javascript:getID('{{$row->chat_id}}','{{$arr}}')">History</button>
<input name="recordid[]" id="recordid[]" type="hidden">
</td>
</tr>
<?php $arr++; ?>
#endforeach
<script type="text/javascript">
function getID(id, arr){
$('[id^=recordid]').eq(arr).val(id);
}
</script>
//controller
public function showMessage(){
$id = Input::get('recordid');
$history = Chat::where('chat_id','=', $id)->get();
return View::make('chat.chatview')->with(array('history'=>$history));
}

The name of your array what you gives to your Template is history with(array('history'=>$history)); and not chat #foreach($chat as $row) loop through history #foreach($history as $chat) to get result