www.webdeveloper.com
Results 1 to 1 of 1

Thread: Jquery lightbox help

Hybrid View

  1. #1
    Join Date
    Jan 2005
    Location
    UK
    Posts
    381

    Jquery lightbox help

    Hi,

    I'm trying to get some javascript to work from code within a fancybox and fullcalendar. The caendar code works great, its trying to store the date range thats the problem.

    Basically, once a user has selected a date range, id like a lightbox to show a confirm yes/no button, which then fires a ajax request to a php page. My JS is a bit rusty to say the least, any help to get this working would be much appreciated.

    Here is my code, I've commented where Im stuck:

    Code:
      $('.button').click(function(){
                   // Call the function to handle the AJAX.
                sendValue($(this).val());  
           
        }); 
    
    // post to ajax page and display in lightbox
      function sendValue(str){
                $.post("ajax.php",{ sendValue: str },
                function(data){
    				 var fancyContent = ('<div class="header">Request sent</div>');
    			    $.fancybox({
                    content: fancyContent
                });
                }, "json");
               
            }
            
    
    
    	$(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) {
              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
                });
    			
    			//if ajax post successful then show booking on page
    			
    				if (confirmed) {
    					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'
    			
    		});
    		
    	});
    Last edited by mattastic; 12-07-2012 at 04:14 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles