madson gr madson gr - 6 months ago 41
Javascript Question

Append() duplicating list item

I have read some posts like this one but it´s not working for me.

I list the data on a listview. When I press the back button on header to repeat the process I want to prevent append() from keeping adding the same list item everytime.

How could I do that? I have used .html() but I am losing css on the second try. I moved $('#list').append(list_item); to outside $.each(....) but it didn´t work.

$.each(vaga, function(index, item){

list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';

});

$('#list').append(list_item);


index.html

<head>
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<meta charset="UTF-8">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>

<script src="js/app.js"></script>
<!-- for your event code, see README and file comments for details -->
<script src="js/init-app.js"></script>
<!-- for your init code, see README and file comments for details -->
<script src="xdk/init-dev.js"></script>
<!-- normalizes device and document ready events, see file for details -->
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
</head>

<body>

<div class="upage" id="areapage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_7" data-uib="jquery_mobile/header" data-ver="0" id="header_areas">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_25 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="bars" data-iconpos="notext" id="opensidebar_btn">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_74_57">
<div class="grid grid-pad urow uib_row_5 row-height-5" data-uib="layout/row" data-ver="0">
<div class="col uib_col_3 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<p style="font-style: italic; color: #246525;">Select by area</p>
<span class="uib_shim"></span>
</div>
</div>
<span class="uib_shim"></span>
</div>

<div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
<div class="col uib_col_5 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col left">
<div class="sbs-container widget uib_w_8 d-margins" data-uib="layout/side_by_side" data-ver="0">
<div class="leftContent widget-container">
<a class="uib-graphic-button default-graphic-sizing default-image-sizing hover-graphic-button active-graphic-button default-graphic-button default-graphic-text widget uib_w_10 d-margins media-button-text-bottom" data-uib="media/graphic_button" data-ver="0"
id="admin">
<img src="images/administrativa.png">
<span class="uib-caption">Admin</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- LIST PAGE -->

<div class="upage" id="listpage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_15" data-uib="jquery_mobile/header" data-ver="0" id="header_listpage">
<h1>Header</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_18 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="arrow-l" data-iconpos="notext" id="listpage_back_btn" data-transition="fade">Button</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div class="upage-content ac0 content-area vertical-col left" id="page_91_35">
<div class="widget uib_w_16 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0" id="listview">
<ul data-role="listview" id="list">

<!-- list item appended in js -->
<!--<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="#"><span>Listitem</span></a>
</li>-->
</ul>
</div>
</div>
</div>
</div>

</body>

Answer

It seems to be a framework problem. I changed from jquery to bootstrap and it worked as it should. Empty the list before everything and append it m inside $.each(...)

$("#list").empty();

...

$.each(vaga, function(index, item){

  list_item = '<li id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>';

  $('#list').append(list_item);

});
Comments