How to get parent control id from child popup box in jquery with .net ?

Today I have got a case study in which I need to open a pop-up box on click of link from my asp.net web page and then I need to close that pop-up window after submit button get clicked.
   Isn't it very simple case and I am sure most of developers definetly gone through this situation once.If you google then you will see lots of ways available to do this.I did the same and found some of options in which only few worked for me which I want to share with you guys.
Ok, now lets dive into it.
My web page is using master page and for opening pop-up , I have used IFrame in <div> tag and for open this pop-up on button click I have used jquery code.

Pop-up window code on web page is :

1.<div id="divPopup"  class="popupReqCall">
2.        <div class="Close" style="display: none;">
3.            <img src="images/close.png" border="none" onclick="Close()"  alt="X" />
4.        </div>      
5.      <iframe id="ITestPopup" frameborder="0" scrolling="no" align="top"></iframe>
6.</div>

Here , line 1 is used as container of form control page (which contains textboxs and button) and line 2-4 is used as container of close button image with CSS and close() function which will fire on image click.Last but not the least, line 5 is used for holding user control page which will be add dynamically on click of link.

For getting id of parent <div> id and image control , I need to write jquery code which would be -
var frame = $('[id$=ITestPopup]', window.parent.document);
var imgClose = $('.Close', window.parent.document);

That's it !!
These are the key lines which we can use in any function which would be called on submit button click.
Noticiable part in this line is that first parameter is used as id of control,CSS class or any thing which represent that control and second parameter is defined that id of control is on called page i.e, parent page.
Hope this will help !! Happy Coding..

How to fix header in repeater control in asp.net ?

Some time developers need a feature of fixed header to show thousands of data on the web pages.So, this tutorial will show how to fix header of control.Here, control can be repeater , gridview or any control which is using for showing data in asp.net.

For showing data , I am using repeater control and code will be like -

<asp:repeater id="Repeater1" runat="server">
  <HeaderTemplate>
     <table id="table12" width="505" style="table-layout: fixed; border:solid 1px black">
       <thead>
           <tr id="thead" style="width: 505px; background-color:#BEBEBE">
                <td>Name</td>
                <td>Mobile No</td>
                <td>Address</td>
            </tr>
        </thead>
  </HeaderTemplate>
  <ItemTemplate>
            <tr>
               <td>
                      <%#DataBinder.Eval(Container.DataItem, "Name")%>
               </td>
               <td>
                     <%#DataBinder.Eval(Container.DataItem,"MobileNo")%>
               </td>
                <td>
                      <%#DataBinder.Eval(Container.DataItem,"Address")%>
                </td>
            </tr>
   </ItemTemplate>
   <FooterTemplate>
      </table>
   </FooterTemplate>
 </asp:repeater>

In repeater control, I have design a HTML table which will be used for containing bind data.Thing which should be noticed here is style which is defined in <table> with id 'table12'.
In style , 'table-layout' property is fixed due to which the horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells.
Now,give boundry to repeater control , so that,fixed header effect can be noticed.
<div style="overflow: scroll; height: 100px; width: 505px">
      <asp:repeater id="Repeater1" runat="server">
        ...............
      </asp:repeater>
</div>

Create another <div> tag which will hold header column names dynamically.
<div id="tableHeader">
</div>
Now finally the magic part, a javascript code -

function fixHeader()
{
   //get the id of table used in repeater control
   var t = document.getElementById("table12");
   var thead = t.getElementsByTagName("thead")[0];
   var t1 = t.cloneNode(false);
   t1.appendChild(thead);
   tableHeader.appendChild(t1)
}
       //call fixHeader() function on page load
        window.onload = fixHeader

put this code in <script> tag in <head> section of web page.
Output will be something like -

I hope that this tutorial will help you somewhere.
Happy Coding !!!