How to Show a Div in JavaScript or JQuery

Good Evening All

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

Code:

---

<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

Code:

---

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

---

and

Code:

---

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

---

or

Code:

---

        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

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

Code:

---

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

---

Or generate the hide/show JS from the codebehind.

Code:

---

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

---

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

Code:

---

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

---