Related
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.
I'm trying to pass multiple arrays using JSON response from the controller method in laravel but I wanted to know how to fetch them in an ajax call. I'm a beginner so please correct if I'm wrong.
I'm already fetching events from calendar using ajax but now i want to fetch tasks as well.
Controller method:
$events = Event::all();
$tasks = Task::all();
return response()->json([
'events' => $events,
'tasks' => $tasks
]);
Ajax:
var events = [];
var tasks = []; //step 2
$.ajax({
url:'events',
type: "GET",
datatype: 'json',
cache: false,
success: function(data){
alert(data);
$.each($.parseJSON(data), function(index, val){
//alert(data);
events.push({
id: val.id,
title: val.name,
start: val.start_date,
end: val.end_date,
start_time: val.start_time,
end_time: val.end_time,
location:val.location,
description: val.description,
calendar_type: val.calendar_type,
timezone: val.timezone,
allDay: val.isFullDay
});
})
//$this.$calendarObj.fullCalendar('renderEvents', events);
generateCalendar(events);
},
error : function(error){
console.log(error);
}
});
var events = [];
var tasks = []; //step 2
$.ajax({
url:'events',
type: "GET",
cache: false,
success: function(data){
alert(data);
$.each(data.events, function(index, val){
//alert(data);
events.push({
id: val.id,
title: val.name,
start: val.start_date,
end: val.end_date,
start_time: val.start_time,
end_time: val.end_time,
location:val.location,
description: val.description,
calendar_type: val.calendar_type,
timezone: val.timezone,
allDay: val.isFullDay
});
})
//$this.$calendarObj.fullCalendar('renderEvents', events);
generateCalendar(events);
},
error : function(error){
console.log(error);
}
});
How can I load the chart with remote data using ajax request returning JSON encoded data?
Coding snippet:
var chart = c3.generate({
bindto:"#chartdivObservation",
data: {
columns: [
['loading', 30, 20, 50, 40, 60, 50],
]
}
});
$(document).on("change","#getObservation",function(){
var team_id=$(this).val();
var user_id=<?=$userId?>;
$.ajax({
url:"ajax/user/getDeltaStats.php",
type:"POST",
data:{
get:"getObservationReport",
teamId:team_id,
userId:user_id
},
success:function(response){
var data = $.trim(response)
setTimeout(function(){
chart.unload('loading');
console.log("loading chart...")
console.log(data)
chart.load({columns: data})
}, 4500)
console.log(chart)
}
});
});
The first column "loading" is the dummy data, so that the chart is rendered. Later, using timeout I'm loading it with new data (reference http://c3js.org/samples/data_load.html). But, the chart isn't getting rendered with the new data.
The response generated by the ajax request is:
[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation & Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]]
Here is an example which works fine for my application. Maybe that helps.
$(document).on("click", "#btnPDquant", function(event) {
$.ajax({
url: "PDQuantCalc",
type: "post",
data: $('#formPDquant').serialize(),
success: function(response){
var newdat = JSON.parse(response);
$("#divPDquant").text(newdat.PDquant[1]);
chart.x(newdat.year);
chart.load({
columns: [ newdat.PDquant ]
});
},
error: function (response) {
$("#divPDquant").text("error");}
});
event.preventDefault(); // Important! Prevents submitting the form.
});
I would like to pass in an array of IDs that will be used to select the events I want to display. The fullcalendar displays all of the events if I do not use the 'data' attribute with the ID array. When the data attribute is added I get the error message 'There was an error fetching events!'
This is the document ready function:
var groupSelectedArray = [];
groupSelectedArray[0] = '1';
groupSelectedArray[1] = '2';
$('#calendar').fullCalendar({
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
titleFormat: {month: 'MMMM'},
defaultView: 'month',
editable: false,
events: function (start, end, groupSelectedArray, callback) {
$.ajax({
type: "POST",
url: '#Url.Action("GetAllEvents", "Home")',
data: { selectedGroups: groupSelectedArray },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (doc) {
var events = [];
$(doc).each(function () {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
end: $(this).attr('end'),
id: $(this).attr('id'),
description: $(this).attr('description'),
color: $(this).attr('color'),
textColor: 'black'
});
});
callback(events);
} ,
error: function () {
alert("There was an error fetching events!")
}
});
}
This is the C# method:
public JsonResult GetAllEvents(string[] selectedGroups)
{
var eventList = GetEventsFromDatabase(selectedGroups);
var rows = eventList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
Can anyone see where I am going wrong?
Thanks.
What I did to get this to work was change the 'data' part of the ajax call:
Replace this:
{ selectedGroups: groupSelectedArray },
to this:
data: JSON.stringify(groupData),
I want to load all events on FullCalendar using AJAX when I clicked next-previous-button in agenda-views.
I guess, when will click on next-previous-button then I'll send current date('y-m-d') to url: 'fetch-events.php' then it will return event{ id: ,title: , start: , end: , allDay: } format data for rendering on calendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: false,
selectHelper: false,
editable: false,
events: // on-click next-previous button load events using Ajax
// post date using Ajax, then query to fetch all events and return data
});
JSON not working in my case
From the FullCalendar Online Documentation
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
This function will be given start and end parameters, which are
Moments denoting the range the calendar needs events for.
timezone is a string/boolean describing the calendar's current
timezone. It is the exact value of the timezone option.
It will also be given callback, a function that must be called when
the custom event function has generated its events. It is the event
function's responsibility to make sure callback is being called with
an array of Event Objects.
Here is an example showing how to use an event function to fetch
events from a hypothetical XML feed:
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: 'myxmlfeed.php',
dataType: 'xml',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
success: function(doc) {
var events = [];
$(doc).find('event').each(function() {
events.push({
title: $(this).attr('title'),
start: $(this).attr('start') // will be parsed
});
});
callback(events);
}
});
}
});
Source
I made some little changes:
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'schedule.php/load',
type: 'POST',
dataType: 'json',
data: {
start: start.format(),
end: end.format()
},
success: function(doc) {
var events = [];
if(!!doc.result){
$.map( doc.result, function( r ) {
events.push({
id: r.id,
title: r.title,
start: r.date_start,
end: r.date_end
});
});
}
callback(events);
}
});
}
});
Notes: start and end MUST be ISO 8601. Another change was the use of format instead of unix (this made easier for me to deal with the code-behind)
There is a built in option avaliable
var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/myfeed.php'
})
more details https://fullcalendar.io/docs/events-json-feed
This is perfect way to load data properly.
// if you want to empty events already in calendar.
$('#calendar').fullCalendar('destroy');
$.ajax({
url: 'ABC.com/Calendar/GetAllCalendar/',
type: 'POST',
async: false,
data: { Id: 1 },
success: function (data) {
obj = JSON.stringify(data);
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
});
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
//isRTL: true,
buttonHtml: {
prev: '<i class="ace-icon fa fa-chevron-left"></i>',
next: '<i class="ace-icon fa fa-chevron-right"></i>'
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
//obj that we get json result from ajax
events: JSON.parse(obj)
,
editable: true,
selectable: true
});
fullCalendar already uses ajax, so you don't have to type it. When I was starting to implement fullCalendar I used the solution of the most voted answer here:
https://stackoverflow.com/a/25404081/3927450
but then I could prove, that fullCalendar is in charge of making the ajax call the times the view changes without you having to do anything. I find this plugin very useful, although the documentation did not seem very clear to me.
So this code:
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'schedule.php/load',
type: 'POST',
dataType: 'json',
is exactly this:
events: schedule.php/load,
you only have to provide the url. Off course you have to deal with a proper JSON response from the server. Or if you need more params you can do it like this:
events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
var events= '';
$.ajax({
url: '/eventoscalendar',
dataType: 'json',
type: 'GET',
success: function(data) {
events= JSON.stringify(data);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
displayEventTime: true,
selectable: true,
droppable: false,
events: JSON.parse(events)
});
}
});
y en /eventoscalendar
public function eventoscalendar()
{
$events[]= [
"title" =>'Meeting',
"start"=> date('Y-m-d'),
"allDay"=> false,
"url"=> 'http://google.com/'
];
return JsonResponse::create($events, 200, array('Content-Type'=>'application/json; charset=utf-8' ));
}