I'm building a datatable using ajax data which is provides customer data after authentication. Is there a way to pickup the username during authentication and display it on the page to clearly indicate that the table contains the customer's personalised data?
Can I have the username stored in the ajax data file as the "dataSrc".
{
"username": [
[
"item1",
"item2",
"item3"
]
]
}
Then it could be picked up as a variable and then displayed on the page.
var oTable = $('#example').DataTable({
"ajax": {
"url": "data/customerdata.txt",
"type": "POST",
"dataSrc": function(...
},
Thank you in advance for your help!
Something like this should work:
"dataSrc": function (json){
console.log(json.username); // Should output your array e.g. ["item1", "item2","item3"]
$.each(json.username, function(k, v){
console.log(k, v) // Should output each element of your array e.g 0 and item1 then 1 and item2 and then finally 2 and item3
// You can display what you want on the page from this data.
});
return json.data; // returns the data to the table so it can be drawn.
}
Hope that that helps.
Related
I'm running the ajax datatable in a JavaScript function that is called from the onblur of input for parameters I send two pieces of information that go into the url ajax and depending on these parameters, different data will be returned.
function abrirModal(idLista,value)
{
var lastIdx = null;
var table = window.parent.$("#tlistaselect").DataTable( {
"order": [[ 1, "asc" ]],
"aProcessing": true,
"aServerSide": true,
"paging": false,
"searching": false,
"retrieve": true,
"stateSave":true,
"ajax": ip+"/datosListaSelect?idLista="+idLista+"&condicion="+value,
...................
}
When I run for the first time Ajax, brings the data you need depending on the values of the parameters but when I try to run again not run the ajax, I just redisplay the data had already consulted earlier.
How I can do to make the ajax to run again when I call the function again with the onblur?
You need to add one more tag in DataTable section:
"destroy": true
I think it will work!
I'm working on a project that is using Vue.js and Vue Router as the frontend javascript framework that will need to use a select box of users many places throughout the app. I would like to use select2 for the select box. To try to make my code the cleanest I can, I've implemented a custom filter to format the data the way select2 will accept it, and then I've implemented a custom directive similar to the one found on the Vue.js website.
When the app starts up, it queries the api for the list of users and then stores the list for later use. I can then reference the users list throughout the rest of the application and from any route without querying the backend again. I can successfully retrieve the list of users, pass it through the user list filter to format it the way that select2 wants, and then create a select2 with the list of users set as the options.
But this works only if the route that has the select2 is not the first page to load with the app. For example, if I got to the Home page (without any select2 list of users) and then go to the Users page (with a select2), it works great. But if I go directly to the Users page, the select2 will not have any options. I imagine this is because as Vue is loading up, it sends a GET request back to the server for the list of users and before it gets a response back, it will continues with its async execution and creates the select2 without any options, but then once the list of users comes back from the server, Vue doesn't know how to update the select2 with the list of options.
Here is my question: How can I retrieve the options from an AJAX call (which should be made only once for the entire app, no matter how many times a user select box is shown) and then load them into the select2 even if the one goes directly to the page with the select2 on it?
Thank you in advance! If you notice anything else I should be doing, please tell me as I would like this code to use best practices.
Here is what I have so far:
Simplified app.js
var App = Vue.extend({
ready: function() {
this.fetchUsers();
},
data: function() {
return {
globals: {
users: {
data: []
},
}
};
},
methods: {
fetchUsers: function() {
this.$http.get('./api/v1/users/list', function(data, status, response) {
this.globals.users = data;
});
},
}
});
Sample response from API
{
"data": [
{
"id": 1,
"first_name": "John",
"last_name": "Smith",
"active": 1
},
{
"id": 2,
"first_name": "Emily",
"last_name": "Johnson",
"active": 1
}
]
}
User List Filter
Vue.filter('userList', function (users) {
if (users.length == 0) {
return [];
}
var userList = [
{
text : "Active Users",
children : [
// { id : 0, text : "Item One" }, // example
]
},
{
text : "Inactive Users",
children : []
}
];
$.each( users, function( key, user ) {
var option = { id : user.id, text : user.first_name + ' ' + user.last_name };
if (user.active == 1) {
userList[0].children.push(option);
}
else {
userList[1].children.push(option);
}
});
return userList;
});
Custom Select2 Directive (Similar to this)
Vue.directive('select', {
twoWay: true,
bind: function () {
},
update: function (value) {
var optionsData
// retrive the value of the options attribute
var optionsExpression = this.el.getAttribute('options')
if (optionsExpression) {
// if the value is present, evaluate the dynamic data
// using vm.$eval here so that it supports filters too
optionsData = this.vm.$eval(optionsExpression)
}
var self = this
var select2 = $(this.el)
.select2({
data: optionsData
})
.on('change', function () {
// sync the data to the vm on change.
// `self` is the directive instance
// `this` points to the <select> element
self.set(select2.val());
console.log('emitting "select2-change"');
self.vm.$emit('select2-change');
})
// sync vm data change to select2
$(this.el).val(value).trigger('change')
},
unbind: function () {
// don't forget to teardown listeners and stuff.
$(this.el).off().select2('destroy')
}
})
Sample Implementation of Select2 From Template
<select
multiple="multiple"
style="width: 100%"
v-select="criteria.user_ids"
options="globals.users.data | userList"
>
</select>
I may have found something that works alright, although I'm not sure it's the best way to go about it. Here is my updated code:
Implementation of Select2 From Template
<select
multiple="multiple"
style="width: 100%"
v-select="criteria.reporting_type_ids"
options="globals.types.data | typeList 'reporttoauthorities'"
class="select2-users"
>
</select>
Excerpt from app.js
fetchUsers: function() {
this.$http.get('./api/v1/users/list', function(data, status, response) {
this.globals.users = data;
this.$nextTick(function () {
var optionsData = this.$eval('globals.users.data | userList');
console.log('optionsData', optionsData);
$('.select2-users').select2({
data: optionsData
});
});
});
},
This way works for me, but it still kinda feels hackish. If anybody has any other advice on how to do this, I would greatly appreciate it!
Thanks but I'm working on company legacy project, due to low version of select2, I encountered this issue. And I am not sure about the v-select syntax is from vue standard or not(maybe from the vue-select libaray?). So here's my implementation based on yours. Using input tag instead of select tag, and v-model for v-select. It works like a charm, thanks again #bakerstreetsystems
<input type="text"
multiple="multiple"
style="width: 300px"
v-model="supplier_id"
options="suppliers"
id="select2-suppliers"
>
</input>
<script>
$('#app').ready(function() {
var app = new Vue({
el: "#app",
data: {
supplier_id: '<%= #supplier_id %>', // We are using server rendering(ruby on rails)
suppliers: [],
},
ready: function() {
this.fetchSuppliers();
},
methods: {
fetchSuppliers: function() {
var self = this;
$.ajax({
url: '/admin_sales/suppliers',
method: 'GET',
success: function(res) {
self.suppliers = res.data;
self.$nextTick(function () {
var optionsData = self.suppliers;
$('#select2-suppliers').select2({
placeholder: "Select a supplier",
allowClear: true,
data: optionsData,
});
});
}
});
},
},
});
})
</script>
I'm trying to pre-populate a form made with angularJS with previously inserted data using JSON
Everything is working fine except for the select option items that are not populated.
A JSON example I'm using is:
{
"date": "2014-09-14",
"enumerator": "a",
"monthreport": {
"value": "March"
},
"weekreport": {
"value": "2nd week"
},
"Maize": 23,
"Wheat": 41,
"Sorghum": 71,
"q14": "Yes"
}
monthreport and weekreport are select option and they are not filled in when the form is loaded.
q14 is a radiobutton, and it works fine as all the other input text field, both text and numeric.
The JSON is the one produced exactly by angularJS, when I fill in the data in the form and then save it.
the select element is specified in this way in the HTML:
<select ng-model="currForm.weekreport" ng-options="o.value for o in options16" name="r_weekreport" required ></select>
and the options are set in the controller:
...
$scope.options16= [{value:"1st week"},{value:"2nd week"},{value:"3rd week"},{value:"4th week"},{value:"5th week"}];
...
To load JSON I use the usual function inside the app.controller:
...
$http({
method: 'GET',
url: 'http://samplesite.com/formJSON.txt'
}).success(function(data, status) {
console.log('works!!! ' + data);
$scope.currForm = data; }).error(function(data, status) {
// Some error occurred
console.log(status);
})
...
it seems everything right... where I'm wrong??
You can try:
<select ng-model="currForm.weekreport.value" ng-options="o.value as o.value for o in options16" name="r_weekreport" required ></select>
This happens because angular compares objects in your example and they are not equal. You need to compare primitives.
I am working with data table plugin. Initially what I tried is to update the data table plugin from a flat text file. The text file would look like below.
{
"data":[
{
"reference":"#VIP-123",
"application":"Development Aspects",
"applicationType":"Current Application"
},
{
"reference":"#VIP-123",
"application":"Development Aspects",
"applicationType":"Current Application"
}
]
}
I have a HTML file inside this I am writing JavaScript like below.
$(document).ready(function() {
var table=$('#app-table').DataTable( {
"bProcessing": true,
"bPaginate":true,
"bServerSide": false,
"sAjaxSource": "./data/arrays.txt",
"deferRender": true,
"columns": [
{ "data": "reference" },
{ "data": "application" },
{ "data": "applicationType" },
],
"order": [[ 3, "desc" ]],
"ordering": true,
"bFilter": true
} );
The data table is rendering fine until am not having more than 20,000 rows in the table. As the number of rows will increase in the table then data table took more time to load.
What I notices by going through with several site is that we can reduce the load time by using server side processing and for that I need to go with a server which is not possible in my case because I am rendering data from a flat text file. Then I thought to look for static data storage.
So coming to the problem is using indexedDB can we resolve the performance issue and if answer is yes than can anyone let me know how?
I am able to work with indexedDB but unable to integrate with jQuery data table. I mean what I need to make change in the JavaScript. If we can make server side processing with indexedDB then what will be the script?
first read your local file in the following manner:
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
}
}
}
Then, use JQuery to parse "allText" into JSON.
Refer this link for parsing into JSON.
Now, create database using "indexedDB API" as mentioned below:
var request = indexedDB.open("<mention_your_db_name_here");
request.onupgradeneeded = function() {
// The database did not previously exist, so create object stores and indexes.
var db = request.result;
var store = db.createObjectStore("books", {keyPath: "reference"});
var titleIndex = store.createIndex("by_reference", "reference", {unique: true});
// Populate with initial data.
store.put({reference: "#VIP-123", application: "Development Aspects", applicationType: "Current Application"});
};
request.onsuccess = function() {
db = request.result;
};
for more details on "indexedDB API", please refer this link
I have a struts 2 action class with a method which returns json data.
I have 8 tabs on my jsp. When a user clicks on a tab, I'd like to make an ajax call to this method. I would like the returned json data to be parsed and decorated with html that can be rendered in this tab.
I'm using jquery tabs to make tabs.
How can I capture the returned json data ? Can I subscribe to some event that jquery publishes ?
How can I process the returned json data ? For e.g.; json data:
{ City : {name="New York", alias="NY", imgPath="filePath/img1.jgp"} }
I would like to extract the name and bold it.
Use the imgPath to define img tag, etc
$(document).ready(function () {
var data = { "City": [{ "name": "New York1", "alias": "NY1", "imgPath": "filePath/img1.jgp" }, { "name": "New York2", "alias": "NY2", "imgPath": "filePath/img2.jgp" }, { "name": "New York3", "alias": "NY3", "imgPath": "filePath/img3.jgp" }, { "name": "New York4", "alias": "NY4", "imgPath": "filePath/img4.jgp"}] };
if (data.City.length > 0) {
$('body').prepend('<div id="tabs1"><ul></ul></div>');
$.each(data.City, function (i, entity) {
$('#tabs1 ul').append($('<li>' + entity.name + '</li>'));
$('#tabs1').append('<div id="tabs1-' + (i + 1) + '"><p>Image Path:' + entity.imgPath + '</p></div>');
});
$("#tabs1").tabs();
}
});
for live demo see this link: http://jsfiddle.net/nanoquantumtech/ffbx5/
You can capture the returned Json data by passing the data argument to the ajax calls success callback method which will be executed on success. http://api.jquery.com/jQuery.ajax/
You can use jQuery parse.json method and pass the json string to it. http://api.jquery.com/jQuery.parseJSON/
One more thing that your example json string is not looks like valid one. You can check your json is valid or not from this link http://jsonlint.com/ by simply pasting your json data or by pasting the url.