When I click on an event in my calendar (made with fullcalendar3) it apparead a modal where I can change name, start and end of the event.
When I close this modal it reload the page, no matter if i change something or not.
Is there a way to stop the page from reload if I dont make changes?
This is my function to edit events in JS:
eventClick: function eventClick(event) {
$('#editNewEvent').modal('show').one('hidden.bs.modal', function (e) {
event.title = $('#editEname').val();
event.start = $('#editStarts').val();
event.end = $('#editEnds').val();
event.descrizione = $('#editDescrizione').val();
$.ajax({
url: 'eventi/updateEvent.php',
type: 'POST',
data: {start: event.start, _id: event.idAssenza, end: event.end, title: event.title, descrizione: event.descrizione},
success: function() {
location.reload();
}
});
$('#calendar').fullCalendar('updateEvent', event._id);
});
}
I found online this kind of solution:
success: function(data) {
var result = data;
location.reload();
}
});
return result;
But it doesnt change anything, still reload the page even if I dont modify anything
From an other question of mine I had this solution:
eventClick: function eventClick(event) {
$('#editNewEvent').modal('show');
//*salva* is the ID of my button
$("#salva").click(function() {
event.title = $('#editEname').val();
event.start = $('#editStarts').val();
event.end = $('#editEnds').val();
event.descrizione = $('#editDescrizione').val();
$.ajax({
url: 'eventi/updateEvent.php',
type: 'POST',
data: {start: event.start, _id: event.idAssenza, end: event.end, title: event.title, descrizione: event.descrizione},
success: function() {
location.reload();
}
});
$('#calendar').fullCalendar('updateEvent', event._id);
});
}
Related
I'm new here and new to JS :-)
I'm using AJAX SUBMIT (jquery) to send files to my CDN.
the first time - everything is ok, the file is sent and received.
second time: the file is sent and received, only it does that twice.
and the third time its three times etc...
that's the console of the second time: https://prnt.sc/tluygu
as you can see, it submits twice.
That's the code of the submission: (it's in a modal)
$(document).on('click', '.add-video-btn', function() {
$('#file').val('');
$('#file-upload').trigger('reset');
$('#video-uploading-modal').modal({
backdrop: 'static',
keyboard: false
});
$('#upload-btn').on('click', async function() {
var vidRes = await getOneTimeUploadUrl();
console.log(vidRes.result.uploadURL);
var oneTimeUrl = vidRes.result.uploadURL;
$('#file-upload').ajaxSubmit({
url: oneTimeUrl,
beforeSubmit: function(formData, formObject, formOptions) {
console.log(formData);
$('.progress').slideDown();
},
beforeSend: function() {},
uploadProgress: function(event, position, total, precentComplete) {
$('.progress-bar').css('width', precentComplete + '%');
$('.progress-bar').html('%' + precentComplete);
},
success: function(response) {
console.log(response);
alert('success');
},
});
});
});
The problem is that every time the modal is opened, a new submit listener gets added. To fix your problem, you need to split the event handlers:
Start with the modal click listener:
$(document).on('click', '.add-video-btn', function() {
$('#file').val('');
$('#file-upload').trigger('reset');
$('#video-uploading-modal').modal({
backdrop: 'static',
keyboard: false
});
});
Then, set the submit listener sepparately:
$('#upload-btn').on('click', async function() {
var vidRes = await getOneTimeUploadUrl();
console.log(vidRes.result.uploadURL);
var oneTimeUrl = vidRes.result.uploadURL;
$('#file-upload').ajaxSubmit({
url: oneTimeUrl,
beforeSubmit : function(formData, formObject, formOptions) {
console.log(formData);
$('.progress').slideDown();
},
beforeSend : function() {
},
uploadProgress : function(event, position, total, precentComplete) {
$('.progress-bar').css('width', precentComplete + '%');
$('.progress-bar').html('%' + precentComplete);
},
success: function(response) {
console.log(response);
alert('success');
},
});
});
That should solve your issue. Hope you've found this helpful.
I have a form inside a modal that either saves a memo when one button is clicked or deletes it when another is clicked. The items get saved/deleted but the request count multiplies with each click. I'm getting 4 of the same request etc. How do i stop this. do i have to unbind something?
$('#modal').on('show.bs.modal', function (e) {
var origin = $(e.relatedTarget);
var memoId = origin.attr('data-id');
$('#modal').click(function(event){
if($(event.target).hasClass('memo-save')) {
event.preventDefault();
var memoText = $(event.target).parent().parent().find('textarea').val();
var memo = {
memo: memoText,
id: memoId
}
$.ajax({
type: "POST",
url: '/memos/add-memo?memo=' +memo+'&id=' + memoId,
data: memo,
success: function (result) {
$(event.target).toggleClass('active').html('Memo Saved');
}
});
} else if($(event.target).hasClass('memo-delete')) {
event.preventDefault();
var memoText = "";
var memo = {
id: memoId
}
$.ajax({
type: "POST",
url: '/memos/remove-memo?id=' + itemId,
data: memo,
success: function (result) {
$(event.target).toggleClass('active').html('Memo Deleted');
}
});
}
});
});
you can move the $('#modal').click outside the $('#modal').on('show.bs.modal' that way it will not re-add the listener each time the modal is shown
I've been messing around with FullCalendar for a while now, but I have a slight issue. If I load events through AJAX/JSON in the correct format the calendar only renders the first event.
All other events are showing in the console.log call, but the calendar only shows the first one. The sample events code from documentation is as follows:
events: [{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-02',
url: 'http://google.com/'
}
// other events here
],
My code is below:
events: function(start, end, timezone, callback) {
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$.ajax({
url: "/tande/fetch_holidays/",
type: 'POST',
success: function(data) {
var events = [];
$.map(data.holidays, function(value) {
console.log(value)
description = value.toString().split('_')[0]
start_date = value.toString().split('_')[1]
end_date = value.toString().split('_')[2]
person = value.toString().split('_')[3]
events.push({
title: person,
start: start_date,
end: end_date
});
callback(events);
console.log(events);
})
},
})
},
The callback to events was placed too early. Correct code below:
events: function(start, end, timezone, callback) {
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$.ajax({
url: "/tande/fetch_holidays/",
type: 'POST',
success: function(data) {
var events = [];
$.map(data.holidays, function(value) {
console.log(value)
description = value.toString().split('_')[0]
start_date = value.toString().split('_')[1]
end_date = value.toString().split('_')[2]
person = value.toString().split('_')[3]
events.push({
title: person + ' - ' + description,
start: start_date,
end: end_date,
});
})
callback(events);
},
})
},
I have this code that creates an array of event objects, which is then passed into the calendar, but for some reason the calendar does not render the events.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'title',
center: '',
right: 'prev,next'
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback) {
$.ajax({
success: function(doc) {
var events = [];
$.getJSON('../php/logg.php', function(data) {
$.each(data, function(key, val){
var temp = moment($(this).attr('dato'))
if(temp.isBefore(start)){ return true; }
else if(temp.isAfter(end)){ return true; }
else{x
events.push({
id: $(this).attr('id'),
title: $(this).attr('artist'),
start: $(this).attr('dato'),
allDay: false
});
}
}
);
});
var ektearray = $.makeArray(events);
callback(events);
}
});
}
});
});
When I output events to the console I get an array of objects, which seem to be working as expected. The objects are in the form:
allDay:false
id:"66"
start:"2016-11-04"
title:"Galantis"
__proto__:Object
It seems like I am either messing up the callback, or that my events are missing something, but I can't seem to figure out what
If I understand correctly, you want to execute the function(doc) upon success of the ajax call. If so, your syntax seems no to be properly written.
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.success(function() {
alert( "success" );
});
When I create a new event, i POST it on the server with a tastypie REST API. When created, this event on the server has a new id, generated when is saved:
select: function (startDate, endDate, allDay, jsEvent, view) {
/* after selection user will be promted for enter title for event.*/
var title = prompt('Event Title:');
/*if title is enterd calendar will add title and event into fullCalendar. */
}
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: startDate,
end: endDate,
allDay: allDay
},
true // make the event "stick"
);
$.ajax({
url: 'http://localhost:8000/calendar/api/events/events/',
dataType: 'json',
contentType: 'application/json; encode=UTF-8',
type: 'POST',
data: JSON.stringify({
title: title,
start: startDate,
end: endDate,
allDay: allDay,
user: "/calendar/api/events/users/{{ user.id }}/"
}),
success: function (data) {
// Could i do something here?
}
});
console.log({{user.id}},'{{ user}}')
}
},
I need to update the event on the client memory, because the event just created, has an event id like "fc_1" or something similar, but i need the DB id, because if i immediately drag o resize the event, i can't update it on server because it will try to PUT this event, but with the wrong id (like "fc_1").
in your renderEvent object, you could add id: 'pending'. Then in your success function you can use the fullcalendar clientEvents function to get the array of events and then use updateEvent to add your new id value:
success: function(data) {
var newID = data.id;
var events = calendar.fullCalendar('clientEvents');
for(var i = 0; i < events.length; i++){
if(events[i].id == 'pending') {
events[i].id = newID;
calendar.fullCalendar('updateEvent', events[i]);
}
}
}