3

Trying to get this div to disappear, does not seem to doing what I expect it to do, where am I going wrong?

It does not disappear.

Javascript:

<script type="text/javascript">

function Show_Hide_Display() {

    var div1 = document.getElementById("checkAvailability");

        if (div1.style.display == "" || div1.style.display == "block") {
            div1.style.display = "none";
        }
        else {
            div1.style.display = "block";
        }

    return false;
}    

</script>

HTML:

<div runat="server" id="checkAvailability">
    <asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability"     runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
    </asp:LinkButton>
</div>

I want the button to pretty much hide itself.

Anicho
  • 2,647
  • 11
  • 48
  • 76
  • 1
    Why negative? please give constructive feedback on question atleast if you give negative. – Anicho Sep 27 '11 at 11:47
  • What does it do that is unexpected? – tvanfosson Sep 27 '11 at 11:48
  • Does not display: none, it's still showing. – Anicho Sep 27 '11 at 11:49
  • Have you tried debugging the javascript in your browser's Developer Tools (or Firebug in Firefox)? Check the value of `div1.style` and `div1.style.display`. One or the other might be `undefined`. – Graham Clark Sep 27 '11 at 11:49
  • ahh div1 is returning null I don't know why... – Anicho Sep 27 '11 at 11:51
  • @Anicho: in your markup the ID is set to `lbtnCheckAvailability`, but you're trying to find `checkAvailability`. Also you need to check that ASP.NET isn't turning `lbtnCheckAvailability` into `ctl_0_blah_blah_blah_lbtnCheckAvailability`. Check the HTML source in the browser. – Graham Clark Sep 27 '11 at 11:53
  • @GrahamClark `lbtnCheckAvailability` is ID of linkbutton and `checkAvailability` id ID of div. I guess there's nothing wrong with it as OP is trying to hide the div not the linkbutton – Nika G. Sep 27 '11 at 12:15
  • using Icarus answer works like a charm, thanks for your help everyone! – Anicho Sep 27 '11 at 12:58

4 Answers4

8

Change your line to:

var div1 = document.getElementById("<%=checkAvailability.ClientID%>");

The reason is that when the checkAvailability control is rendered on the client side it may or may not have the same id (checkAvailability) since asp.net will prepend its id with that of the container control or some other logic.

This <%=checkAvailability.ClientID%> will always give you the actual id on the client side.

Icarus
  • 63,293
  • 14
  • 100
  • 115
  • yes that's a proper way of getting rendered asp.net control IDs, but that doesn't solve the problem. div will be still visible. @scartag got the point. it's a postback that causes problem, resetting div visibility to it's default. – Nika G. Sep 27 '11 at 12:21
  • @NikoG. Glad you found the problem. Yes, when you click on an element that submits the form you need to add the `return` statement before the function call if you want the form not to be submitted. It's not enough with returning false from the function itself. – Icarus Sep 27 '11 at 12:34
  • @NikoG they both resolved my issue together. If I could join answers or say more then one anwser needs to be correct for resolution I would :D – Anicho Sep 27 '11 at 13:07
4

I think you will be better of looking at some jQuery here. For example, your code could look like:

$(document).ready(function(){
   $('#yourbutton').click(function(){
      $(this).toggle();
   });
});

Of course, in your case you can also hide the wrapping div if you want that for some reason. It's about the same approach.

Bas Slagter
  • 9,831
  • 7
  • 47
  • 78
  • prefer pure jscript without the libraries but thanks for showing me this option :). – Anicho Sep 27 '11 at 13:01
  • No problem of course. Maybe someone else will find my answer helpful. I think you, in your case, accepted the right answer than! Good luck! – Bas Slagter Sep 27 '11 at 13:04
1

In addition to what @Icarus has posted, modify your code as such.

OnClientClick="return Show_Hide_Display()"

this will stop a post back from happening. i'm guessing you don't want a postback to occur since your div/button will be visible after a postback.

scartag
  • 17,548
  • 3
  • 48
  • 52
1

the problem is linkbutton causes postback, thus div visibility, set by JS, after postback will be restored to it's default value. i.e. style.display will not be saved. a simple solution will be just add simple html button. like this

<input type="button" value="hide the div" onclick="Show_Hide_Display()" />

this just triggers JS, not causing postback, and your div visibility will alter as expected.

Nika G.
  • 2,374
  • 1
  • 17
  • 18