I am developing a web application with Angular as frond end and Laravel 5.2 as back end.
this is my laravel code.
Routes.php
Route::get('Aemployees',['uses'=>'AdminController#AngEmployeeList']);
AdminController.php
public function AngEmployeeList(){
return View::make('admin.angular.anguemployees');
}
View( anguemployees.blade.php)
#extends('admin.template')
#section('title', 'Angular Employees')
#section('content')
<div class="col-xs-12" ng-controller="Employees">
<section class="content-header">
<h1>Data Tables</h1>
<span>Add new</span>
</section>
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Updated At</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td ng-bind="employee.emp_name"></td>
<td ng-bind="employee.emp_mobile"></td>
<td ng-bind="employee.emp_email"></td>
<td ng-bind="employee.updated_at"></td>
<td>
<span><a class="editThis" ng-click="edit(employee.pk_emp_id)"></a></span>
<span><a class="dltThis" ng-click="deleteItem(employee.pk_emp_id)"></a></span>
</td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
#endsection
Angularscripts.js
var EmployeeApp = angular.module('EmployeeApp',['ui.router']);
EmployeeApp.config(function($stateProvider,$urlRouteProvider){
$stateProvider.state('employees',{templateUrl : '/Aemployees'});
});
EmployeeApp.controller('Employees',function($scope,$http){
$http.get(BASEURL+'/getemployees')
.success(function(response){
$scope.employees = response;
});
$scope.deleteItem = function (item_id){
if(confirm("Are you sure want to delete ?") == true){
$http.post(BASEURL+'/deletemployees',{pk_id:item_id})
.success(function(response){
$scope.employees = response;
});
}
}
});
The Output is not working perfectly and getting an error in console.
How can I fix this issue ?
Is the any error in my code ?
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 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>
I am trying to filter a JSON object (the object is named 'post' in my example) using the VueJs2 framework consuming a data object from a Wordpress REST API. I have nested arrays (meta data tags) associated with my posts that I want to filter/search through when the user types a search query in my input element:
JSFIDDLE link
HTML:
<div id="app" class="container" style="padding-top: 2em;">
<input v-model="searchText">
<table class="table table-striped" v-if="posts">
<thead>
<tr>
<th>Title</th>
<th>Product Type</th>
</tr>
</thead>
<tr v-for="post in itemsSearched">
<td>{{post.title.rendered}}</td>
<!-- this part is probably not correct -->
<td v-for="post._embedded['wp:term'][1] in itemsSearched"></td>
</tr>
</table>
</div>
JS:
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
searchText: '',
posts: []
},
computed : {
itemsSearched : function(){
var self = this;
if( this.searchText == ''){
return this.posts;
}
return this.posts.filter(function(post){
return post.title.rendered.indexOf(self.searchText) >= 0;
//what to put here to filter the tags ??
});
}
},
created: function(){
$.get('https://wordpress-dosstx.c9users.io/wp-json/wp/v2/products/' + '?_embed=true')
.done(function(data) {
vm.posts = data;
});
}
});
If you can provide some advice on how to proceed that would be great. Thank you.
I updated your fiddle. You need to loop through the item of the array not the entire searched array.
<div id="app" class="container" style="padding-top: 2em;">
<input v-model="searchText">
<table class="table table-striped" v-if="posts">
<thead>
<tr>
<th>Title</th>
<th>Product Type</th>
<th>Tags</th>
</tr>
</thead>
<tr v-for="post in itemsSearched">
<td>
<a :href="post.link" target="_blank">
<img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url"
style="width:75px;height:75px;"/>
</a>
</td>
<td>
<a :href="post.link" target="_blank" v-html="post.title.rendered"></a><br/>
<div v-html="post.content.rendered"></div>
</td>
<td v-for="item in post._embedded['wp:term']">
<div v-for="subItem in item">
<a :href="subItem.link">{{subItem.name}}</a>
</div>
</td>
</tr>
</table>
</div>
<div v-for="item in parentObject">
<div v-for="item2 in item.childObject1">
<div v-for="item3 in item2.chileObject2"></div>
</div>
</div>
i am creating a something like this
parent
-name:
--childObject1
--mySon
---childObject2
---myGrandChild
This question already has answers here:
How to make a jsonp request
(2 answers)
Closed 7 years ago.
I am trying to get data in my table by using jsonp. I really don't know what I am doing wrong. I think it has something to do with the contents of my url. Or that I am not getting the data correctly. I have tried to do callback= JSON_callback. Still does not work.
This is my url http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=JSON_CALLBACK
with contents:
callback([{"naam":"Hogeschool InHolland","docenten":null,"id":null},{"naam":"Hogeschool Utrecht","docenten":null,"id":null},{"naam":"Universiteit Utrecht","docenten":null,"id":null}])
app.js:
angular.module('OrganisatieApp', [
'OrganisatieApp.controllers',
'OrganisatieApp.services'
]);
services.js:
angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource,$http) {
var organisatieAPIservice = [];
organisatieAPIservice.getOrganisaties = function(){
return $http({
method: 'jsonp',
url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=callback'
});
}
return organisatieAPIservice;
});
my Html div:
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{$index + 1}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].provincie}}</td>
<td>{{organisatie.curriculum}}</td>
</tr>
</tbody>
</table>
<ng-view></ng-view>
</div>
</div>
</div>
<div class="col-md-6">
<div class="page-header">
<h1>Opleidingsprofiel</h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<ul class="nav nav-pills" role="tablist">
<li role="presentation">Aantal Organisaties<span class="badge">3</span></li>
</ul>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Organisatie naam</th>
<th>Organisatie plaats</th>
<th>Organisatie Curriculum</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="organisatie in organisatieList">
<td>{{organisatie.Organisatie.id}}</td>
<td>
<img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
{{organisatie.Organisatie.naam}} {{organisatie.Organisatie.docenten}}
</td>
<td>{{organisatie.Constructors[0].naam}}</td>
<td>{{organisatie.naam}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
controller.js:
angular.module('OrganisatieApp.controllers', []).
controller('organisatieController',function($scope, organisatieAPIservice) {
$scope.organisatieList = [];
organisatieAPIservice.getOrganisaties().success(function (response) {
//Assign response in Callback
$scope.organisatieList = response.docenten;
});
});
The name of the callback should be "JSON_CALLBACK"
https://docs.angularjs.org/api/ng/service/$http#jsonp
I am trying to use Ajax to post some data to a php script. I want the ajax request to be triggered when the delete button is clicked, and then delete the div where the click button was clicked.
Here is the code:
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
#foreach($employees as $employee)
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
And here is the Javascript:
<script type="javscript">
$('.btn-danger').on('click', function(e){
e.preventDefault();
var id = $(this).attr('id');
alert(id);
$.ajax({
url: '../../controllers/userManagementAjax.php',
type: 'post',
data: {'action': 'delete', 'email': id},
success: function(data, status) {
if(data == "ok") {
$('#tr'+'id').remove();
}
},
error: function(xhr, desc, err) {
console.log(xhr);
console.log("Details: " + desc + "\nError:" + err);
}
}); // end ajax call
});
</script>
I've tried a number of things and nothing works, the click event is not event logged to the the console.
Thank you all for your suggestions!
Please take a look here.
http://jsfiddle.net/py6PJ/
I removed your PHP loop, it seems to click just fine. Please confirm.
<div class="container content">
<div class="row">
<div class="col-md-12">
<div class="panel panel-blue margin-bottom-40">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Care Home</th>
<th>Last Login</th>
<th>Number of Log-ins</th>
<th>Last Data Upload</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr id="tr{{$employee->email}}">
<td class="fn">{{$employee->username}}</td>
<td class="ln">{{$employee->username}}</td>
<td class="email">{{$employee->email}}</td>
<td class="carehome_name">{{$employee->carehome_name}}</td>
<td class="last_login">{{$employee->last_login}}</td>
<td class="n_sessions">{{$employee->n_sessions}}</td>
<td class="last_upload">{{$employee->last_upload}}</td>
<td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Javascript is the same.