CODEWITHSUNDEEP
jqueryasp.netfancybox
Quaion
Quaion

Reputation: 23

Using fancybox after a postback

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.

Upvotes: 0

Views: 739

Answers (1)

Yunus Aslam
Yunus Aslam

Reputation: 2466

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.

Upvotes: 1

Related Questions