How to use lightbox plugin with jquery?

Hi Guys,

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

Many thanks

Hi mattastic,

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.

Here is a fancybox tut I did a while back http://www.visibilityinherit.com/code/jquery-fancybox.php

Here is another one that shows some fun options and possibilities http://www.visibilityinherit.com/code/fancybox-photo-gallery/tut.php

Both are NSFW

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:

<!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);
	
	
	
	
}?>

Hi there,

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.

What’s not happening that you want to happen?

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.

Thanks for the replies folks

I can’t get the fancbox to display ‘request sent’ in the ajax post in the jquery.

If I can get something to show I’m sure I can figure it out

Cheers

So when the user clicks “yes”, you want the FancyBox content to update and say “Request Sent”?

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
});

Hi Pullo,

Thanks again - I’ve made that change but it doesn’t work for me - I get the confirm box - when I click yes, it just stays as it is.

Any ideas?

Hi there,

Something is going wrong in your ajax.php.

If I look at the link you PM’d me, using Chrome’s dev tools I see the message:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) 
http://www.yoursite.com/calendar/ajax.php?action=add

I copied your code and just created a blank ajax.php file and everything works for me.
Here’s a demo: http://hibbard.eu/blog/pages/mattastic/

HTH

Thanks again for the reply mate.

Is there a way to debug the ajax.php? I can’t find a way to test it properly.

here is my code:




<?php
$dbhost = 'xxx';
$dbuser = 'xxx';
$dbpass = 'xxx';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}


$action = $_GET['action'];
if($action =='add')


 $sql = "INSERT INTO events (".$_POST['start'].", ".$_POST['end'].")";

mysql_select_db('importtest');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
  die('Could not enter data: ' . mysql_error());
}
echo "Entered data successfully\
";
mysql_close($conn);

}
?>

Hi,

No problem!

If I had to do this, I’d just run the PHP script in its own right, echoing out the variables at convenient steps along the way.

Also, if you’ve got access to your php.ini, you can flip a few switches there to make things more verbose: http://stackoverflow.com/questions/845021/how-to-get-useful-error-messages-in-php