How to close jQuery (iFrame) thickbox from server side?

Question

How to close jQuery thickbox from server side - I want to cause the thickbox (frame style) to be closed from a line in the server - when an action is done etc.

I use the thickbox to show a file upload dialog, and once the upload is complete, i wanna dismiss the thickbox from the server's code behind (just like it would do with the 'Close' or Esc key).

Also, when I do Reponse.Redirect it opens up in the thickbox, how can i redirect the entire thing to a new page.

Answer 1

If I understand what you're asking correctly...

You can't interact with javascript from the server-side. The two are independent of each other. No matter what you do on the server, javascript that is already rendered won't change. Do you want to 'close' it so that when the page loads it is closed? But if it has already loaded, nothing you do on the server will close it.

Secondly, if you're using response.redirect on the server with asp, and it's being called by javascript, you're simply redirecting the content inside the ajax request. You have to reload from the client side to change the current script.

Please correct me if I assumed incorrectly.

Answer 2

Kay, ya know what? I'm not even gonna bother waiting for a response on that comment.

There is no magic solution to this problem. No code snippet will suffice. This question is purely conceptual, and you have a concept left to learn.

The concept here is how to make Javascript and server-side coding work together to your advantage. They are two vastly different creatures, and performing client-side tasks from the server-side WILL NOT WORK.

There are many different approaches to this issue. Let's say that (since you gave no details whatsoever) that once a form is submitted in the thickbox, you wish to close the thickbox. Fair enough. My approach would be to create a close_this_thickbox() function, have it lying around in my .js file, then, once the form is submitted, to have the resulting page print <script>close_this_thickbox()</script>.

(The cleaner solution for the end user would likely be to have the form submit via AJAX, then have close_this_thickbox as a callback, but that sounds slightly too fancy for this discussion here.)

An approach similar in concept to the above is the only way to get the desired effect. You must create client-side code, then have the server side print an invocation of said code.

As for server-side redirection applying to the whole window, again, such can not occur without the same approach. Instead of using your built-in server-side redirect methods, you must invoke a piece of script that results in the effect you want, e.g. <script>top.location = 'http://example.com'&lt;/script&gt;. No server-side solution is possible.

Here's hoping that you can successfully apply this concept, and best of luck in your web development journey. Anything need clarification?

Answer 3

I was going to post a similar question then found this thread so I figured I add to it. Here are the details.

in my master page I got the following link which triggers the thickbox

<a runat="server" href="~/users/login.aspx?TB_iframe=true&height=160&width=260" class="thickbox">login</a>

This the HTML for my login.aspx page

<div runat="server" id="divAuthenticate" style="margin: 0px 10px 0px 10px;">
  <div class="row">
  <asp:label runat="server" associatedcontrolid="txtUserEmailAddress" text="Email Address"/>
  <asp:textbox runat="server" id="txtUserEmailAddress" cssclass="defaultTxt" width="260px" />
  </div>
  <div class="row">
  <asp:label runat="server" associatedcontrolid="txtUserPassword" text="Password" />
  <asp:textbox runat="server" id="txtUserPassword" cssclass="defaultTxt" width="260px" />
  </div>
  <div class="row">
  <asp:label id="lblMsg" runat="server" forecolor="Red" />
  </div>
  <div class="row" style="text-align:right;">
  <asp:button runat="server" id="cmdLogin" cssclass="button" text="login" />
  </div>
</div>

  <div id="divContinue" style="margin: 40px;" runat="server" visible="false">
  <asp:button runat="server" id="cmdContinue" cssclass="button" text="Continue..." onclientclick="self.parent.tb_remove();self.parent.location.reload(true);"  />
  </div>

and the code behind for my login.aspx page is as follows

    Protected Sub cmdLogin_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdLogin.Click

    If users.authenticate(txtUserEmailAddress.Text, txtUserPassword.Text) = sqlHelpers.userCommand.success Then

        'store the username so that next time around we can load it to the username textbox
        Dim cookie As New HttpCookie("username")
        cookie.Values.Add("userName", txtUserEmailAddress.Text)
        cookie.Expires = DateTime.Now.AddDays(5)
        Response.Cookies.Add(cookie)

        FormsAuthentication.SetAuthCookie(txtUserEmailAddress.Text, True)

        divAuthenticate.Visible = False
        divContinue.Visible = True

    Else
        lblMsg.Text = "invalid username or password!"

    End If
End Sub

So when the user authenticates successfully i simply hide one div and show the other. The other containing the continue button which closes the thickbox and reloads the parent. Now this is not the best solution but it works hopefully someone can provide some code which would trigger the automatic closing of the thickbox upon successful task submission.

Answer 4

is this what you need? ... OnClick="self.parent.tb_remove();self.parent.location.href = 'Checkout.aspx';" ... i think am doing something similar. the Checkout button is in the thickbox, when checkout clicked it redirects to Checkout.aspx