I'm trying to load data and popular a table bootstrap-table through an ajax call, but it does not work with the load method. Trying the data method works normally.
the method is not starting, it also does not display that no result was found
Table
<table id="table-anexo" class="table table-striped table-hover display" style="width:100%">
<thead>
<tr>
<th data-field="id"><span>DOCUMENTO</span></th>
<th data-field="tipo"><span>TIPO</span></th>
<th data-field="dt_anexo"><span>DATA ANEXO</span></th>
<!--<th data-field="acao" data-formatter="" data-events="" ><span>AÇÃO</span></th>-->
</tr>
</thead>
</table>
Function AJAX
function get_anexo_ajax(metodo, editando_id) {
var ticket_id = editando_id;
$.ajax({
type: 'POST',
data: {ticket_id : ticket_id},
url: 'ticket/get_anexo_all',
success: (function (data) {
console.log(data.anexo);
//$('#table-anexo').bootstrapTable({ data: data.anexo });
//$('#table-anexo').bootstrapTable('refresh')
$('#table-anexo').bootstrapTable('load', data.anexo);
}),
});
}
Data JSON
{"anexo":[{"id":"1","tipo":"jpg","dt_anexo":"2018-08-01 11:09:28","mensagem_id":"2","ticket_id":"1"}]}
I think data is the invalid format. And Set data-toggle="table" on a normal table. I tested, it run Ok. You can try:
<table id="table-anexo" data-toggle="table" class="table table-striped table-hover display" style="width:100%">
var obj = JSON.parse(data);
$('#table-anexo').bootstrapTable('load', obj.anexo);
Related
I have inserted a data in mongodb and used nodejs for writting API, need to retrieve those data in front-end using jquery. I have inserted 3 rows of data in mongodb.I have used below code to get data and it is working fine, but it is hardcoded. I want it to happen manually using jquery. Please help to solve this.
$.ajax({
dataType:"json",
url: "/purchaser/purchasersList",
type:"GET",
global:false,
async:false,
success: function(response){
console.log("response is:",response);
document.getElementById("userName").innerHTML = (response[0].userName);
document.getElementById("email_id").innerHTML=(response[0].email_id);
document.getElementById("address").innerHTML=(response[0].address);
document.getElementById("phoneNumber").innerHTML=(response[0].phoneNumber);
//2nd row data
document.getElementById("userName1").innerHTML = (response[1].userName);
document.getElementById("email_id1").innerHTML=(response[1].email_id);
document.getElementById("address1").innerHTML=(response[1].address);
document.getElementById("phoneNumber1").innerHTML=(response[1].phoneNumber);
//3rd row data
document.getElementById("userName2").innerHTML = (response[2].userName);
document.getElementById("email_id2").innerHTML = (response[2].email_id);
document.getElementById("address2").innerHTML = (response[2].address);
document.getElementById("phoneNumber2").innerHTML =(response[2].phoneNumber);
},
error: function (jqXHR, textStatus, errorThrown) { // error callback
console.log("Error Response jqXHR is:" + jqXHR);e
<table class = table2>
<tr>
<th style="text-align:center">SL.No</th>
<th style="text-align:center">Purchaser Name</th>
<th style="text-align:center">Email</th>
<th style="text-align:center">Address</th>
<th style="text-align:center">Phone No</th>
</tr>
<tr>
<td height="50">1</td>
<td height="50" id="userName"></td>
<td height="50" id="email_id"></td>
<td height="50" id="address"></td>
<td height="50" id="phoneNumber"></td>
<td height="50">Active</td>
</tr>
<tr>
..
</tr>
If you can change the id to class then I surges you try something like this:
$.each(response,function(i) {
var tr = $('.table2 tr').eq((i+1));
$(tr).find(".userName").text(response[i].userName)
$(tr).find(".email_id").text(response[i].email_id)
$(tr).find(".address").text(response[i].address)
$(tr).find(".phoneNumber").text(response[i].phoneNumber)
})
Note I can't test it since I dont have your response.
Full code
$.ajax({
dataType: "json",
url: "/purchaser/purchasersList",
type: "GET",
global: false,
async: false,
success: function(response) {
$.each(response,function(i) {
var tr = $('.table2 tr').eq((i+1));
$(tr).find(".userName").text(response[i].userName)
$(tr).find(".email_id").text(response[i].email_id)
$(tr).find(".address").text(response[i].address)
$(tr).find(".phoneNumber").text(response[i].phoneNumber)
})
},
error: function(jqXHR, textStatus, errorThrown) { // error callback
console.log("Error Response jqXHR is:" + jqXHR);
e
<table class=table2>
<tr>
<th style="text-align:center">SL.No</th>
<th style="text-align:center">Purchaser Name</th>
<th style="text-align:center">Email</th>
<th style="text-align:center">Address</th>
<th style="text-align:center">Phone No</th>
</tr>
<tr>
<td height="50">1</td>
<td height="50" class="userName"></td>
<td height="50" class="email_id"></td>
<td height="50" class="address"></td>
<td height="50" class="phoneNumber"></td>
<td height="50">Active</td>
</tr>
<tr>
..
</tr>
I'm trying to fetch the data from the database from a table 'Company' in the output it coming as a json format,i have to display it in a Data Table.
Controller
public function ex(Request $request){
$table = \DB::table('company')->select('name','type','address','city','email','description')->get();
//return view('mydata')->with('company',$table);
return response($table);
}
Route
Route::get('display','Test#ex');
Blade page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("table").toggle();
$.get("{{URL::to('display')}}",function (data) {
$.each(data,function (i,value) {
var tr =$("<tr/>");
tr.append($("<td/>",{
text : value.name /*Get first column*/
}))
})
})
});
});
</script>
</head>
<body>
<button>Click Me</button>
<table border="1px" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>City</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
</table>
</body>
</html>
the output coming as in following image but i want to display it in a Datatable
you can use yajjra laravel package to show data via ajax
here is the complete tutorial to show data via ajax in datatable
Datable Tutorial
Trying to delete from my API which is hosted on Heroku.
In Ruby file CROSS-ORIGIN is enable and I can get information from my API.
Although I have a problem when I want to make a delete request to the server.
I get an error 404 (Page not found), but when typing the url into the browser myself I can easily get this page.
cURL call works fine without any problems too.
script.js
$scope.DeleteData = function (index) {
$scope.id = $scope.companies[index].companyID;
var deleteUrl = 'https://*****.herokuapp.com/api/v1/companies/' + $scope.id;
$http.delete(deleteUrl,'DELETE').then(function(response){
console.log(response);
},function(errorResponse){
console.log(errorResponse);
});
};
Ruby.rb
delete '/companies/:companyID' do
tempCompanyID = params['companyID']
company = Company.where(companyID: tempCompanyID).first
company.destroy
end
Html:
<div ng-app="myApp" ng-controller="companyCtrl">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<th>Company ID</th>
<th>Company Name</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
<th>Owners</th>
<th></th>
</thead>
<tr ng-repeat="company in companies">
<td>{{company.companyID}}</td>
<td>{{company.companyName}}</td>
<td>{{company.address}}</td>
<td>{{company.city}}</td>
<td>{{company.country}}</td>
<td>{{company.owners}}</td>
<td><button class="btn" name="_method" ng-click="DeleteData($index)">Delete</button></td>
</tr>
</table>
</div>
Chrome response:
The response
I have different view (grid and list). I am using datatable as list view but the datatable function is not working. I am using ajax to refresh the content in div tag.
$('#grid').click(function(){
$('#searchBar').show();
$.ajax({
type:'GET',
url:'/refreshList',
dataType: 'HTML',
success:function(html){
$('#body').html(html);
},
error:function(){
}
});
});
In my another list view file
<table class="table display nowrap" cellspacing="0" width="100%" id="main-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#main-table').DataTable({
"responsive": true
});
});
</script>
I will refresh the content of div replace by this table, but it shows without datatable function. ps.written in 2 different file.
I have a ViewModel works with knockout framework and ajax. I can save new items to the database with ajax.Save but I have problem when I want to retrieve the saved data. Here are the codes.
Codes in ViewModel:
self.Categories = ko.observableArray([]);
self.Message = ko.observable("");
elf.GetCategories = function () {
$.ajax({
url: "/Admin/Categories",
cache: false,
type: "GET",
datatype: "json",
contenttype: "application/json;utf8"
}).done(function (data) {
self.Categories(ko.mapping.fromJS(data));
}).error(function (err) {
self.Message("Error! " + err.status);
});
}
console.log(JSON.stringify(data)); returns:
{"categories":[{"Id":1,"Name":"Learning","UrlSlug":"0-learning","Description":"learning"},
{"Id":2,"Name":"Topics","UrlSlug":"0-topics","Description":"posts"},
{"Id":3,"Name":"Shares","UrlSlug":"category-shares","Description":"shares"},
{"Id":4,"Name":"Projects","UrlSlug":"category-projects","Description":"project"}]}
Codes in controller is:
[HttpGet]
public ContentResult Categories()
{
var categories = _weblogServices.Categories();
return Content(JsonConvert.SerializeObject(new {categories}), "application/json;utf8");
}
and the problem is the self.Categories = ko.observableArray([]); is always empty without any data. I also tried these items too, but nothing changed:
ko.mapping.fromJS(data, self.Categories);
self.Categories(ko.mapping.fromJS(data));
self.Categories(ko.mapping.fromJSON(data));
ko.mapping.fromJS(data, {}, self.Categories);
I have a simple table in view :
<table id="tblCategory" class="table table-striped table-bordered
table-responsive table-condensed table-hover">
<thead>
<tr>
<th class="text-center">Name</th>
<th class="text-center">Url Slug</th>
<th class="text-center">Description</th>
</tr>
</thead>
<tbody data-bind="foreach: Categories">
<tr>
<td><span data-bind="text: Name"></span></td>
<td><span data-bind="text: UrlSlug"></span></td>
<td><span data-bind="text: Description"></span></td>
<td><button type="button" class="btn glyphicon glyphicon-pencil"
title="Edit" data-bind="click:$data.GetSelected"></button></td>
<td><button type="button" class="btn glyphicon glyphicon-trash"
title="Delete" data-bind="click:$data.DeleteSelectedCategory">/button></td>
</tr>
</tbody>
</table>
So, the question is how can I convert JSON data to observableArray([])?
UPdate: Chrome debugger says: data and Categories are not available.
You don't need to use mapping at all.
In your ajax call .done, you simply have to do this:
self.categories(data.categories);
As an observable array, categories expect an array as parameter. And according to the result of console.log(JSON.stringify(data)) being: {"categories":[{...}, {...}, ...], the array is on the categories property of the received data.
You don't need to use mapping because you simply need to show the objects inside the array, and you don't want to edit their properties. So they can be left as regular JavaScript objects, without observable properties.