everything works with a prompt, but I dont want to use a prompt or alert or confirm. Is it possible to use jquery ui to have a popup? when I try I get either function undefined or var unknown.

html______________________________________________________________

Title
Description
Location

----JS____________________________________________

$(document).ready(function () {

var calendar = $('#calendar').fullCalendar({

defaultView: 'agendaWeek',

height: 650,

header: {

left: 'prev,next today',

center: 'title',

right: 'month,agendaWeek,agendaDay,listWeek'

},

editable: true,

events: '/event.php',

displayEventTime: true,

displayEventEnd: true,

axisFormat: 'HH:mm',

allDaySlot: false,

eventRender: function (event, element, view) {

if (event.allDay === 'true') {

event.allDay = true;

} else {

event.allDay = false;

}

if(event.description && event.location){

element.find(".fc-list-item-title").after("Description: " + event.description + " Location: "+ event.location + "");

}

},

eventAfterRender: function (event, element, view) {

},

eventAfterAllRender : function( view ) {

if (view.type == 'listWeek') {

console.log(view.type + ' change colspan');

console.log(view)

var tableSubHeaders = jQuery("td.fc-widget-header");

console.log(tableSubHeaders);

var numberOfColumnsItem = jQuery('tr.fc-list-item');

var maxCol = 6;

var arrayLength = numberOfColumnsItem.length;

for (var i = 0; i < arrayLength; i++) {

maxCol = Math.max(maxCol,numberOfColumnsItem[i].children.length);

}

console.log("number of items : " + maxCol);

tableSubHeaders.attr("colspan",maxCol);

}

},

selectable: true,

selectHelper: true,

select: function (start, end, allDay) {

var title = prompt('Event Title:');

if (title) {

var description = prompt('Description:');

var location = prompt('Location:');

var start = moment(start, 'DD.MM.YYYY HH:MM:SS').format('YYYY-MM-DD HH:MM:SS');

var end = moment(end, 'DD.MM.YYYY HH:MM:SS').format('YYYY-MM-DD HH:MM:SS');

$.ajax({

url: 'add_event',

data: ({title: title,start: start,end: end,description: description, location: location}),

type: "POST",

success: function (data) {

displayMessage("Added Successfully");

}

});

calendar.fullCalendar('renderEvent',

{

title: title,

start: start,

end: end,

description: description,

location: location

},

true

);

}

calendar.fullCalendar('unselect');

},

editable: true,

eventDrop: function (event, delta) {

var id = event.id;

var title = prompt('Event Title:');

if (!title) {

title=event.title;

}

var description = prompt('Description:');

if (!description) {

description=event.description;

}

var location = prompt('Location:');

if (!location) {

location=event.location;

}

var start = event.start.format("Y-MM-DD HH:mm:ss")

var end = event.end.format("Y-MM-DD HH:mm:ss")

$.ajax({

url: 'edit_event',

data: ({id:id,title: title,start:start,end: end,description: description, location: location}),

type: "POST",

success: function (response) {

displayMessage("Updated Successfully");

}

});

},

eventClick: function (event) {

var deleteMsg = confirm("Do you really want to delete?");

if (deleteMsg) {

$.ajax({

type: "POST",

url: "delete_event",

data: ({id: event.id}),

success: function (response) {

$('#calendar').fullCalendar('removeEvents', event.id);

displayMessage("Deleted Successfully");

}

});

}

}

});

});

function displayMessage(message) {

$(".response").html("

"+message+"

");

setInterval(function() { $(".success").fadeOut(); }, 1000);

}