How to throw a server side error message in thickbox using php

Question

Hi all,

My prob in brief:

I am validating a registration form with server side using php and its working fine.

Now my prob is i need to show the error message using thickbox like popup.

Is that possible. If yes please explain how?

thanks in advance

Code:

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



<span class="prtexterror" style="color:#FF0000;display:none;" id="hiddenModalContent" >{$error_login}</span>


{literal}
<script language="javascript" type="text/javascript">



  $(document).ready(function() {
    tb_show("Please, login", "?tb_inline=true&inlineId=hiddenModalContent&height=180&width=300&modal=true", null);
});



</script>
{/literal}

Answer 1

I glanced at Thinkbox's documentation. It seems that you must put your error message on a div with an id:

<div id="errorMessage">
{$errorMessage}
</div>

Your script should then provide the id of the div to be shown in the inlineId parameter:

tb_show("HAI","#TB_inline? height=240&width=405&inlineId=errorMessage&modal=true",null);

Answer 2

OK, I have had a quick look at the Thickbox Documentation and Examples, specifically the one I believe you are using as a framework to create this functionality.

It is not terribly well explained in the documentation, but the "hiddenModalContent" referred to in the href actually refers to a DIV element which contains the text to be displayed in the Thickbox which popsup. So if you have no element with an ID of "hiddenModalContent" that would explain why you are getting an empty popup.

The solution? Replace:

<a href="#TB_inline?height=240&amp;width=405&amp;inlineId=hiddenModalContent&amp;modal=true" class="thickbox">{$errorMessage}</a>

With:

<div id="hiddenModalContent" style="display:none;">{$errorMessage}</div>

Then, when the $(document).ready(... executes, the content of that DIV will be used as the content of the Thickbox.