I have integrated Vuejs in my laravel project.
Currently My scenario is when i click on my case it navigates me to the detail page but on detail page it does not show me the values which i want to get from the database.
My Vue where I am clicking the case:
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and my script:
methods: {
handleCaseClick() {
this.$router.push(`/case-log/id`)
},
}
My detail page Vue where it navigated me when i click on case:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
My routes.js
{
path: '/case-log/:id',
component: require('./views/detail-page').default
},
My web.php
where I am getting the values from database
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
I am unable to show values from database where I am doing wrong? I have also attached my screen shot of my output showing internal server error and also you can see the field but not fetching the values from db.
I really need your help here
thanks in advance.
local.ERROR: Trying to get property 'sockets' of non-object {"userId":1,"exception":"[object] (ErrorException(code: 0): Trying to get property 'sockets' of non-object at C:\\xampp\\htdocs\\admin-lte\\app\\Http\\Controllers\\CaseLogController.php:14)
[stacktrace]
My response:
Consuming api here
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 900px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
lists: [],
}
},
created() {
const id = this.$route.params.id;
axios.get(`/case-log/${id}`).then (response => this.lists = response.data)
},
}
</script>
Related
I have a page where there is multiple cases and when i click on case it shows the detail against this case on same page.
I have attached the screen shot
as you can see two cases are showing 1) ublox and 2) test case when i click any of them you can see on top detail against this case is appeared.
But I do not want to display these detail on this page I wan to display these detail on separate page when i click any of these case. I am new to vuejs can anyone please help me on this?
Your help will be really appreciated.
My code of vue:
<template>
<div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="col-lg-6">
<div class="card">
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-hover">
<thead>
<tr>
<th>Case Name</th>
</tr>
</thead>
<tbody>
<tr v-for="kase in cases" :key="kase.id" v-on:click="clickList(kase)">
<td>{{kase.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-info">
<div class="card-header">
<h3 class="card-title">Add New Case</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal" #submit.prevent="onSubmit" #keydown="form.errors.clear()">
<div class="card-body" style="height: 239px;">
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" autofocus placeholder="Name" v-model="form.name">
<span class="invalid-feedback d-block" role="alert" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-info" :disabled="form.errors.any()">Add Group</button>
</div>
<!-- /.card-footer -->
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
</template>
<script>
export default {
data() {
return {
cases: [],
lists: [],
form: new Form({
'name': ''
})
}
},
created() {
axios.get('/new-case')
.then(({data}) => this.cases = data);
},
methods: {
clickList (Kase) {
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
onSubmit(){
this.form
.post('/new-case')
.then(kase => this.cases.push(kase));
}
}
}
</script>
and my web.php
Route::get('/case-log/{id}', 'CaseLogController#index');
My Controller:
class CaseLogController extends Controller
{
public function index($id)
{
$case = kase::with('sockets')->find($id);
return $case->sockets;
}
}
your help will be appreciated.
Thanks in advance
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
This is updated:
<template>
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
lists: [],
}
},
created() {
const id = this.$route.params.id
axios.get(`/case-log/${Kase.id}`).then(response => this.lists = response.data);
},
}
</script>
You will have to define your routes using Vue-router. The documentation shows you how to get started.
Then you need to extract the template of the details into a component, say DisplayDetailView.vue
So you will have:
DisplayDetailView.vue
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="card-title"></h3>
</div>
<div class="card-body table-responsive p-0" style="height: 300px; width: 100%">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>User Id</th>
<th>Case Id</th>
<th>Message Title</th>
<th>Process Type</th>
<th>Description</th>
<th>Data Load</th>
<th>Message Code</th>
<th>Log Type</th>
</tr>
</thead>
<tbody>
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.user_id}}</td>
<td>{{list.case_id}}</td>
<td>{{list.message_title}}</td>
<td>{{list.process_type}}</td>
<td>{{list.description}}</td>
<td>{{list.data_load}}</td>
<td>{{list.msg_code}}</td>
<td>{{list.log_type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.....
When you click on the detail, it will navigate you to the component where details are shown.
Clicking on Ublox for example, may have code attached to it as follows
ComponentWithCaseName.vue
<div class="col-lg-6">
<div class="card">
...
<tr v-for="kase in cases" :key="kase.id" v-on:click="handleCaseClick"> // add click handler
<td>{{kase.name}}</td>
</tr>
......
</div>
</div>
And you have a method in the component where the case name is clicked
methods: {
handleCaseClick() { // this pushes it to the component that has the display view details i.e DisplayDetailView.vue
this.$router.push(`/path-to-component-for-view-details/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}')
}
}
In the DisplayDetailView.vue component, you have to grab the unique identifier from the url, using the created/mounted hook, (in this case, I use the created lifecycle hook, but mounted will also work) that you will use to make the database call that will populate the template.
DisplayDetailView.vue
export default {
data() {
return {
cases: [],
lists: [],
}
},
created() {
const uniqueIdentifierToFetchTheDetailsFromTheDatabase this.$route.params.uniqueIdentifierToFetchTheDetailsFromTheDatabase // whatever name you put in the route `e.g if the route is `/path-to-component-for-view-details/:caseId`, you do this.$route.params.caseId
axios.get(`/case-log/${uniqueIdentifierToFetchTheDetailsFromTheDatabase}`).then(response => this.lists = response.data);
},
}
This is the general gist of things. You can figure the rest from here. This will provide you more details.
I need to hide head and column using jQuery. The below code doesn't work.
$('#MD116139889_ZIPCODE_InputField').find('.input-group-addon').click(function(){
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
Table Image
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
I took off the find() of the bind for a simple test case, but it seems to work fine.
$('#MD116139889_ZIPCODE_InputField').click(function() {
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="MD116139889_ZIPCODE_InputField">Click Me</button>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have data displaying in an html table. I need to sort only one column
https://jsfiddle.net/5a3j7ek1/
<iframe width="100%" height="300" src="//jsfiddle.net/5a3j7ek1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
how do i get the data from the structure number column and sort it?
Including tablesorter: http://tablesorter.com/docs/
HTML
<table id="mytable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td originalid="pivot__R1" class="p-dim-member" fidx="1" val="109">
<div class="wrapper">
<div class="p-head-content"><span>109</span>
</div>
</div>
</td>
<td>data3</td>
</tr>
<tr>
<td originalid="pivot__R4" class="p-dim-member" fidx="1" val="11" style="height: 24px;">
<div class="wrapper">
<div class="p-head-content"><span>11</span>
</div>
</div>
</td>
<td>data5</td>
</tr>
</tbody>
</table>
JS:
$("#mytable").tablesorter();
https://jsfiddle.net/5a3j7ek1/1/
I have a nested table column like:
Now I want to hide mark columns by table column index. How is it possible? Please provide concept not solution. I have confused how to start my task.
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">{{ customerOrder.orderNo }}</th>
<th style="width: 50%;">{{ customerOrder.date }}</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Try this:
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
Here is the 'concept' only to hide the column using index like you asked:
To hide the column by index, you could use CSS with :nth-child pseudo class. For example: td:nth-child(5). #5 would be which ever index you want to use. Please see this link for more details/explanation if you haven't used nth-child before: http://css-tricks.com/almanac/selectors/n/nth-child (I recommend looking at the example how to "select the third child element of the second element".
If you want to hide the column by index with a trigger event, I would use the javascript approach that Rudra has mentioned. For example, add a class to the html tag you wish to hide and blind it with an event to do the hiding, or alternatively you could bind it to an id.
Here you can use javascript to hide columns you want to hide.
But you need some event to hide and show columns you need.
Below i have added a class x to the table that contains your columns to be hidden.
<head>
<style>
.x
{
display:none;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">1</td>
<td style="width: 20%;">1</td>
<td style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">1</th>
<th style="width: 50%;">1</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Now if you want to toggle between hide and show you can do it by changing css through javascript(this part is optional if you want),but for that you require a event or you can do it document.ready method too.
for example
I suppose you have a button having id='slidingcolumns'.
$(document).ready(function(){
$('#slidingcolumns').click(function(){
$(".x").slideToggle();
});
});
I hope this might help you
good luck