Show lightbox after function completes

JavaScript
1

Hi.

I am using the colourbox jquery plugin for my light boxes and I want to display a lightbox after a current function finishes, is this possible?

My current code is

 function(data)
{
	var obj = jQuery.parseJSON(data);
	if(obj.result=="failure")
		{
			//show the message in the div with a red background
			$(".bookingResult").addClass("classroomExpertError");
			$(".bookingResult").html(obj.Message);
        			$('.bookingResult').show('slow', function()
			{setTimeout(function(){$('.bookingResult').hide('slow');									}, 3000); // <-- time in milliseconds
                                            });
		}
	else
		{
			//show the message in the div with a green background
			$(".bookingResult").addClass("classroomExpertSuccess");
			$(".bookingResult").html(obj.Message);
        			$('.bookingResult').show('slow', function()
				{setTimeout(function(){$('.bookingResult').hide('slow');}, 3000); // <-- time in milliseconds
				});
		}
				
			});

I trigger the light box with this line of code: $(“.ajax”).colorbox();

Im trying to get the light box to show after the the settimeout has faded the div and I just cant manage it. can any one help me out.

Cheers
Chris

2

Hi Chris,

What you’ll want to do is put your call to the colorbox() in a callback that gets executed after the .bookingResult is hidden.

I’ve taken the liberty to refactor your code a little bit as well. It seemed that some of the code in the if/else clauses was the same, so I’ve moved it outside, this way it avoids some duplicate code.


function(data) {
    var obj = jQuery.parseJSON(data);

    if(obj.result=="failure") {
        //show the message in the div with a red background
        $(".bookingResult").addClass("classroomExpertError");
    }
    else {
        //show the message in the div with a green background
        $(".bookingResult").addClass("classroomExpertSuccess");
    }

    // ##
    //since this code is common, we can put it outside of the if/else
    // ##
    $(".bookingResult").html(obj.Message);
    $('.bookingResult').show('slow', function() {
        setTimeout(
            function(){
                $('.bookingResult').hide('slow', function() {
                    // ##
                    //this callback will be executed after the bookingResult is hidden
                    // ##
                    $(".ajax").colorbox();
                });
            },
            3000 // <-- time in milliseconds 
        ); 
    });
}