I’m using the excellent fullcalender plugin. Rather than using js prompt in my script, I’d like to use content in a div that I style up with css and use some nice graphics.
I’m trying to use the fancybox plugin, can anyone please tell me how to the fancybox working and how to pass the value from fancybox to the if statment below it?
$(document).ready(function() {
var liveDate = new Date(); // current Date
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
disableDragging: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'year'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
// disable booking dates in the past
if (liveDate > start) {
alert('This date has been passed');
return false;
} else {
// call html page in lightbox
var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + start + '<br>' + '<label><b>End Time: </b></label>' + end + '<br>' + '<label><a href="#">yes<a href="#">No</a></div>');
$.fancybox({
'content': fancyContent
})
// how to get yes/ no from links to use below?
if (yes) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
} // end of if
} // end of else
calendar.fullCalendar('unselect');
},
editable: true,
events: 'json-events.php'
});
});
Currently get error:
Timestamp: 07/12/2012 14:49:51
Error: TypeError: $.fancybox is not a function
Line: 39
Can you let me know on what page of your site you are experiencing the error.
Also, what you are doing or where you are clicking to make the error happen.
You can substitute the domain name for xxx or something if you don’t want to post it here.
I’ve managed to get my fancybox content working, once my ajax post has completed - I’d like to display to change the fancybox content - which isn’t working. Its the ajax post half way down the page thats causing me the problem.
Here is my jquery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
// post to ajax page and display in lightbox
function sendValue(str){
$.post("ajax.php",{
start : start,
end : end
},
function(data){
var fancyContent = ('<div class="header">Request sent</div>');
$.fancybox({
content: fancyContent
});
}, "json");
}
var liveDate = new Date();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
disableDragging: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'year'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
// disable booking dates in the past
if (liveDate > start) {
var fancyContent = ('<div class="header">Canot book dates in the past</div>');
$.fancybox({
content: fancyContent
});
return false;
} else {
// get user to confirm selection, then use ajax post at top of code
var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + start + '<br>' + '<label><b>End Time: </b></label>' + end + '<br>' + '<label><a href="#" class="button">yes</a><a class="button" href="#">no</a></div>');
$.fancybox({
content: fancyContent
});
$('.button').click(function(){
if ( $(this).html() == "yes" ) {
// Post to insert into DB
$.post("ajax.php?action=add",{ start: start, end: end },
function(data){
var fancyContent = ('<div class="header">Request sent</div>');
$.fancybox({
content: fancyContent
});
}, "json");
// render event
calendar.fullCalendar('renderEvent',
{
title: 'hello',
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
// close fancybox
$.fancybox.close();
} else{
// close fancybox
$.fancybox.close();
}// end of if
});
//if ajax post successful then show booking on page - not sure how to get value from previous fancybox
} // end of else
calendar.fullCalendar('unselect');
},
editable: true,
events: 'json-events.php'
});
});
</script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
here’s my ajax page:
<?php
$link = mysql_connect('xxx', 'xxx', 'xxx');
if (!$link) {
die('Not connected : ' . mysql_error());
}
// make foo the current db
$db_selected = mysql_select_db('importtest', $link);
if (!$db_selected) {
die (mysql_error());
}
$action = $_GET['action'];
if($action =='add')
{
$sql = "INSERT INTO events (start = '".$_POST['start']."' , end = '".$_POST['end']."')";
$query = $db->query($sql);
echo json_encode($query);
}?>
Could you describe the problem for me again (I’m a bit lost).
You have a calendar.
When you click on a particular day, you see a FancyBox message, asking if you want to take the day off.
If you click “no”, then you’re returned to the calendar view.
If you click “yes”, the day is marked as booked.
I don’t know how you have it set up. But if you have it all in an outside page and call fancybox via class iframe then everything should simply reload within fancybox just a it would on a normal page. Getting things such as your describing to work within fancybox while it lives within your same page is hard.
So, figured it out - You were almost there.
All you have to do is remove the call to $.fancybox.close(); in the first part of the if statement, like so:
$('.button').click(function(){
if ( $(this).html() == "yes" ) {
// Post to insert into DB
$.post("ajax.php?action=add",{ start: start, end: end },
function(data){
var fancyContent = ('<div class="header">Request sent</div>');
$.fancybox({ content: fancyContent });
}, "json");
// render event
calendar.fullCalendar('renderEvent',
{
title: 'hello',
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
// REMOVE THIS !!
// close fancybox
// $.fancybox.close();
} else{
// close fancybox
$.fancybox.close();
}// end of if
});