We Keep Coding

Vue.js $.ajax() dynamic table when document ready - javascript

I'm trying to find a solution with for a table that is populated with $.ajax(), but i can't figure out how i can do this with Vue.js. How can I do that? Do i need a Vue component for that?
HTML:
<div class="row">
<div class="col-md-12 overflow-table">
<table class="table" id="table">
<thead class="head-color thead-inverse">
<tr>
<th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
<th>CLIENT-ID</th>
<th>URL</th>
<th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
</tr>
</thead>
<tbody id='table-redirect'>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
</tbody>
</table>
</div>
VUE.JS SCRIPT:
//VUE.JS REDIRECT PAGE
//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var app = new Vue({
el: '#redirect',
delimiters:['{', '}'],
data: {
agr1:[]
},
methods: {
//FUNCTION TO DISPLAY TABLE ON PAGE (RE)LOAD
getAll: function() {
console.log('teste');
$.ajax({
url: url + "/getAll",
type: "POST",
dataType: "json",
success:function(response){
console.log(response);//
this.agr1=response;
console.log(this.agr1);
console.log('success!');
},
error:function(){
console.log('error');
}//end error function
});//end $.ajax() request
},//end getAll function
}//end methods
})//end vue.js instance

Use the <tr> like a list. Add a v-for="agr in agr1" then you can iterate over the properties you want. when agr1 gets updated it'll render a new list of rows. You can also use v-bind:key="agr.property" to make it so that Vue efficiently renders the elements that get reused.
<tbody id='table-redirect'>
<tr
v-for="agr in agr1"
v-bind:key="agr.id"
class='lightgrey'
>
<td>{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td>{{ agr.url }}</td>
<td>{{ agr.actions }}</td>
</tr>
</tbody>

Related

I have the following code, it's a q-markup-table to get products from a search query. When the table gets filled with products from the query I added a button to select one row, the selected row will send the row data to an array and send that array to another table called "selected products", but how can I acces to the v-for data (i.e: producto.nombre) to send it to the new array?
<q-markup-table flat bordered separator="cell">
<thead class="bg-blue-grey-1">
<tr>
<th class="text-left">Nombre</th>
<th class="text-right">Descripcion</th>
<th class="text-right">Precio</th>
<th></th>
</tr>
</thead>
<tbody v-for="producto in productos" :key="producto.producto_id">
<tr>
<td class="text-left">{{ producto.nombre }}</td>
<td class="text-right">{{ producto.descripcion }}</td>
<td class="text-right">{{ "$" + producto.precio }}</td>
<td class="text-right">
<q-btn
flat
class="text-primary"
label="Seleccionar"
#click="agregarProducto"
></q-btn>
</td>
</tr>
</tbody>
</q-markup-table>

Pass the product to agregarProducto, like this...
#click="agregarProducto(producto)"
Add the complete object to the selection...
methods: {
agregarProducto(producto) {
this.selectedProducts.push(producto);
// see?
console.log('first price is', this.selectedProducts[0].precio);
}

I am populating data to a table and even if there are more than 10+ rows, it still shows
No data available in the table
I tried different solutions offered in the stack but none worked.
https://datatables.net/forums/discussion/38174/no-data-available-in-table-still-appears-after-rows-are-loaded-data-disappears-on-column-sorted
Data table is showing no data available in table using Angular
My code is available below, any help would be appreciated.
this.detailsService.getJobDetails(this.jobId).subscribe(data => {
this.assetsList = data;
if (this.jobDetails.status === "Queued") {
this.jobRunning = true;
this.jobExpired = false;
} else {
this.jobRunning = false;
this.jobExpired = true;
}
this.startTime = this.timeStamptoTime(this.jobDetails.startTime);
this.endTime = this.timeStamptoTime(this.jobDetails.endTime);
});
<table id="user-table" datatable [dtOptions]="dtOptions" class="row-border hover">
<thead>
<tr>
<th>Asset Id</th>
<th>Title</th>
<th>Status</th>
<th>Updated</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of assetsList">
<td class="ellipsis" title="item.id">{{ item.id }}</td>
<td class="ellipsis-name">{{ item.title }}</td>
<td [ngStyle]="{ color: colorStatus }">
{{ item.status }}
</td>
<td>{{ timeStamptoDateTime(item.startTime) }}</td>
<td>Re-Injest</td>
</tr>
</tbody>
</table>
I used ChangeDetectorRef in error of service but its also not working.
[{"id":"20d2063c-58e3-4391-9971-a7c9bfd6cc66","guid":"2ABs0qlpwoZj","title":"Georgia","type":"MOVIE","description":null,"startTime":1557906022212,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"4e409f42-177c-4b0e-a6d7-d3459d2b1a60","guid":"r9wjARFp5ybo","title":"Dead Man Walking","type":"MOVIE","description":null,"startTime":1557906028718,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"ca279d00-3a07-48ae-8ff3-efd524060059","guid":"zIVqvJQ80lmE","title":"Taxi Driver","type":"MOVIE","description":null,"startTime":1557906031223,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"63aca7dc-17ba-4f4f-a75a-e6667b3e03dc","guid":"OYv845bmL0yA","title":"Unforgettable","type":"MOVIE","description":null,"startTime":1557906034716,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"5717d61c-e8dd-4e30-b02e-42c73aa56ff7","guid":"QHbHU1LRNjTQ","title":"GoldenEye","type":"MOVIE","description":null,"startTime":1557906043909,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"555de673-88de-4911-8418-600e39253f08","guid":"A4no5EdT4i69","title":"It Takes Two","type":"MOVIE","description":null,"startTime":1557906065093,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"b17e412e-5438-450d-8a2d-2f3414c103d5","guid":"hQ1j4MYyyFZA","title":"Sabrina","type":"MOVIE","description":null,"startTime":1557906067911,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"4ec72565-72eb-4348-a985-b457ae5318ad","guid":"5glGh59h45IJ","title":"The American President","type":"MOVIE","description":null,"startTime":1557906070579,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"c611ed9e-2c27-4795-8317-639037753090","guid":"MZgULmywtVQR","title":"Kids of the Round Table","type":"MOVIE","description":null,"startTime":1557906073218,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"a36ef9f8-3154-470e-ac3e-5de68692e026","guid":"itGULjm1tWf9","title":"Across the Sea of Time","type":"MOVIE","description":null,"startTime":1557906076013,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"fd444ae6-722d-4959-becf-34417bd0f282","guid":"Ii5YffceXL2n","title":"Don't Be a Menace to South Central While Drinking Your Juice in the Hood","type":"MOVIE","description":null,"startTime":1557906078785,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"6074d7c1-a420-45dc-8418-9b3ea20e5bee","guid":"ruPJj6svK7YK","title":"White Squall","type":"MOVIE","description":null,"startTime":1557906082274,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null}]

Try this:
Add this.dtTrigger.next() after populating data
dtTrigger: any = new Subject();
this.detailsService.getJobDetails(this.jobId).subscribe(data => {
this.assetsList = data;
this.dtTrigger.next();
...
});

i have this table that outputs a set of records in my view file here is what it looks like
what im trying to do is that when the user clicked the edit button on a specific row, it would get the data from each row, put it in a <p>Data here</p> then display it on the same page
what i have done so far is this, i made an onlick function
here is the code for the table in my view
<table class="table table-striped table-hover" id="detailTable">
<thead>
<tr>
<th>Record ID</th>
<th>School Year</th>
<th>School Quarter</th>
<th>Student Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach ($srs as $key => $vu)
<tr>
<td>{{ $vu->StudentRecordID }}</td>
<td>{{ $vu->SchoolYear }}</td>
<td>{{ $vu->SchoolQuarter}}</td>
<td>{{ $vu->full_name}}</td>
<td><button class="btn" id="gid" onclick="tgPanel();" >Edit</button></td>
</tr>
#endforeach
</tbody>
</table>
and here is the code in my javascript
function tgPanel()
{
document.getElementById("rid").innerHTML = document.getElementById("detailTable").rows[0].cells[1].innerHTML ;
document.getElementById("sy").innerHTML = document.getElementById("detailTable").rows[0].cells[2].innerHTML ;
..and so on..
}
well as of now the only thing im getting is the header i dont know how to indicate in the row[0]on what row o clicked the button any ideas?

Your onclick function needs a parameter.
onclick="tgPanel(this)"
Then you can work with the button and get the information.
function tgPanel(button) {
var tr = button.parentElement.parentElement;
}

I'm using a Angular.js on the front end to populate a table. I want to use ng-switch to display only data that has specific data in one column, for example only show ‘week 1’ data from a list of a NFL schedule, where one column in the data is Weeks.
So right now this code doesn't show anything in the table. If anyone could help explain this it would be greatly appreciated. Maybe I should be using ng-if ? Maybe I should have a button to press to show week 1, week 2 etc.. What's the best solution for this type of situation?
Here's the controller..
// #########################
// Predictions Controller
// #########################
BLV_app.controller('PredictionsController', function($scope, PredictionsFactory, $routeParams) {
PredictionsFactory.getPredictions(function(data) {
$scope.predictions = data;
});
});
Here's the factory..
// ---------------------------
// Prediction Factory
// ---------------------------
BLV_app.factory('PredictionsFactory', function($http) {
var factory = {};
var predictions = [];
factory.getPredictions = function(callback) {
$http.get('/predictions').success(function(output) {
predictions = output;
console.log("prediction factory", predictions);
callback(output);
});
};
return factory;
});
Here's the html..
<table class="table-striped" id="table-style">
<thead id="table-header">
<tr>
<th class="text-center">HomeTeam</th>
<th class="text-center">AwayTeam</th>
<th class="text-center">Prediction</th>
<th class="text-center">Result</th>
</tr>
</thead>
<tbody ng-repeat="predict in predictions" >
<div ng-model="predict.Week"></div>
<tr ng-switch="predict.Week">
<div ng-switch-when="1">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.HomeTeam }}</td>
<td ng-if="$even">{{ predict.HomeTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.AwayTeam }}</td>
<td ng-if="$even">{{ predict.AwayTeam }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Prediction }}</td>
<td ng-if="$even">{{ predict.Prediction }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ predict.Result }}</td>
<td ng-if="$even">{{ predict.Result }}</td>
</div>
</tr>
</tbody>
</table>

