Fire JQuery Window from Inside Asp Panel

Question

I have the following code on my page to open a FancyBox window anytime a user clicks a link with class=iframe.

    $.noConflict();
$(document).ready(function () {



    $("a.fancybox").fancybox({
        'width': '75%',
        'height': '75%',
        'autoScale': false,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'type': 'iframe'
    });


});

My problem is that this doesn't work when that link is nested inside of an asp panel. I tried implementing the answer found here Rebinding events in jQuery after Ajax update (updatepanel). The result is that the FancyBox fires correctly until the panel content is changed.

Not sure if it's relevant, but the content inside of the asp panel is a DataList that gets refreshed using ajax whenever the row selection in a RadGrid changes. The link that I want to call the FancyBox was initially inside of the DataList itemtemplate and then I moved it ouside of the DataList, but it is still inside of the asp panel. I'd like for it to stay inside of the asp panel and therefore am trying to find the appropriate event for my JQuery to respond to.

I've also tried nesting the JQuery inside of a function that responds to the RadGrid RowClick event. That did not work either.

What should I try next?

EDIT Based on the answer below it doesn't appear there is a great way of accomplishing this. So, here's another way of potentially skinning a cat. Instead of using a hyperlink inside of the panel maybe I can add a button to an existing toolbar that I have on the page. I already fire a javascript function from the toolbar that dynamically sets the NavigateURL and opens it in a new window. Here's an example of that function below. The first IF statement shows how I currently have it implemented setting the URL and launching it in a RadWindow. The second IF statement is where I'm thinking I can fire the FancyBox to open with the relevant URL. Perhaps this will get around the ajax issue raised in my original question. Does anyone know how to make this work? Can I cause a FancyBox to open from Javascript?

function click_handler(sender, args) {

    var button = args.get_item();
    buttontext = button.get_text();
        if (buttontext == "Request Return") {
           //This is an example that uses a RadWindow instead of FancyBox
           var mastertable = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
           var PackageID = mastertable.get_dataItems()[0].getDataKeyValue("PackageID");

           var oManager = GetRadWindowManager();
           oManager.open("Return.aspx?ID=" + PackageID, "RadWindow1");
           return false;
           }
if (buttontext == "Open My Fancy Box") {
//do something here to a dynamic URL in FancyBox
}

Answer 1

This sadly is kind of a pain. The issue here is that you're adding controls after after the $.fancybox call is being made. If this were a click event, I would just use:

$("selector").live('click', function() {...

Obviously we can't do that here. So the way I see it there are two options:

1. Re-bind the fancybox after content loads. This is exactly what you were trying to do with the post you mentioned (http://stackoverflow.com/questions/301473/rebinding-events-in-jquery-after-ajax-update-updatepanel) Are you sure args.get_isPartialLoad()is coming back as true? Is that code ever being executed?

2. If you can't get the above method to work, there is a messier, ugly solution (the one I use). I open up the fancybox source and change it to use live binding. The idea is that when you call .fancybox instead of only binding to current objects in the DOM we're going to bind to any new objects that may be added. Here's an example of doing this: http://code.google.com/p/fancybox/issues/detail?id=18#c15. Note that this is dangerous and not really recommended - you need to remember to make the change if you upgrade fancybox.

Answer 2

Here's a solution that seems to work. Basically it's as simple as attaching Javascript to the click event that you want to have trigger the opening of the FancyBox. Then include the following manual call.

$.fancybox(
    '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>',
//you could also put an iframe tag or any other html of your choosing above
    {
            'autoDimensions'    : false,
        'width'                 : 350,
        'height'                : 'auto',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    }
);

The answer was located under 'Tips & Tricks, #6' http://fancybox.net/blog