JQuery Thickbox in ASP.net


 

I am using Jquery Thickbox in ASP.net. This thickbox is a method for modal pop out and direct to another page under parent page as iFrame.

How do you make sure to postback the function from child and update certain portion in parent page? Explanation below can answer above question.

 

Download

http://cid-e18bae18675ca19b.office.live.com/embedicon.aspx/JQueryThickBox/JQueryThickBox.rar

Parent Page

Add below script under html header

<link href="thickbox.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>

Add client script at parent page for child page able to trigger this function. document.getElementById is detect the hidden button. This will help to trigger the hidden button event from backend.

function updatedInitial() {
        //  refresh the update panel so we can view the changes
        tb_remove();
        document.getElementById('<%= this.asp_btnRefreshInitial.ClientID %>').click();
    }

Add a hidden button in parent page for able to trigger the event from backend.

<asp:Button id="asp_btnRefreshInitial" Style="display: none"  onclick="Refresh_Click" runat="server"></asp:Button>

Backend code in parent page

protected void Refresh_Click(object sender, EventArgs args)
    {
        //  update contents
}

Trigger the thickbox pop out by using hyperlink at parent page.

<a class="thickbox" style="border-width:0;" title="Add New" href='<%# String.Format("child.aspx?ID=New&id={0}&TB_iframe=true&height=320&width=600",ID) %>' >

<asp:Image runat="server" ID="Img" ImageUrl="~/img/Add.png" /></a>

 

 

From Child Page:

typeof(Forms_Child), Forms_Child is a Class name for child page.

Code below is write in the button that required to submit back to parent page. This will help to trigger the javascript function updatedInitial() and fire the refresh button at the backend for update certain contents.

this.Page.ClientScript.RegisterStartupScript(typeof(Forms_Child), "closeThickBox", "self.parent.updatedInitial();", true);
About these ads

About Yeoh Eik Den

I am a SharePoint developer, and I like to bringing a visual exploration of the dot net in the real world.
This entry was posted in ASP.net, JQuery and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s