Thanks for the replies.
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:
PHP Code:
<!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 Code:
<?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);
}?>
Reply With Quote
Originally Posted by Pullo
Bookmarks