I believe there is something wrong with ng-repeat and ng-switch when binding to elements like tbody and td. Replace them with div and li makes it working properly: JSFiddle.
<div ng-repeat="predict in predictions">
<div ng-model="predict.id"></div>
<div ng-switch="predict.id">
<div ng-switch-when="1">
<li ng-if="$odd" style="background-color:#f1f1f1">{{ predict.name }}</li>
......
Changing from <div ng-repeat="predict in predictions"> to <tbody ng-repeat="predict in predictions"> makes it not working: JSFiddle.
In ng-repeat docs and ng-switch docs, it says:
Usage
as attribute:
<ANY
ng-repeat="">
...
</ANY>
But obviously they cannot be used on ANY elements.

I am newbie to ajax jquery and trying to understand the code and trying to implement it. I would let you know what exactly i want to do and what i am doing.
I have a search box where i input the "sku" and i get the tables and the information of that particular sku.
I have this in my routes.php
Route::get('bestsellers', array('as'=>'bestsellers', 'uses' =>'SalesFlatOrderItemsController#index'));
In my controllers i have
class SalesFlatOrderItemsController extends \BaseController {
$sku_query = Input::get('sku');
if($sku_query){
$orders = SalesFlatOrder::join('sales_flat_order_item as i','sales_flat_order.entity_id','=','i.order_id')
->select((array(DB::Raw('DATE(i.created_at) as days'), DB::Raw('sum(i.qty_ordered) AS qty_ordered'), DB::Raw('sum(i.row_total) AS row_total'),'i.item_id', 'i.name','i.sku')))
->where('i.sku','=',$sku_query)
->groupBy('i.sku')
->orderBy('qty_ordered','Desc')
->paginate(10);
}
return View::make('sales_flat_order_items.bestsellers')->with('orders', $orders);
}
And In bestsellers.blade.php , i have
<input type="text" id="sku" placeholder="Search the sku..." name="sku">
<input type="hidden" id="search_sku" name="search_sku" value="">
<button type="button" id="searchSubmit" class="btn btn-info">Search</button><div class="spin-area" id="spin-area">
<thead>
<tr class="odd gradeX">
<th>Sku</th>
<th>Product Name</th>
<th>Items Ordered</th>
<th>Total</th>
</thead>
#foreach ($orders as $item )
<tr class="odd gradeX">
<td>{{ $item->sku }}</td>
<td>{{ $item->name }}</td>
<td>{{ round( $item->qty_ordered,2) }}</td>
<td>{{ round( $item->row_total,2) }}</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
</div>
This is for the input sku should be entered and ajax should help to get the information of sku on the same page. So ajax is as below
<script>
$(document).ready(function(){
$('#searchSubmit').on('click',function(){
var data ="sku="+$('#sku').val();
$.ajax({
type:"GET",
data:data,
url:"/bestsellers",
dataType:"JSON",
success:function(data){
alert('success');
}
})
});
});
</script>
Can somebody let me know what is going wrong with my code, Before this i have used traditional way of post and get request, it works, but not ajax call.
Please help.
Thanks.

try this
$(document).on('click','#searchSubmit',function(){
var data ="sku="+$('#sku').val();
$.ajax({
type:"GET",
data:data,
url:"{{URL::to('/bestsellers')}}",
dataType:"JSON",
success:function(data){
alert('success');
// data variable will have the data returned by the server. use it to show the response
}
})
});