Jquery Fancybox not working after postback

Question

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.

My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.

Any thoughts? Anyone experienced similar behaviour?

UPDATE : Some Code..

I have a databound repeater with a fancybox on each repeating item.

They are instanciated by (outside the repeater)

$(document).ready(function() {
            $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });
        });

The anchor tag is repeated..

href="#watchvideo_<%#Eval("VideoId")%>"

As is a div with

id="watchvideo_<%#Eval("VideoId") %>

As is a script element that instanciates the flash movies

Yes the VideoIds are being output the the page.

UPDATE : It's not a problem with the flash..

It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.

UPDATE : I wonder if it is the updatepanel.

Rebinding events in jQuery after Ajax update (updatepanel)

-- lee

Please post the offending code so we can help. With out code all we can do is speculate — catsby, Sep 25 '09 at 13:15

score 14 · Answer 1 · edited May 23 '17 at 11:48

14

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.

function pageLoad(sender, args) {
        $("a.watchvideo").fancybox({
        'overlayShow': false,
        'frameWidth' : 480,
        'frameHeight' : 400
        });
}

see this answer for more info

edited May 23 '17 at 11:48

Community

1
1

answered Sep 25 '09 at 14:00

Russ Cam

124,184
33
204
266

Cheers Russ, looks like you would have solved my problem had I not got there on my own. Much appreciated. Cheers, -- Lee – Lee Englestone Sep 25 '09 at 14:17
1

No probs, glad to help. I highly recommend looking into the links on the other answer - the article is a good read and the ASP.NET AJAX documentation can prove extremely useful. – Russ Cam Sep 25 '09 at 14:18
Thanks I just had this issue to and I'm not well versed on jQuery yet. This solved it! Thanks so much for posting this. – Frank Hale Jul 15 '10 at 15:06
+1 This was a big help to me. I am also new to jQuery and was trying to hack together examples and your answer filled in my blanks. Thanks! – Deverill Feb 16 '12 at 17:53

score 1 · Answer 2 · answered Sep 25 '09 at 13:32

1

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

answered Sep 25 '09 at 13:32

Ropstah

17,538
24
120
194

Interesting.. the fancybox instanciating code is on the aspx page.. I might try writing it to the page from the code behind.. – Lee Englestone Sep 25 '09 at 13:37

score 1 · Accepted Answer · edited May 23 '17 at 12:07

It was the Update panel as described

here.. Rebinding events in jQuery after Ajax update (updatepanel)

As suggested I simply replaced

$(document).ready(function() {
            $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });
        });

with

function pageLoad(sender, args)
{
   if(args.get_isPartialLoad())
   {
       $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });

   }
}

and it worked!

-- Lee

score 0 · Answer 4 · answered Jul 23 '13 at 14:16

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.

I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.

I solved the issue replacing this:

 <script>
        $(document).ready(function () {

            $("a.small").fancybox();

        });
    </script>

with this:

  <script>
        function pageLoad(sender, args) {
            $("a.small").fancybox();
        };
    </script>

score 0 · Answer 5 · answered Apr 27 '10 at 05:18

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:

$('body form:first').append( ... );

Jquery Fancybox not working after postback

5 Answers5

Linked