SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?



    Code:
    	$(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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is a fancybox tut I did a while back http://www.visibilityinherit.com/cod...y-fancybox.php

    Here is another one that shows some fun options and possibilities http://www.visibilityinherit.com/cod...allery/tut.php

    Both are NSFW

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
        
        
        
        
    }
    ?>

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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?

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    So when the user clicks "yes", you want the FancyBox content to update and say "Request Sent"?

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code JavaScript:
    $('.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
    });

  10. #10
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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:

    Code JavaScript:
    $('.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?

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    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

  12. #12
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 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\n";
    mysql_close($conn);

    }
    ?>

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,940
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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/8...essages-in-php


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •