CODEWITHSUNDEEP
jqueryjquery-mobile
TheBrockEllis
TheBrockEllis

Reputation: 979

Append / Remove / Reappend <li>'s in jQuery

I'm attempting to create a menu of list items for an application and append it to a . When the user logs out of the app, I would like the menu to be removed completely. If they choose to log back in, I would like the menu to be appended again, etc etc.

Here is my jQuery code that fires when they enter into the main menu page. 

$('#menubuilderbutton').on("click", function(){
var entityType = sessionStorage.getItem('entityType');
//alert(entityType);

if(entityType == 3){ //TEACHER
    var menu = '<li data-role="list-divider" class="menuitem">'+sessionStorage.getItem('schoolName')+'</li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#news"><img src="Images/news.png" /><h3>School News</h3><p>Hot off the presses!</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#events"><img src="Images/events.png" /><h3>School Events</h3><p>Latest happenings</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#cafeteria"><img src="Images/cafeteria.png" /><h3>Lunch Menu</h3><p>What\'s for lunch today?</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#myclasses"><img src="Images/classes.png" /><h3>My Classes</h3><p>Your current classes</p></a></li>';
    menu += '<li data-theme="c" class="menuitem"><a href="#myorganizer"><img src="Images/organizer.png" /><h3>My Organizer</h3><p>Keeping you organized</p></a></li>';
    //$(menu).appendTo('#mainmenu');
    $('#mainmenu ul').append(menu);
}
}); //end menu building click function

In this code, I'm attempting to create a variable called menu and concatenation all of the list items together, then append them to a unorder list I have created here:

<div data-role="content" class="content" data-theme="b" id="mainmenu">
    <ul style="margin-right:auto;margin-left:auto;" data-role="listview" data-inset="true">
    </ul>
</div>

It works like a charm the first time I log in(http://dl.dropbox.com/u/32344563/WorkingApp.png), but when I log out and the re-login it looks like the list items were removed successfully, but they aren't getting re-appended correctly (http://dl.dropbox.com/u/32344563/NotWorkingApp.png).

Here is the code that is run when a user logs off:

$('#logoffbutton').on("click", function(){
    sessionStorage.clear();
    $('#user_name').empty();
    $('li.menuitem').remove();
    $.mobile.changePage('#landing');    
});

Does anyone know how I can get those pesky list items removed and re-appended without incident? I'm sure it's something terribly simple that I'm not seeing or don't know about yet. I'm quite naive when it comes to jQuery, so any tips on how to improve functionality or code layout will be greatly appreciated.

Upvotes: 0

Views: 467

Answers (1)

Th0rndike
Th0rndike

Reputation: 3436

You need to refresh the list:

    $('#mainMenu').listview('refresh');

Upvotes: 1

Related Questions