Getting chat id by row on click - javascript

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

Related

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>

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

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
};
});

JavaScript click function table cell only applied on the first row

I had a JavaScript click function on a table row, but when I click it, the function only works on the first row. How do I fix this?
<script type="text/javascript">
$(document).ready(function(){
$('#detpanel').hide();
$("#showdet").click(function(){
$('#detpanel').slideDown(500);
});
$("#hidedet").click(function(){
$('#detpanel').slideUp(500);
});
$('#showdet').hover(function(){
$(this).divhover("background-color", "yellow");
});
});
</script>
<tbody>
<?php $i = 0; ?>
#foreach ($auser as $res)
<?php $i += 1; ?>
<tr #if($i%2==0) class="bgcolor dihover" #endif id='showdet' class="dihover">
<td>{{ $res->id }}</td>
<td>{{ $res->name }}</td>
<td>{{ $res->email }}</td>
<td>
<a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a> |
<a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
</td>
</tr>
#endforeach
</tbody>
ID of an element must be unique, since you are creating the elements in a loop use class.
When using ID selector it will return only the first element with the said ID, so in your case the click handler is getting registered to only the first element
<tbody>
<?php $i = 0; ?>
#foreach ($auser as $res)
<?php $i += 1; ?>
<tr #if($i%2==0) class="bgcolor dihover" #endif class='showdet' class="dihover">
<td>{{ $res->id }}</td>
<td>{{ $res->name }}</td>
<td>{{ $res->email }}</td>
<td>
<a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a> |
<a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
</td>
</tr>
#endforeach
</tbody>
then use class selector to register the click handler
$(document).ready(function () {
$('#detpanel').hide();
$(".showdet").click(function () { //use class selector here
$('#detpanel').slideDown(500);
});
$("#hidedet").click(function () {
$('#detpanel').slideUp(500);
});
$('#showdet').hover(function () {
$(this).divhover("background-color", "yellow");
});
});

Categories