Jump to content

jQuery changing attribute not working properly?


wongadob
 Share

Recommended Posts

I have this jQuery function

   if (appViewArray.cntNotifications==0)   {	$('#unreadbox_notifications').attr('visibility','hidden');   }   else   {	$('#unreadbox_notifications').attr('visibility','visible');   }

This is the HTML it is moding

<div id = "unreadbox_notifications" class = "unread_box"><span id = "unread_notifications" data-bind = "text: cntNotifications"></span></div>

But when it is called it is not updating the HTML properly. This is what it does to that line of HTML

<div id="unreadbox_notifications" class="unread_box" visibility="hidden"><span id="unread_notifications" data-bind="text: cntNotifications">0</span></div>

Note that it surely should be

style="visibility='hidden';"

Should it not, anyway it actually works for visible objects (I guess becuase the default is visible) but when it should become invisible, it does not. I have no idea what I am doing wrong. There is no CSS defined for visibility in the code. I did have some but removed it as I thought it was over ridding the jQuery change. I also had style="visibility='hidden';" within the HTML but all that happened was it did this

<div id="unreadbox_notifications" class="unread_box" style="visibility='hidden';" visibility="hidden"><span id="unread_notifications" data-bind="text: cntNotifications">0</span></div>

Any ideas?

<div id="unreadbox_notifications" class="unread_box" visibility="hidden"><span id="unread_notifications" data-bind="text: cntNotifications">0</span></div>

Edited by wongadob
Link to comment
Share on other sites

You should be using style attribute, but really you should be applying it with css function if (appViewArray.cntNotifications==0) { $('#unreadbox_notifications').css({'visibility': 'hidden'}); } else { $('#unreadbox_notifications').css({'visibility': 'visible'}); }OR use a class name instead

.showthis {visibility': visible; } }.hidethis {visibility': hidden; }}

<div id="unreadbox_notifications" class="unread_box hidethis"><span id="unread_notifications" data-bind="text: cntNotifications">0</span></div>

if (appViewArray.cntNotifications==0)   {        $('#unreadbox_notifications').removeClass('showthis').addClass('hidethis');   }   else   {        $('#unreadbox_notifications').removeClass('hidethis').addClass('showthis');   }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...