I am using React JS to display a sortable and searchable HTML Table usually known as DataTable.
and I am getting the data of the table from JSON data.
but this error appears.
There is no error if the table is hard coded but when the datas for the table was from json by using the map function of JS there an error like this:
TypeError: Cannot read properties of undefined (reading 'mData')
Is there any way to display DataTable with the datas of the table was provided by JSON data?
Please help....
There could be couple of reasons why it is unable to read data. Firstly, you can check if you have given correct path of json file and whether it has the data which you are trying to display by passing the reference inside columns. Secondly, make sure table header's count defined in your html is matching with columns specified in your DataTable. Also, make sure you have added all dataTable dependencies. Below is a very simple example that will display 2 columns - userId & userName.
$(document).ready(function(){
var jsonData = [{"userID":"1","userName":"name1"},
{"userID":"2","userName":"name2"},{"userID":"3","userName":"name3"}];
$('#example').dataTable({
data: jsonData,
columns: [
{ data: 'userID' },
{ data: 'userName' }
]
});
});
Related
I try to insert data using id in my url like this.
absent
present
My route is:
Route::get('/present/{id}', 'UserController#present')->name('present');
Route::get('/absent/{id}', 'UserController#absent')->name('absent');
Route is working. but the page is loading, I try to insert data without loading. I know how to insert data using ajax HTML form way. but how to insert using id use ajax?
If you want to insert data without reloading you have to bind JavaScript functions to the HTML links you specified. This example is different but you can use the same approach to achieve your need.
I propose, that you change your anchor tags to buttons and add a class to them and save their routing endpoints in data attributes:
<button class="action_buttons" data-route="{{route('absent', $User->id)}}">absent</button>
<button class="action_buttons" data-route="{{route('present', $User->id)}}">present</a>
And, then use JQuery event handling to detect when they are clicked and then simply use Ajax to get the related route from the button's data attribute and send a GET request to that route:
$('.action_buttons').on('click', function(){
// Get the route data from the tag.
let route = $(this).data('route');
$.ajax({
url: route,
type: 'GET',
success: function(resp) {
console.log(resp);
}
});
});
This is the script i use for the drop down in the echo table
The echo table
Try passing your data object as text
JAVASCRIPT
$.ajax({
type: "POST",
url: "data.php",
data: JSON.stringify(data1) // use JSON.stringify();
});
Also a note is to make sure your html is echo'd or rendered out before you attempt to bind a javascript function to it. Other wise you will get an error indicating no such html element found.
I am using ui-select2 in angularjs for remote data access.
I am having a drop down, based on the value chosen in dropdown the URL present in the ajax call should change dynamically , so that I can get the data from that particular URL.
Is it possible to change the URL dynamically based on the value present in the dropdown?
I've resolved this problem using function in ajax property:
ajax: {
url: function () { return '/product/' +$scope.campaign.advertiser + '/tags/'; },
...
}
I've built a form with Symfony, based on a Doctrine entity. The form contains form collections. Let's say the outer form is used to create a task. Many sub-tasks can be added to this task (the form collections part).
The task-form contains a choice field "category". De sub-task forms contain choice field "subcategory". The values of the subcategory field depend on the value chosen for the category field. To achieve this, I want to update the form prototype through AJAX when a main category has been chosen.
The JS-part of this is probably not that hard, so I'm sure I'd manage that. But I've got no idea what to do on the server/Symfony side to achieve this. Any hints in the right direction would be appreciated.
You need to create a route that link to a new function(action) in the controller lets name it "ajaxGetSubCategoriesAction()"
implement it to get all the sub categories, then return them like this :
//get the category id from ajax request
$categoryID = $request->request->get('category_id');
//get all subcategories and return your result like this
return new Response(json_encode($result));
then in the twig that renders the category put a data field inside the form tag or div tag like
this data-path you get it inside the JS file to know the path of the function you created to get the subcategories.
$posturl = $formelement.data('path');
var categoryid = //get it here with from your input field.
$.ajax({
type: "POST",
url: $posturl,
async: false,
dataType: "json",
data: {
category_id: categoryid
}
}).done(function (response) {
inside response you will have all the subcategories returned from your ajaxGetSubCategories function
}
Let's say I'd like to load a dataTable dynamically, but instead of using normal ajax function within datatable, I'd like to load it through Angular, use ng-repeat to generate the tr elements and then apply DataTables. Would that be possible? In broad terms, how could I do that?
I've got the ajax/ng-repeat working already like this:
angular.module('myApp', ['ngResource', 'ui.bootstrap'])
.factory('ProjectsService', ['$resource', function($resource) {
return $resource('/customers');
}])
.controller('AdminCustomersCtrl', ['ProjectsService', '$scope', function(ProjectsService, $scope) {
$scope.projects = ProjectsService.query();
}]);
The reason I'd like to do this is that all elements (data in the table) would be binded, so whenever the user edit an entry in the table, the change would be acknowledged immediately (visually) and also saved to the REST server. Each entry in the table would correspond to a mongo db document. So if anyone has any ideas of how to achieve this differently, I'd love suggestions.