Question

Suppose I have one button, and I want it to fetch data (like an HTML element from the server side) when the user clicks it. For example:

<table><tr><td>here is my content</td></tr></table>

I will fetch the whole HTML from the server using an Ajax call, and I want to show it inside of a thickbox. I went through the thickbox site, and I found the below code for an inline content demo…but I don’t want it to work like that.

 <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />  
 <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>

Instead, I want to show the thickbox programmatically. When the thickbox appears, then a busy animation will play inside the thickbox and then the ajax call will be completed and the data will be available, then I will show the fetched data inside of the thickbox. So please guide me how to do this with small code.

Answer 1

This functionality is already there review the “ajax content” section of thickbox

OR

what u can do is that
when user clicks on the link/button call the server side function and modify the inner html content of ‘hiddenModalContent’

<script type="text/javascript">
        function GetAjaxData(){
              //retrieve ajax html data here
              return "<b>Ajax data</b>";
        }

        $(document).ready(function(){
              $("#myLink").click(function(){
                    var AjaxContent = GetAjaxData();
                    $("#hiddenModalContent").html(AjaxContent);
              });
        });
</script>

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />  
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox" id="myLink">Show hidden modal content.</a>

<div style="display:none" id="hiddenModalContent">
</div>