I just want to share how I was able to load the Data from AJAX Request into ShieldUI DataGrid,
I didn't see any related post which has direct and clear answer so I thought maybe someone can use this as a guide.
$(document).ready(function(){
$("#shieldui-grid1").shieldGrid({
dataSource: {
data: gridData
},
selection: {
type: "row",
multiple: true,
toggle: false
},
columns: [
{
field: "product_name", width: "30%", title: "Product Name"
},
{
field: "source_name", title: "Source Name", width: "30%"
}
]
});
});
var gridData = function() {
$.ajax({
async: false,
url: "/your-api-url",
dataType: 'json',
type: 'GET',
success: function(data){
console.log(data);
gridData = data;
}
});
return gridData;
}();
});
This will automatically pickup the data result from the Ajax request assigned into 'gridData' variable
I was able to pass the result into the gridData variable using this,
var gridData = function() {
$.ajax({
async: false,
url: "/your-api-url",
dataType: 'json',
type: 'GET',
success: function(data){
console.log(data);
gridData = data;
}
});
return gridData;
}();
Shield UI Grid demos have examples of this - namely, how to connect to a RESTful and similar web services.
Related
Now my download is ok. I think use a progress bar is better. I see this: https://docs.laravel-excel.com/3.1/imports/progress-bar.html
But it's for imports. And I want to use in blade, ajax. Can someone give me some suggestion?
<script type="text/javascript"><!--
$('#button-export-save').on('click', function () {
var dataString = $('#excel-form').serialize();
$.ajax
({
type: "POST",
url: "{{ route('lang.admin.member.members.export') }}",
data: dataString,
cache: false,
xhrFields:{
responseType: 'blob'
},
success: function(data)
{
var link = document.createElement('a');
link.href = window.URL.createObjectURL(data);
link.click();
},
fail: function(data) {
alert('Not downloaded');
}
});
});
//--></script>
I want to show multiple events with different colour for each. Here two ajax response have displayed in calendar. But all the events shows only green. The Second events also visible in green colour. How to show each events with different colours?
My code is as follows:
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: url1,
dataType: 'json',
success: function(response) {
var events = [];
$(response.data).each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'), // will be parsed
color: 'green'
});
});
callback(events);
}
});
$.ajax({
url: url2,
dataType: 'json',
success: function(response) {
var events = [];
$(response.data).each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'), // will be parsed
color: 'red'
});
});
callback(events);
}
});
}
});
Using a Kendo grid with 3 columns, I have an event that fires when the first column is changed that makes an ajax call and returns some data. I want to update the second column with the returned data but I'm not having any luck and I'm not even sure if this is the correct approach. I can change the second column with static data by adding a change event to my datasource of my grid, but that of course doesn't help. The only examples I can seem to find show changing another column with client side data, not data returned from the server. Here's what I have so far:
$("#manualStatsGrid").kendoGrid({
dataSource: this.GetManualStatisticsDataSource(),
sortable: true,
pageable: false,
filterable: true,
toolbar: ["create"],
editable: "inline",
messages: {
commands: {
create: "Add New Statistic"
}
},
edit: function (e) {
var _this = _manualStats;
var input = e.container.find(".k-input");
var value = input.val();
input.keyup(function(){
value = input.val();
});
$("[name='Statistic']", e.container).blur(function(){
var input = $(this);
$("#log").html(input.attr('name') + " blurred " + value);
//valid the GL account number
$.ajax({
type: "GET",
url: _this.ValidateGlUrl,
dataType: 'json',
data: { glNumber: value },
success: function (response) {
var newDescription = response.Data.description;
console.log(newDescription);
//change description column here?
},
error: function (response) {
console.log(response);
}
});
});
},
columns: [
{ field: "Statistic" },
{ field: "Description" },
{ field: "Instructions" },
{ command: ["edit", "destroy"], title: " ", width: "250px"}
]
});
}
this.GetManualStatisticsDataSource = function () {
var _this = _manualStats;
var dataSource = {
type: "json",
transport: {
read: {
type: "POST",
url: _this.GetManualStatisticsUrl,
dataType: "json"
},
update: {
type: "POST",
url: _this.UpdateManualStatisticsUrl,
dataType: "json"
},
create: {
type: "POST",
url: _this.CreateManualStatisticsUrl,
dataType: "json"
},
destroy: {
type: "POST",
url: _this.DeleteManualStatisticsUrl,
dataType: "json"
}
},
schema: {
model: {
id: "Statistic",
fields: {
Statistic: {
type: "string",
editable: true,
validation: { required: true, pattern: "[0-9]{5}.[0-9]{3}", validationmessage: "Please use the following format: #####.###" }
},
Description: { editable: false },
Instructions: { type: "string", editable: true }
}
}
}
Inside the edit event, you have e.model. The model has the method set() which can change any dataItem's property value:
edit: function (e) {
...
var editEvent = e; // Creates a local var with the edit's event 'e' variable to be available inside the 'blur' event
$("[name='Statistic']", e.container).blur(function() {
...
$.ajax({
...
success: function(e, response) { // 'e' inside this callback is the 'editEvent' variable
e.model.set("Description", response.Data.description); // e.model.set() will change any model's property you want
}.bind(null, editEvent) // Binds the 'editEvent' variable to the success param
});
});
Working demo
Made this snippet of top of my head. Tell me if there is something wrong with it.
I have following code in jQgrid and I am using jQuery ui autocomplete in one of the field. But the pop up of autocomplete displays somewhere else as shown in figure. From IE developer tools I noticed the results are attached to body tag, which is at the end of the page. I tried using appendTo, but that doesn't help.
{
name: 'nameAccount',
index: 'nameAccount',
width: 300,
editable: true, sortable: false, resizable: false,
shrinkToFit: true
,editoptions: {
dataInit: function (elem) {
var autocompleteSource = function(request, response,term) {
var param = request.term;
$.ajax({
url: myUrl,
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "GET",
success: function (myyydata) {
//alert('HI-Success');
//response( myyydata );
response($.map(myyydata, function (item) {
return {
label: item.AccountInfo,
value: item.AccountInfo
}
}));
} ,
error: function (res, status) {
alert('HI-error');
//alert(res.status+" : "+res.statusText+". Status: "+status);
}
});//END AJAX
};
$(elem).autocomplete({
source: autocompleteSource,
//appendTo: "#"+elem.id,
position: { collision: "flip" },
minLength: 2
});//END AUOTOCOMPLETE
}//END Dataint
}//END Dataint
},
minnu4515. i guess it is because of the css misalignment. i faced the similar problem and i manually set the z-index alignmnet. that solved my issue.
$('.ui-autocomplete').css('zIndex',1000);
I am trying to update high charts on page load and on select menu change with JQUERY AJAX call. There is data being returned in [[10,1228800000],[10,1228800000]] format.The chart is blank and does not graph any of the data.
Tried several solutions posted on here but none worked.
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'stats',
defaultSeriesType: 'spline'
},
title: {text:''},
xAxis: {
type: 'datetime'
},
yAxis: {},
series: []
};
var month = 'July';
$.ajax({
type: "POST",
data: "month="+month,
url: "update_visits_chart",
success: function (data) {
options.series.push(data);
chart = new Highcharts.Chart(options);
}
});
Any errors? thanks in advance.
EDIT:
MOST RECENT CODE STILL NOT WORKING:
var options = {
chart: {
renderTo: 'stats',
type: 'spline'
},
title: {
text: ''
},
xAxis: {
type:'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%b %e'
},
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Number of visits'
},
min: 0
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%b %e', this.x) +'<br />'+this.y+' visit(s)';
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Number of Visits',
data: []
}]
};
var month = 'July';
$.ajax({
type: "POST",
url: "update_visits_chart",
data: "month="+month,
success: function(data){
options.series[0].data = data;
chart = new Highcharts.Chart(options);
}
});
You have to use the setData methode of the series object as descriped in documentation. In your case it is options.series[0].setData(Data)
And I think you have to turn your Ajax result from string to a real object/array by using JSON.parse(data).
EDIT:
#Ricardo Lohmann: in the ajax-call he did not specify the dataType he expects in the response, so jQuery will guess the dataType. But it will not recognize a string starting with [ as JSON and I doubt his response will be served with correct mime type application/json. So specifying the correct mime type should also solve the problem. But I do not have an example of the complete ajax respons of the questioner. So I'm just guessing, too.
I'd recommend the following ajax call:
$.ajax({
type: "POST",
url: "update_visits_chart",
data: {month: month},
dataType: 'json',
success: function(data){
options.series[0].setData(data);
}
});
#Jugal Thakkar
$.getJSON is just a shortcut for the ajax-call above, but it is less flexible because you have less options.
You have to set directly data to series because data is already a multidimensional array.
The following code will fix it.
Change options.series.push(data); to options.series = data;