jquery script executing but not setting css for .show

Question

Hi, I have jquery code that is being reused by a repeatable partial view on an asp.net mvc page but the script is not executing as I expect it should.

The scenario is not that complex, I have a page with multiple reviews for an item, and users who are logged in are allowed to 'vote up' or 'vote down' a review via a thumbs up/thumbs down button (similar to digg).

I have each scenario's text rendered inside a <span> where the id='spanname-'+reviewId so each review's rating is uniquely identifiable (since they are repeatable since multiple reviews exist on the page, each with the same functionality) so e.g. if I want to ask the user to log in if they are not currently, I have the following html

<span id="login-<%=Model.EntityId%>" style="margin: 0 5px 0 5px;display:none;">
        Why not <a href="#">login</a> and rate this? 
</span>

and appropriate an initialise() method which sets

var isAuthenticated = <%=Request.IsAuthenticated.ToString().ToLower() %>;
function initialise()
   {
        if (isAuthenticated)
           {//hide login spans, unhide other spans}
       else
           {
               //alert('user not logged in')
               $('rate-<%=Model.EntityId%>').hide();
               $('login-<%=((GigItModel)Model).EntityId%>').show();
               //alert($('login-<%=((GigItModel)Model).EntityId%>'));
           }
    }
    $().ready(function()
       {
        initialise();
       });

I've put alert buttons to test that it detects a logged in user vs a non-logged in user and also that it is referencing objects but for some reason the page is not rendering the CSS attributes and is showing NONE of the <span>'s (or all if i remove the display:none in the style attributes)

Can anyone offer insight as to why the jquery is not executing as expected? Thanks in advance.

Answer 1

You forgot to use # before your ids

$('#rate-<%=Model.EntityId%>').hide();
$('#login-<%=((GigItModel)Model).EntityId%>').show();

Answer 2

To select DOM elemets by id use #id_of_element:

$('#rate-<%=Model.EntityId%>').hide();
$('#login-<%=((GigItModel)Model).EntityId%>').show();

Answer 3

A suggestion -- do not use javascript to hide that functionality. Use ASP code to write the HTML that allows for voting and the login box based on that user being logged in. You should not leave that logic up to client-side scripts, what happens if someone has javascript disabled?

However to address your issue, you need a # in front of the code to address something by ID:

$('#rate-<%=Model.EntityId%>').hide();
$('#login-<%=((GigItModel)Model).EntityId%>').show();