Facebox not working on elements loaded into specific div with jQuery

just want to put it out there, that I have searched all over stackoverflow and google but couldn't resolve my problem with the help I found.

I have a weekly calendar, which days are separated into div elements. Each div has an ID of d-m-Y. I use a mix of php and jQuery to load events into days of the selected week.

Below is the mix of jQuery and PHP that does just that (loads events into certain days of the week).

echo "<script type=\"text/javascript\">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox({
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('beforeReveal.facebox', function() {
        $(\"#facebox .content\").empty();
    });
    ";

    for($day=1; $day<=5; $day++) {
        echo "$('#".date('d-m-Y', strtotime($year."W".$week.$day))."').append( $('<div />').load('/cal/load #".date('d-m-Y', strtotime($year."W".$week.$day))."' ));\n";
    }
    echo "});
    </script>"; 

Below is the data that gets loaded into the specific div.

echo "<div id='".date('d-m-Y', strtotime($event['timeStart']))."' style='width: 100%; height: ".$eventLong."px; top: ".$eventPosition."px; left: 0%; position: absolute; z-index: 1; background: #C30;'><a href='#' rel='facebox'>Delete</a></div>";

My problem is that I can't get facebox to work - I want to achieve that when I click on the delete button, facebox pops out.

Answers


OK I encountered another problem and I think I fixed the code... it's as it should be now.

Below is the jQuery version without PHP (I have a $date variable for all the dates in the code):

$(document).ready(function() {
    $('#30-01-2012').append($('<div>').load('/cal/load/room/del/date/30-01-2012 #30-01-2012' ,function() {
        $('#delete a[rel*=facebox]').facebox();
    });
});

Are you having a Jquery Error?

Maybe you have a Jquery Conflict? If you write a simple alert($('body').html()); would it work?

If so you need to see that you are loading the scrips well...


After playing with the code I got it to work - kinda. Facebox now works on the append.load elements. But only after I make a CLICK somewhere on the website. Any ideas on how to make it work on ready?

"Modified code":

 echo "<script type=\"text/javascript\">
    $(document).ready(function() {
        $('a[rel*=facebox]').facebox({
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('click', function() {
            $('a[rel*=facebox]').facebox({  
            loadingImage : '/scripts/facebox-v1.3/loading.gif',
            closeImage   : '/scripts/facebox-v1.3/closelabel.png'
        });
        $(document).bind('beforeReveal.facebox', function() {
            $(\"#facebox .content\").empty();
        });
    });
    ";

    for($day=1; $day<=5; $day++) {
        echo "$('#".date('d-m-Y', strtotime($year."W".$week.$day))."').append( $('<div />').load('/cal/load #".date('d-m-Y', strtotime($year."W".$week.$day))."' ));\n";
    }
    echo "});
    </script>";

Need Your Help

Use ANTLR to parse C++ with C#

c# c++ parsing antlr

I'm trying to use ANTLR to get a C++ AST, if possible from my C# code base.

Invite user(s) to event with notification - works manually but not with Graph API

facebook facebook-graph-api facebook-events

I'm currently experiencing some problems with the Graph API when inviting users to an event. The users are being invited successfully, but they do not receive a notification of the invite.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.