jquery .show not running

Question

The following code doesn't seem to execute properly for me, and I'm puzzled as to why. NonITView and ITView are both divs in my ASP page. txtIsIT is an asp:textbox on the page that gets either "yes" or "no" on page load.

        if (document.getElementById("<%= txtIsIT.ClientID %>").value = "yes") {
            $("#NonITView").hide("slow");
            $("#ITView").show("slow");
        }
        else if (document.getElementById("<%= txtIsIT.ClientID %>").value = "no") {
            $("#ITView").hide("slow");
            $("#NonITView").show("slow");
        }
        else {
            alert("Error");
        }

The if is evaluating properly. In firefox's web console, by entering the jquery .show/.hide functions, the divs are properly shown/hidden, which is part of what's confusing me. Anything sticking out to you that should be fixed?

there is an error in your if statement, it should be has only one = it should be == — Anton, Oct 10 '12 at 13:59
try to put that in document ready part and also if you are using jquery use $("#<%= txtIsIT.ClientID %>").val() instead of document.getElementById("<%= txtIsIT.ClientID %>").value and you should use == instead of =. — vaske, Oct 10 '12 at 13:59
You can not change the code with the update solutions because that way you make them looks like wrong. If you like just make some comments on them. — Aristos, Oct 10 '12 at 14:05
Why are you using document.getElementById when you are clearly using jQuery as well? — Charles Boyung, Oct 10 '12 at 14:06

score 1 · Answer 1 · answered Oct 10 '12 at 13:59

1

bug at the = on both lines, you make them equal, you not check them.

document.getElementById("<%= txtIsIT.ClientID %>").value = "yes"

a Tip, to avoid this kind of bugs write them reverse, as

if( "yes" == document.getElementById("<%= txtIsIT.ClientID %>").value) {}

that way, if by accident write = it will throw an error.

answered Oct 10 '12 at 13:59

Aristos

66,005
16
114
150

Fixed the `=` and swapped the `document...` for jquery. updated conditions look like `("yes" == $("#<%= txtIsIT.ClientID %>").val())`. show/hide still not working. – Crimius Oct 10 '12 at 14:10
@Crimius Check the html rendered code to see how this javascript is written, do you get any errors ? Are the ids rendered correctly ? – Aristos Oct 10 '12 at 14:12
The rendered code checks out. Div id's are as written, as is the javascript. No errors or warning pop up while loading my page or executing code. – Crimius Oct 10 '12 at 14:27

score 1 · Answer 2 · edited May 23 '17 at 12:12

In the if statement, you're doing an assignment.

document.getElementById("<%= txtIsIT.ClientID %>").value = "yes"

This will always evaluated to true. So change that line to be:

if(document.getElementById("<%= txtIsIT.ClientID %>").value === "yes")

Also note the three equals signs. It is common practice now for equality to use ===. See this article on why:

Difference between == and === in JavaScript

vaske · Answer 3 · 2012-10-10T14:15:42.023

1

You can use something like this...

  $(document).ready(function() {

     $('#Button_ID').click(function() {
        if ($("#<%= txtIsIT.ClientID %>").val() == "yes") {
            $("#NonITView").hide("slow");
            $("#ITView").show("slow");
        }
        else if ($("#<%= txtIsIT.ClientID %>").val() == "no") {
            $("#ITView").hide("slow");
            $("#NonITView").show("slow");
        }
        else {
            alert("Error");
        }
     });
});

edited Oct 10 '12 at 14:15

answered Oct 10 '12 at 14:02

vaske

9,332
11
50
69

Should have mentioned that this is in a function being fired off of a button click. – Crimius Oct 10 '12 at 14:12
aha in that case even easier, you can call it from JQuery .click() action which you can set for particular button. I just update my code... – vaske Oct 10 '12 at 14:14

score 0 · Answer 4 · answered Oct 10 '12 at 14:00

0

(document.getElementById("<%= txtIsIT.ClientID %>").value = "yes")

should be

(document.getElementById("<%= txtIsIT.ClientID %>").value == "yes")

on if statements it should be ==

answered Oct 10 '12 at 14:00

Anton

32,245
5
44
54

jsweazy · Answer 5 · 2012-10-10T17:13:30.383

0

Why are you mixing jQuery and regular javascript. If you are going to use jQuery stick with it:

if ($("#<%= txtIsIT.ClientID %>").val() == "yes") {
  $("#NonITView").hide("slow");
  $("#ITView").show("slow");
}
else if ($("#<%= txtIsIT.ClientID %>").val() == "no") {
  $("#ITView").hide("slow");
  $("#NonITView").show("slow");
}
else {
  alert("Error");
}

edited Oct 10 '12 at 17:13

answered Oct 10 '12 at 14:05

jsweazy

1,623
9
22

small note you have to add "#" into selector part because JQuery is not aware of your id otherwise. – vaske Oct 10 '12 at 14:07
It's because the OP is using Web Forms. Due to the nature of View State you sometimes need to use ClientID to get the proper ID. – David East Oct 10 '12 at 14:07

score 0 · Accepted Answer · answered Oct 10 '12 at 15:01

Found my problem. When an UpdatePanel reloads, it restores the attributes of it's contents to their default state, which in this case was style="display:none" on both divs. The code would run, show the appropriate div, then immediately hide it again, because later on in the function I was telling it to fire the UpdatePanel's postback trigger.

Thanks for your help everyone!

jquery .show not running

6 Answers6