I'm trying to change the minTime in fullcalendar according to the database schedule through an ajax request on the viewRender, but it goes into a loop.
Part of my calendarOptions:
var calendarOptions = {
header: {
left: ' today',
center: 'prev,title,next',
right: 'agendaWeek,resourceDay'
},
defaultView: 'resourceDay',
The viewRender:
viewRender: function(view, element){
var curDate = ($('#calendar').fullCalendar('getDate')).format('d-DD-MM').split('-');
var curWeekDay = curDate[0];
var curMonthDay = curDate[1];
var curMonth = curDate[2];
$.ajax({
url: 'calendar/getBusinessHours',
type: 'GET',
data: {
'day': curWeekDay,
"_token": $('body').find( 'input[name=_token]' ).val()
},
success: function (response) {
$('#calendar').fullCalendar("destroy");
$("#calendar").fullCalendar(
$.extend(calendarOptions, {
defaultDate: currentDate,
minTime: response[0].open_time+':00',
maxTime: response[0].close_time+':00'
})
);
}
});
},
The ajax response is '08:00:00' so there is no problem there;
I have not tested this but I believe your problem comes from destroying fullCalendar and setting it up again. Essentially, what happens is that your calendar loads and the view is rendered, then you make an ajax request, destroy the calendar, create a new one which triggers viewRender again and so on.
success: function (response) {
$('#calendar').fullCalendar("destroy");
$("#calendar").fullCalendar(...
You can either load the minTime and maxTime before initializing the calendar (getting the values from the database with an ajax call and initializing the calendar only when the values are retrieved from the back-end so you can pass them to the initialization as options) or change their values inside a different event (not viewRender)
What you can also do is add a variable to the equation and launch the AJAX conditionally - if the calendar is not in a process of reconstructing itself with the new minTime and maxTime.
Related
I'm trying to show events from the database on to the calendar but I'm getting the
alert('failed') call every time.
Please, anyone, help me solve this issue. I'm stuck here.
here is my script code:
$.ajax({
url:'events',
type: "GET",
cache: false,
datatype: 'json',
success: function(data){
alert('Hello');
$.each(data, function(index, val){
events.push({
title: val.name,
start_date: val.start_date,
end_date: val.end_date,
start_time: val.start_time,
end_time: val.end_time,
location:val.location,
description: val.description,
timezone:val.timezone,
alldDay: val.isFullDay
});
})
GenerateCalendar(events);
},
error : function(error){
alert('Failed');
}
});
function GenerateCalendar(events){
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat:'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true,
eventColor: '#378006',
events: events
});
}
Controller Function:
public function getEvents()
{
$events = Event::all();
return response()->json(['data'=> $events])->getData();
}
Thanks in advance.
I see your event has the attributes
start_date, end_date, start_time, end_time
i have not seen anything about it in the fullcalendar documentation.
as far as i know, fullcalendar expects the events to have an attribute called start which is required and an optional called end
From the fullCalendar documentation:
start - The date/time an event begins. Required. A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.
If you want to use a JSON feed to get the events there is no need to make your own ajax call. you can use the eventSource property and fullCalendar will handle the fetching for you
I have three parameters startdate, enddate and name which I have to send to the server to get back Json response. I am displaying the response in a GridPanel.
My Ajax Request looks like this:
FilterOperSet: function(button){
var win = button.up('window');
var form = win.down('form');
var start = form.getForm().findField('startDate').getSubmitValue();
var end = form.getForm().findField('endDate').getSubmitValue();
var act = form.getForm().findField('actor').getSubmitValue();
Ext.Ajax.request({
url: 'ListData',
params: { type: 'recordedRequest', startDate: start,
endDate: end, actor: act, start:0,limit:10 },
success: function(response) {
var json = Ext.decode(response.responseText);
var mystore = Ext.data.StoreManager.lookup('RecordedRequestStore');
mystore.loadData(json.recordedRequests);
},
scope: this});
}
I have a button, when user enters values for startdate, enddate and name and clicks on the button the above listener sends them as parameters along with start and limit for paging and response is captured and stored in gridpanel.
My issue with paging toolbar is: I could see the following as response
recordedRequests
// has some meta data here
success
true
total
1339
But my paging tool bar show only one page and at bottom says 0 of 0 and to the right nothing to display. Infact it should say 1 of 14 and should allow me to go through next pages.
2) Also when I click on refresh button it calls my store and calls server, but i want to make a ajax request with startdate, enddate and name as parameters(which would be exactly what my button above listerner does)
My Store looks like this:
autoLoad: false,
remoteFilter: true,
buffered: false,
pageSize: 10,
//leadingBufferZone: 1000,
fields:['start', 'end', 'actor','serviceOp'],
proxy: {
type: 'ajax',
url: 'ListData',
store: 'RecordedRequestStore',
startParam:'start',
limitParam:'limit',
pageParam:'page',
reader: {
type: 'json',
root: 'recordedRequests',
successProperty: 'success',
totalProperty: 'total'
},
extraParams: {
'type': 'recordedRequest',
},
//sends single sort as multi parameter
simpleSortMode: true,
// Parameter name to send filtering information in
filterParam: 'query',
// The PHP script just use query=<whatever>
encodeFilters: function(filters) {
return filters[0].value;
}
},
listeners: {
filterchange: function(store, filters, options){
console.log( filters )
},
totalcountchange: function() {
console.log('update count: ')
//this.down('#status').update({count: store.getTotalCount()});
}
}
Any sort of help will of great value for me. Thanks in Advance.
Instead of Ajax Request. I should use
store.load(params{your params})
For nextpage and previouspage I used beforeload listener for custom parameters.
Hi all I have an app in Backbone where inside a function I want to convert price from GBP to EUR for example using a php file called with ajax.
In the success function I want to assign the converter data to my object.
But seems that not setting this because into the template uin underscore there is always the old value.
This is my function inside my model:
toJSON: function() {
var json = _.clone(this.attributes);
json.rooms = this.rooms.toJSON();
_.each(json.rooms, function(room){
var converter ="<?php echo(site_url('/backend/hotel/ajax_currency')); ?>";
$.ajax({
url: converter,
type: "POST",
data: {
from_currency : room.currency,
amount : room.price_adult
},
dataType: "json",
success: function(data) {
console.log(data);
room.price_adult = data;
}
});
});
return json;
},
I have also tried:
room.model.set('price_adult',data);
but return me error that don't find model.
How can I solve?
This is not a thing you want to put in toJSON function, I can think of several reason why it should work for you. The most important one is that toJSON function is synchronous and the AJAX response is async. so your render function is happening before you get the response from your ajax.
I would suggest having a Room model that will be responsible for the concurrency, and it's view will render it when ajax has returned and the price_adult is ready.
var Room = Backbone.Model.extend({
initialize:function(){
this.convertConcurrency();
},
convertConcurrency:function(){
var model = this;
$.ajax(.....,
success:function(data){
model.set("price_adult", data);
}
);
},
});
var RoomView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.model, "change:price_adult", this.render);
if (this.model.has("price_adult")) this.render();
},
.....
});
var Rooms = Backbone.Collection.extend({...})
var RoomsView = // Rooms collection view
This way the view will be rendered only when there is a price_adult ready.
Maybe you should create a model on the client that gather the concurrency information from the server and compute the concurrency conversation by itself, so you will only have one ajax and the model will compute it for you instead of the server.
Hi all
I am delaying a AJAX request by 3 seconds and then updating a div with the response. But the problem what I face is, when the user clicks on all the three links simultaneously, the requested content keeps getting updated in the div. What i am trying to do is, serve only the last clicked ajax request content, but should not abort the previous requests too. Is there any way that i can achieve it ?? Thanks in advance
Script
$('.links li a').click(function(event){
event.preventDefault();
var getUrl = $(this).attr("href");
var printCall = function() {
$.ajax({
url: getUrl,
type: "GET",
beforeSend: function() { },
error: function(request){ alert(request) },
success: function(data) { $('#graphContent').html(data); }
});
};
setTimeout(printCall, 3000);
});
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
You're going to need:
A way to clear the last timeout
registered, and...
A way to cancel the asynch success
function in the event the timeout
event was not cleared before the
asynch request was made
For the first item, timeout function calls can be cancelled by using clearTimeout() with the ID returned by setTimeout()... pretty straightforward. As to the second point, you can do this by timestamping every call and comparing the value of the timestamp variable enclosed by your success function against the timestamp of the last click call made.
See below:
// A tracker object outside the scope of all click functions
var pendingCall = { timeStamp: null, procID: null };
$('.links li a').click(function (e) {
e.preventDefault();
var getUrl = $(this).attr("href");
// A timestamp for this call
var timeStamp = Date.now();
var printCall = function () {
$.ajax({
url: getUrl,
type: "GET",
beforeSend: function () { },
error: function (request) { alert(request) },
success: function (data) {
// Short-circuit execution if the timestamp on this call doesn't match the last one made
if (pendingCall.timeStamp != timeStamp) { return false; }
// The action to take
$('#graphContent').html(data);
// Clear the reference to this timeout call
pendingCall.procID = null;
}
});
};
// Clear the timeout on the last call made if it exists
if (pendingCall.procID) {
clearTimeout(pendingCall.procID)
};
// Update the timeout call tracker
pendingCall = { timeStamp: timeStamp, procID: setTimeout(printCall, 3000) };
});
I'm trying to initiate an ajax request whenever a person changes the value of a drop down list. I want to send the selected item of the drop down as a query string parameter.
How do I get the selected item from the drop down list using MooTools?
var theUrl = 'http://someurl.com';
window.addEvent( 'domready', function() {
$('ddl').addEvent( 'change',
function(event) {
var parameter = $('ddl').SOMETHING(); // help!
new Request({
url: theUrl,
data: { 'someParameterId' : parameter },
method: 'get',
onComplete: function(data) { alert(data); },
}).send();
}
);
});
Found it!
var parameter = $('ddl').get('value');