How to Show a Div in JavaScript or JQuery

[vuyiswamb]

Good Evening All

I have a small issue here. I have a Div inside a TD that is defined like this

 <td    >
                <div id="divGoogleEarthMap" runat="server" style="display:none" 
                    >
                    <asp:HiddenField ID="HiddenField1" runat="server" />
                    <asp:ImageButton ID="GoogleEarthMap" runat="server" Height="100px" 
                        OnClientClick="javascript:showimage('GoogleEarthMap'); return false;" 
                        Width="100px" />
                </div>
            </td>

now the display style of this div is hidden. so i have a Javascript that runs when i close my popup. the first thing that javascript does is to populate two textboxes and show this div. It populate the textboxes nicely , but it fails to show or unhide the div. i have tried to set of code example using the normal javascript and also JQuery as depicted below

                $('#divGoogleEarthMap').css('display', "block;");

and

 var div = document.getElementById("divGoogleEarthMap");
                div.style.display = "block";

or

         document.getElementById('divGoogleEarthMap').style.display = 'block';

but still my Element cant be displayed.

Please note that i have a Sample Project that i can be supplied on request


Thanks

[mendhak]

Your div has a runat="server". That means its ID will change at runtime. It will not be divGoogleEarthMap, it will be something like ctl00_blah_blah_divGoogleEarthMap.

Either remove the runat="server", after which this will work

 $('#divGoogleEarthMap').css('display', "block");

Or generate the hide/show JS from the codebehind.

showDivJs = "$('#" + divGoogleEarthMap.ClientID + "').css('display','block');";

[kfcSmitty]

in jQuery you can also do a partial match (very useful for controls with runat=server.)

$('input[id$="_divGoogleEarthMap"]').css('display', 'block);