how to not add repeated data using jquery

Question

<div class="span6">
<div class="control-group">
<label class="control-label">User Name<span class="required">*</span></label>
<div class="controls"> 
<?php
foreach($res as $key=>$value){
foreach($value as $ind=>$username){
echo '<div class="controls users">'.form_checkbox('username[]', $username).$username.'</div>';
}
}
?> 
</div>
</div>
</div>
<div class="span6">
<div class="control-group">
<label class="control-label">Programs<span class="required">*</span></label>
<?php 
$ids = explode(',', $program_id);
foreach($programs as $value){
?>
<div class="controls programs"> 
<?php echo '<label class="radio">'.form_radio('programs', $value->id).$value->program_name.'</label>' ?>
<div class="listings <?php echo $value->id ?>"></div>
</div>
<?php } ?>
<input type="button" name="reset" value="Reset" id="reset"/>
<input type="button" name="submit" value="Ok" id="oksubmit"/>
</div>
</div>

I have users and programs. I want to add users to programs and I am using jquery.I have added multiple users to programs.The problem is I dont want to add user twice for same program.How to do it.I tried the following in jQuery but to no avail.

<script type="text/javascript">
    $(document).ready(function(e) {
         $('.programs div.listings').slideUp();

        $('#oksubmit').click(function(){
            var error = false;
            var temp = '';
            var selusers = $('div.users span.checked input').map(function(_,el){
                return $(el).val();
            }).get();
            var prgm = $('div.programs span.checked input').val();

            if(selusers == ''){
                alert('Select at least 1 user.');
                var error = true;
                return false;
            }
            if(prgm == ''){
                alert('Select 1 program.');
                var error = true;
                return false;
            }
            if( ! error){
                $('div.'+prgm).slideDown();
                $('div.users span.checked').each(function(){ 
                    var value=$(this).find('input[type="checkbox"]').val();
                    if($('div.'+prgm).children().length > 0){
                        $('div.'+prgm).children().each(function(){
                            var childval = $('div.list input').val();
                            if(value == childval){alert('a');
                                alert('Error');
                                var error = true;
                                return false;
                            }else{

                                alert('n');
                            }
                        })
                        if( ! error){
                            temp += '<div class="list"><input type="text" value="'+value+'" readonly></input><a class="delete" id="'+value+'">X</a></div>';
                        }
                    }else{
                        temp += '<div class="list"><input type="text" value="'+value+'" readonly></input><a class="delete" id="'+value+'">X</a></div>';
                    }

                })
                $('div.'+prgm).append(temp);


            }
});
</script>

Any suggesstions/help is welcome.Thanks in advance.

My solution:

$('#oksubmit').click(function(){
    $('div.users span.checked').each(function(){
                        var flag = true; 
                        var value = $(this).find('input[type="checkbox"]').val();
                        var child = $('div.'+prgm).find('.list').size();
                        var temp = '<div class="list"><input type="text" name="selusers['+prgm+'][]" value="'+value+'" readonly></input><a class="delete btn-danger" id="'+value+'"><i class="icon-remove icon-white"></i></a></div>';
                        $('div.'+prgm).find('div.list').each(function(ind,val){
                            var childval = $(this).find('input').val();
                            if(value == childval){
                                flag =false;
                                alert('Cant add '+value+' twice in same program');
                                return false;
                            }
                        });
                        if(flag){
                            $('div.'+prgm).append(temp);
                        }else{
                            //alert('b')
                        }
                    })
})

You can save everyone some effort (and therefore get faster responses) if you place a working example on jsfiddle. Cheers — iCollect.it Ltd
– iCollect.it Ltd, Commented Aug 6, 2013 at 12:27

Mathieu Marques · Accepted Answer · 2013-08-07 11:14:54Z

1

Create and fill a JavaScript object. Users as key, whatever remains in the end does not contain duplicate.

Say we are looping over three different users
The user 'Jack' with an ID of '42' appears twice
When you iterate four times over the users, fill a JavaScript object while using user IDs as key

var oUsers = {};
oUsers['42'] = 'Jack';
oUsers['43'] = 'Lucy';
oUsers['44'] = 'Fennel';
oUsers['42'] = 'Jack';

> oUsers
> Object {42: "Jack", 43: "Lucy", 44: "Fennel"}
>

edited Aug 7, 2013 at 11:14

answered Aug 6, 2013 at 12:46

Mathieu Marques

1,74817 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

samjhana joshi Over a year ago

I didn't understand.Please can you elaborate a bit.

Mathieu Marques Over a year ago

@sammy, I updated the answer. Let me know if it is not clear enough.

Mathieu Marques Over a year ago

@sammy, I cannot check what you did at the moment (quite hard on a phone). Also, the next time you are asking for help in here, try to remove as much useless code as possible. It makes the job easier for us ;].

Mathieu Marques Over a year ago

@sammy, If I correctly understand what you want to do, my guess would have been to first build the object (of which I told you about) and then write the corresponding HTML elements. That way you keep separated the logic and the rendering, it is both easier to write and to maintain.

samjhana joshi · Accepted Answer · 2013-10-01 09:23:54Z

$('#oksubmit').click(function(){
    $('div.users span.checked').each(function(){
                        var flag = true; 
                        var value = $(this).find('input[type="checkbox"]').val();
                        var child = $('div.'+prgm).find('.list').size();
                        var temp = '<div class="list"><input type="text" name="selusers['+prgm+'][]" value="'+value+'" readonly></input><a class="delete btn-danger" id="'+value+'"><i class="icon-remove icon-white"></i></a></div>';
                        $('div.'+prgm).find('div.list').each(function(ind,val){
                            var childval = $(this).find('input').val();
                            if(value == childval){
                                flag =false;
                                alert('Cant add '+value+' twice in same program');
                                return false;
                            }
                        });
                        if(flag){
                            $('div.'+prgm).append(temp);
                        }else{
                            //alert('b')
                        }
                    })
})

Collectives™ on Stack Overflow

how to not add repeated data using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related