I have a list of Div that is made draggable by using jquery.
<div id="external-events">
<h4>List Of Staffs</h4>
<div class="external-event" data-id="1">Name</div> //Draggable
</div>
This is the code that makes it draggable
$('#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()),
id: $(this).data('id')
};
// 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
});
});
So I have to implement it such that the Div is dynamic so I have added codes that generated it. It generated out correctly but it does not get the jQuery attributes such as the being draggable. Here is javascript codes:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default.aspx/getListOfStaff",
data: {},
contentType: "application/json",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#external-events").html(msg.d);
}
});
/* 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()),
id: $(this).data('id')
};
// 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
});
});
I used firebug and checked the html generated, it is exactly the same. Any ideas?
It's because the $.ajax function is not synchronous by default. This means that after the $.ajax call, probably the request will not have completed yet, meaning that your $("#external-events") query will return 0 elements.
Try this:
$(document).ready(function () {
function makeDraggable() {
$('#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()),
id: $(this).data('id')
};
// 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
});
});
}
$.ajax({
type: "POST",
url: "Default.aspx/getListOfStaff",
data: {},
contentType: "application/json",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#external-events").html(msg.d);
makeDraggable();
}
});
});
Related
Can anyone help me I'm a newbie.
I have set up external events that are droppable in my calender.
My calender holds my events when I'm clicking on next/previous. But when I reload my page the events are gone.
what It's wrong in my javascript?
<script>
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-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 eventObject = {
title: $.trim($(this).text())
// start: '2016-03-04'// use the element's text as the event title
};
$('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
events: eventObject,
// this allows things to be dropped onto the calendar
drop: function (date, allDay) {
// retrieve the dropped element's stored Event Object
var eventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, eventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
$('#calendar').fullCalendar('refetchEvents');
// $('#calendar').fullCalendar( 'refetchexternal-events' ) ;
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
</script>
I have used full calendar external dragging events for a topic assigning interface.Used ajax for updating the topic details to mysql db but ajax is not working.I am not getting the values in my controller.Checked the other questions here but didn't find a solution.Can any one help?
<link href='assets/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='assets/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='assets/fullcalendar/lib/moment.min.js'></script>
<script src='assets/js/jquery.js'></script>
<script src='assets/fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script src='assets/fullcalendar/fullcalendar.min.js'> </script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-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
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
drop: function(date,event) {
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
$.ajax({
url: '/addSchedule',
dataType: 'json',
type: 'post',
data: {event: event},
success: function(response){
console.log('response');
}
});
}
});
});
</script>
I was experiencing the same issue as #AVM, by using the same procedure he is using.
this is the solution to this problem:
var event_title = event.title;
var event_date = event._start.format();
var event_backgroundColor = event.backgroundColor;
var event_borderColor = event.borderColor;
$.ajax({
url: '../php/add_event.php',
type: 'post',
data: {
title: event_title,
date: event_date,
backgroundColor: event_backgroundColor,
borderColor: event_borderColor
},
success: function(response){
alert(response);
},
error: function(){
alert("error");
}
});
Note the:
var event_date = event._start.format();
This solved my problem, I hope it will solve yours.
Thanks
Mat
I'm currently working on a school project that requires a scheduling calendar as it's core function. However, I downloaded a third party java script calendar from the net and edit the java script codes accordingly to my project requirements.
But as a noob in asp.net, I do not know how to save the javascript object into my SQL server. Is there a guide or a website where I can learn how to do it ? Below is a set of my java script, so how do I use JSON with this code?
$(document).ready(function () {
/* initialize the external events
-----------------------------------------------c ------------------*/
$('#external-events div.external-event2').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 external events
-----------------------------------------------c ------------------*/
$('#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 calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
// calendar.fullCalendar('unselect');
},
eventClick: function (calEvent, jsEvent, view) {
var title = prompt('Rename Event Title:');
calEvent.title = title;
// copiedEventObject.title = title;
alert('Altered Event : ' + calEvent.title);
// change the border color just for fun
$(this).css('border-color', 'red');
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// copiedEventObject.title = 'abc'; //<<<Change the title
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
Convert your object JSON a String with JSON.stringify(object), and save it in the database, then when you access the data and recover this String, you send the client and to parse a JSON object with JSON.parse (string)
I am trying to join two ajax calls into one. One fires on a checkbox change in the form, and the other fires when the jQuery slider "slides". I would like to combine the two.
I was thinking of using a .bind(), but I need to use more than one jQuery selector, and more than one event.
The two jQuery selectors would be:
$("input[type=checkbox]")
$( "#pay_range" ).slider
The two different events would be, respectively
.click()
.slide()
Obviously, the different event listeners have to go with the correct jQuery selectors.
the js for the checkboxes:
// when a checkbox is clicked
$("input[type=checkbox]").click(function() {
// remove the original results
$('#original_results').css("display", "none");
// which filter section does it belong to
var filter_section = $(this).attr('name');
// should it be filtered out or left in
var remove = $(this).prop('checked');
// if needs to be filtered
if (!remove)
{
// add it to our filter list for the specified section
filters[filter_section].push(this.value);
}
else
{
// take it off the list for the specified section
var index = filters[filter_section].indexOf(this.value);
if (index > -1)
{
filters[filter_section].splice(index, 1);
}
}
$.ajax({
type: 'POST',
url: '/results/search_filter',
//url: url,
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { filters: filters, criteria: criteria }
}); // end ajax setup
});
the js for the slider:
$(function() {
$( "#pay_range" ).slider({
range: true,
min: pay_min,
max: pay_max,
values: [ pay_min, pay_max ],
slide: function( event, ui ) {
$( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
$.ajax({
type:'POST',
url: '/results/search_filter',
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#filter_updating').html("Filtering your search...");
},
success: function(response) {
//inject the results
$('#search_results').html(response);
},
data: { min: ui.values[0], max: ui.values[1] }
});
}
});
});
You can simplify down to one function:
function doAjax() {
var ranges = $('#pay_range').slider('values')
var data = {
min: ranges[0],
max: ranges[1],
filters: filters,
criteria: criteria
}
/* show loading*/
$.post('ajaxData.html',data,function(response){
$('#search_results').html(response);
})
}
Then for slider:
$("#pay_range").slider({
range: true,
min: pay_min,
max: pay_max,
values: [pay_min, pay_max],
stop: function(event, ui) {
doAjax();
}
});
Do same thing in checkbox handler after you adjust filters
Your code doesn't show where citeria comes from
DEMO
I have a problem of dragging and dropping external elements to a calendar (Fullcalendar) on a windows machine. All works fine on a linux, mac machine. But does not save to the database on a windows machine. What may be the problem??
jQuery(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------
*/
jQuery('#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: jQuery.trim(jQuery(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
jQuery(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
jQuery(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// page is now ready, initialize the calendar...
jQuery('#calendar').fullCalendar({
loading: function(bool) {
if (bool) jQuery('#loading').show();
else jQuery('#loading').hide();
},
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid,
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'prev,next today',
},
cache: false,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = jQuery(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = jQuery.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
jQuery('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// Call this function to store the date and time of this shift into a table
saveShift(originalEventObject,copiedEventObject);
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
if (!confirm("Are you sure you want to change dates?")) {
revertFunc();
}
else {
// Our edit function for this shift
updateShift(event);
}
},
eventClick: function(event,revertFunc) {
if(!confirm("Are you sure you want to delete this "+ event.title +" shift?")) {
revertFunc();
}
else {
// Delete shift
deleteShift(event);
}
}
/*eventMouseover: function(event, jsEvent, view) {
jQuery.getJSON('/roster/manage/ajax', {part: "shiftcalendarpeople", shiftID: event.id }, function(data) {
if(data != null) {
var layer = "<div id='events_"+event.id+"'>";
jQuery.each(data, function(k, v) {
layer += "<span>"+v.user+" as "+v.role+"</span>";
});
layer += "</div>";
jQuery(this).append(layer);
}
else {
var layer = "<div id='events_"+event.id+"'><span>No people rostered.</span></div>";
jQuery(this).append(layer);
}
});
},
eventMouseout: function(event, jsEvent, view) {
jQuery("#events_"+event.id+"").remove();
}*/
})
});
Usually when something works on every machine except windows (or vice-versa) it's because of path issues. I see that you use a unix path in a variable
events: "/roster/manage/ajax?part=shiftcalendar&nodeID="+placeid
Maybe try using the windows style path "\roster\manage\ajax?part=shiftcalendar&nodeID="+placeid
It's a rough guess. It's what jumps to my eyes at first glance.