Adding CSS to jQuery Ui Tab Add

Question

I am trying to add 2 more ui tabs after a user has logged on. First I tried doing an after.

$('#slideshow').tabs('remove', '4');
$("#slideshow ul li:last-child").after('<li><a href="#slide5">my account</a></li><li class="last"><a href="#noslide" onclick="location.href=\'/Account/LogOut\';">log off</a></li>');

This method adds the tabs, but jQuery thinks the last 2 tabs do not exist and the my account tab does nothing.

Then I tried the other method.

$('#slideshow').tabs('remove', '4');    
$('#slideshow').tabs('add', '#slide5', 'my account'); 
$('#slideshow').tabs('add', '/Account/LogOut', 'log off');

This will have the last 2 tabs added without any css below my original ul list.

The html looks as follows:

<div id="slideshow">
    <div id="slide1" class="ui-tabs-panel"></div>
    <div id="slide2" class="ui-tabs-panel"></div>
    <div id="slide3" class="ui-tabs-panel"></div>
    <div id="slide4" class="ui-tabs-panel"></div>
    <div id="slide5" class="ui-tabs-panel"></div>

    <ul id="menuslide" class="ui-tabs-nav">
    <li><a href="#slide1">i</a></li>
    <li><a href="#slide2">hope</a></li>
    <li><a href="#slide3">this</a></li>
    <li><a href="#slide4">gets fixed</a></li>
    <li class="last"><a href="#slide5">login</a></li>
    </ul>
</div>

CSS:

#menuslide {
width:990px;
height:46px;
}
#menuslide li {
height:46px;
float:left;
display:inline;
background:url(sepslidemenu.png) no-repeat 100% 0;
}
#menuslide li.last {
background:none;
}
#menuslide li a, #menuslide li a:link, #menuslide li a:visited {
height:36px;
float:left;
display:inline;
font-size:1.8em;
color:#3f7da0;
font-weight:bold;
padding:10px 30px 0 30px;
}
#menuslide li a:hover {
background:url(slidemenu_hover.png) repeat-x;
text-decoration:none;
}

Answer 1

I do it straight on php.

Pseudo code:

if (session is logged in)
    display menu_item_1 ... menu_item_n
    display menu_logged_in_item_1 .... M
else 
    display menu_item_1 ... menu_item_n

I don't think you need anything special with css, html, or ajax. I strongly suggest you do it from your scripting language especially if you have different user privileges (user, admin, editor ...), as you can set them up quiet elegantly in relationship to your database

Answer 2

dassouki: I do that in my server code also. But when I am returning only json from the login attempt and needing to manipulate a very small amount of html. There is no need for a full page load

Answer 3

I will answer my own question here

$("#slideshow ul li:last-child a").text('my account')
$("#slideshow ul li:last-child").removeClass('last').after('<li class="last"><a href="#" onclick="location.href=\'/Account/LogOut\';">log off</a></li>');
$('#slideshow').tabs('select', 4);