Using fancybox after a postback

Question

I started to use fancybox plugin yesterday during my web developing in C# asp.net, and I succeeded to use it for showing hidden panels, images and etc.

But today I wanted to use it for a different case, after a postback.

I have some link buttons which are created dynamically on page load. Each button click changes hidden panel's content - a label's text, for instance. I want to show the changed panel in a fancybox, but I really have no idea how.

I just wanted to say that I searched a solution for hours and I didn't find a solution that matches to my problem.

May I do something wrong? I will be happy to learn.

Thanks.

Edit

My html document includes:

<asp:Panel ID="Panel1" runat="server">   
</asp:Panel>

<div style="display:none">
    <div id="data">
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
</div>

Panel1 is gonna be the dynamic buttons' parent. data div is the div which its content has to be shown in the fancybox.

The code behind:

protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 1; i <= 4; i++)
    {
        LinkButton but = new LinkButton() { ID = "LinkButton" + i.ToString(), Text=i.ToString(), CssClass="fancybutton" };
        but.Font.Size = 100;
        but.Click += new EventHandler(ButtonClick);
        Panel1.Controls.Add(but);
    }
}

protected void ButtonClick(object sender, EventArgs e)
{
    string id = (sender as LinkButton).ID;
    Label1.Text = id;

    Response.Write(Label1.Text); // test in purpose to see the label text's change
}

my jquery:

        $(".fancybutton").click(function () {
            $.fancybox({
                'type': 'inline',
                'content': '#data'
            });
        });

it looks like that the fancybox appears for a second, but because of the postback the page is refreshed the fancybox disappears.

what version of fancybox? if v1.3.4, that version doesn't support dynamically added elements so check http://stackoverflow.com/a/9084293/1055987 .... if using v2.x and still not working, then post the code you are using or a jsfiddle that reproduces the problem. — JFK, Aug 21 '14 at 19:10
but server controls are different I guess (tell me if I wrong). I will try to make myself more clear - link buttons have click event in the code behind. I have 4 link buttons, which each link button changes a label text in code behind. My question is how do I make the change in server and then call the fancybox to pop up. — Quaion, Aug 21 '14 at 20:14
Don't know, we need to see your rendered html and the jQuery code that binds events to those html elements before we can make any assumption — JFK, Aug 21 '14 at 20:48
eh I use some objects that I made and etc, but I will try to make a demo in a minute — Quaion, Aug 21 '14 at 20:59

Yunus Aslam · Accepted Answer · 2014-08-22T05:18:11.397

1

Try this : As you said that your fancy box shows up for a second or so and then due to page refresh it hides..

$(".fancybutton").click(function (event) {
    event.preventDefault();  // If this does not work also try "event.stopPropagation();"
    $.fancybox({
        'type': 'inline',
        'content': '#data'
    });
});

I hope this will work for you as I have answered to what I have understood from your question. Let me know if this works for you. Cheers.

edited Aug 22 '14 at 05:18

answered Aug 21 '14 at 11:48

Yunus Aslam

2,447
4
25
39

My problem is that I can mix the data changing and the fancybox. I've tried to do it before.. – Quaion Aug 21 '14 at 13:11
Boss. Your question is not clear. This is the main reason why other programmers did not comment anything. Please try to make yourself a little bit more clear or please create a fiddle for your issue which will help us understand you better. – Yunus Aslam Aug 21 '14 at 14:24
The fancybox appears but the label text isn't changed - it remains "Label" every click. I guess that the post back doesn't occurs. I tried the second option you suggested me and the post back occurs but the fancybox doesn't appear, although not for a second. – Quaion Aug 22 '14 at 13:43
I also used this code as even I was also stuck in something similar. – Majeed Aug 26 '14 at 13:05

Using fancybox after a postback

1 Answers1