CODEWITHSUNDEEP
javascriptjqueryjsonloops
Sunny
Sunny

Reputation: 932

Data being added twice on selecting from table using checkbox

I'm not sure what's wrong with the loop here. When I select the data(generated using JSON) from a table using checkbox, the selected data is added multiple times.

What's wrong with the code here which iterates over all the checkboxes in the loop, and selects the checked values to add in articledata.

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
    $('.box').append(articlesResult);
});

Upvotes: 0

Views: 48

Answers (2)

Aswin Ramesh
Aswin Ramesh

Reputation: 1674

I think you need to use html rather than append. since append will every time add the checked data along with the current, which already has the one you previously selected

$('input[name="articles"]:checked').each(function() {
    var articleJson =  JSON.parse(decodeURIComponent(this.value));
    articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'
});
$('.box').html(articlesResult);

Upvotes: 1

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Try this, you are adding the same set of templates over and over again to the same variable and appending it to DOM. You only have to call append once after the loop.

$('input[name="articles"]:checked').each(function() {
var articleJson =  JSON.parse(decodeURIComponent(this.value));
articlesResult +='<div class="container article-box parent><div class="row article-row"><div class="col-md-7 article data-col"><div class="row"><form class="form-horizontal form-custom"><div class="form-group form-custom"><label class="control-label col-md-4 article-label">News Title:</label><div class="col-md-8 article-data"><a href="#">'+articleJson.newsTitle+'</a></div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Published On:</label><div class="col-md-8 article-data">'+articleJson.PublishDate+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Job Function:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntion+'</div></div><div class="form-group form-custom"><label class="control-label col-md-4 article-label">Tags:</label><div class="col-md-8 article-data">'+articleJson.newsJobFuntionGA+','+articleJson.newsJobFuntionGA+','+articleJson.newsJobLevelGA+'</div></div></form></div></div><div class="col-md-3 article img-col"><img src="'+articleJson.newsBannerImage+'" class="img-thumbnail img-responsive img-icon" style="max-width: 280px; max-height: 120px;"></div><div class="col-md-2 article btn-col"><div class="row del-btn"><button class="btn btn-danger btn-sm removeArticle"><span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-xs top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-xs down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div><div class="btn-group leftright-btn"><button class="btn btn-primary btn-xs left-btn"><span class="glyphicon glyphicon-arrow-left"></span></button><button class="btn btn-primary btn-xs right-btn"><span class="glyphicon glyphicon-arrow-right"></span></button></div></div></div></div></div>'  
});
$('.box').append(articlesResult);

Upvotes: 1

Related Questions