We Keep Coding

Laravel error Unauthenticated when passing Datatable from view to controller

Hello i'm trying to pass Datatable from view to my controller. Here is my Datatable code in view :
<div class="table-responsive">
<table id="example1" class="table table-bordered table-hover display">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all" /></th>
<th>No</th>
<th>Id</th>
<th>Exemplar</th>
<th width="40%">Title</th>
</tr>
</thead>
<tbody id="bookTable"></tbody>
</table>
</div>
And here is my javascript code :
$('#printLabel').click(function(e) {
e.preventDefault();
$.post("{{ url('admin/printselectedlabel') }}",
//$('#searchForm').serialize())
table1.$('input,select,textarea').serialize()).fail(function(data) {
alert(data.responseJSON.error);
});
});
The codes above gave me error : {error: "Unauthenticated."}. Also, i'm not sure if "table1.$('input,select,textarea').serialize())" is the right why to pass datatable to controller.
Here is my route :
Route::group(['prefix' => 'admin'], function () {
Route::post('/printselectedlabel', 'Admin\PrintLabelController#printSelectedLabel');});
I havent add any code yet inside the printSelectedLabel() function inside the PrintLabelController
public function __construct()
{
$this->middleware('admin');
}public function printSelectedLabel(Request $request){
}

table is not binding in angularjs

Hello everyone I am trying to bind a table in angulajs. I am getting data from database in table and trying to fill that table.
Here I did
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Page = data;
console.log($scope.Page);
}).error(function () {
});
}
then i get the data in $scope.Page which is defined as $scope.Page = []; here i am attaching the console image that i am getting data in $scope.page
and here is my table
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
please help where I am missing I will be very thankful to you all.

In your view you are iterating over Pages, but I dont see it defined in your controller.
Change
$scope.Page = data;
to
$scope.Pages = [data];
Final Code
HTML:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
controller:
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = [data];
}).error(function () {
});
}
EDIT: if your data is an object make it an array, so ng-repeat can iterate over it

$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = data; //change page to pages in whole code,
//no need to change any thing in html page
console.log($scope.Pages);
}).error(function () {
});
}

$scope.Page in controller vs Pages in your HTML ng-repeat binding, you need to write $scope.Pages :)

Change $scope.Page = data to $scope.Pages = data.

Data Table hangs sporadically (No data available in table) when data sorted or loaded with Knockout binding

I am binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The table becomes unresponsive sporadically when sorted or loaded. There are no errors in the log.
It also shows 0 of 0 data as illustrated in the screenshot below:
I have seen similar errors/issues but could not get a solutions for them, E.g. This post:
Code:
function viewModel(){
var self = this;
self.Data = ko.observableArray([]);
$.getJSON('https://restcountries.eu/rest/v1/all', function(data){
self.Data(data);
});
}
ko.applyBindings(viewModel());
$(document).ready(function() {
$('#example').dataTable();
});
HTML:
<div class="table-responsive">
<table id="example" cellspacing="0"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Data">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: capital"></td>
<td data-bind="text: population"></td>
<td data-bind="text: region"></td>
</tr>
</tbody>
</table>
</div>
Here is a full working example (JSFiddle) utilizing a REST API so that the exact problem is accurately replicated:

I think the problem with your example may be with how you're dealing with your data when you get it back from the API call.
I've put together a quick example that achieves what I think you're trying to achieve and the sorting and searching work quickly for me.
When I get the JSON data back from the API, I use the Knockout arrayMap utility function to create an array of "Country" objects that have observable properties that I have mapped the JSON data to. I've bound the table to my observableArray of Country objects.
Initialising the data table in the same way you have works fine for me in this case.
The full working solution is here: http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview
script.js
var ViewModel = function(jsonData) {
var countries = ko.utils.arrayMap(jsonData, function(item) {
return new Country(item)
});
this.Countries = ko.observableArray(countries);
};
var Country = function(jsonItem) {
this.Name = ko.observable(jsonItem.name);
this.Capital = ko.observable(jsonItem.capital);
this.Population = ko.observable(jsonItem.population);
this.Region = ko.observable(jsonItem.region);
};
window.onload = function() {
$.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
ko.applyBindings(new ViewModel(data));
$("#example").dataTable();
});
}
index.html
<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Capital"></td>
<td data-bind="text: Population"></td>
<td data-bind="text: Region"></td>
</tr>
</tbody>
</table>

Tables are fairly slow to render within Knockout, and if your table is based on a computed, I could see how you could have some issues with redrawing time. But that's not happening here.
Apart from loading the data and binding it to the table rows, there's no data manipulation going on in your viewmodel. All the data manipulation is done by the dataTable plug-in, which you initialize with a single jQuery call. Properly, that should be done within a binding handler. You also need to know what is going on within the plug-in when it sorts, filters, or whatever it does, because you may need to mediate those changes back to your observableArray within your binding handler.
Bottom line: you need a binding handler for the dataTable. There may be one already written; I haven't Googled for it. Give that a try.

angularjs ng-repeat in a modal with ng-if

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.

If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">

Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.

AngularJS ngrepeat refresh with post

First of all i'm new to AngularJS and stackoverflow so i'm very open minded. My problem is that i have a table that has 3 items that use the ng-blur directive to call a save function
UI
<div ng-controller="measureController">
<div class="jumbotron">
<h3>RatingYear</h3>
<select ng-model="ratingYear" ng-change="getMeasures()">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
</div>
<!-- this is going to be the container for each measure-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Measures for {{ratingYear}}</div>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Active</th>
<th>Order</th>
</tr>
<tr ng-repeat="measure in measureList track by measure.MeasureId">
<td class="col-md-1">{{measure.Code}}</td>
<td class="col-md-5">{{measure.Name}}</td>
<td class="col-md-4"><textarea ng-model="measure.Action" ng-disabled="!measure.Active" ng-blur="save(measure)"></textarea></td>
<td class="col-md-1"><input type="checkbox" ng-checked="measure.Active" ng-model="measure.Active" ng-change="save(measure)" /></td>
<td class="col-md-1"><input class="form-control" ng-model="measure.Order" ng-disabled="!measure.Active" ng-blur="save(measure)" /> </td>
</tr>
</tbody>
</table>
</div>
</div>
Controller
function measureController($scope, $http) {
$scope.years = [2014,2015, 2016 ];
//get Measures Per Year
$scope.getMeasures = function () {
$http.get('/api/measure/' + $scope.ratingYear)
.success(function (data, status, headers, config) {
$scope.measureList = data;
$scope.$apply();
//$scope.loading = false;
})
.error(function () {
$scope.error = "An Error has occured while loading measures!";
$scope.loading = false;
});
};
//Edit Measure
$scope.save = function () {
$scope.loading = true;
var uMeasure = this.measure;
var active = uMeasure.Active ? 1 : 0;
$http.post('/api/measure/' + uMeasure.MeasureId + '/status/' + active, uMeasure)
.success(function (data, status, headers, config) {
$scope.measureList.push(data);
$scope.$digest();
})
.error(function (data,status, headers, config) {
alert("You failed misserably"+data);
});
};
}
I want to be able to refresh the measureList every time save has been called with the new object that has been inserted, that is the modify copy of the existing, right now is creating multiple copies of the same one in the database and i can only see it when i reload the page or change the value in ratingYear.
Thanks in advance