why javascript array item removed automatically

Question

i have a text box with auto complete feature. when you start typing country name in text box drop down will apeear automatically by matching character. selected country name will appear to the next div automatically and removed from available list. in contrust you can remove country from selected list which will return back country name in drop down again. let me dive a bit technically.

i have used two array variables availableAllTags and availableTags which assign same value. in whole program i have not change availableAllTags values anywhere. but surprisingly i found every time when i select a country from drop down it removes from availableTags(perfect) and availableAllTags(surprising). but i need to become fixed availableAllTags array values all over my program.

http://jsfiddle.net/aminulsumon/w73yr/11/

  var availableAllTags = availableTags; //original array which data not changed anywhere
  var selected_item_ids=new Array();
  var country;
  var i;
  $(function() {
    $( "#country_name" ).autocomplete({     
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {              
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           alert(availableAllTags[0]);
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

  $(document).on('click','a.del_country', function(e) { 
    e.preventDefault();/* prevent browser opening href url*/

    //Select country name and delete from availableTags array
    var href_val = $(this).attr('href');
    var item_name = href_val.split('delete=')[1];    //alert(item_name);
    selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(item_name)), 1);

    /* remove parent span*/
    $(this).parent().remove();
    return false;
  });

  $(document).on('click','#show_selected_item_ids', function(e) { 
    var all_ids;
    all_ids="";
    $.each(selected_item_ids, function(index,value) {   
     all_ids = all_ids+ selected_item_ids[index]+ ",";
    });
    all_ids = all_ids.substring(0,all_ids.length - 1); // remove last ";" added
    $("#div_selected_ids").html("ids: "+all_ids);
  });

  $(document).on('click','#btnSelectAll', function(e) {
    selected_item_ids = [];
    $('#div_selected_country').html("");
    $.each(availableTags, function(index,value) {   
      selected_item_ids.push(availableAllTags.indexOf(value));   
      $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+value+
        " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
    });
  });

  $(document).on('click','#btnRemoveAll', function(e) {
    /*$.each(selected_item_ids, function(index,value) {   
      availableTags.push(availableAllTags.indexOf(value));
      selected_item_ids.splice(selected_item_ids.indexOf(availableAllTags.indexOf(value)), 1);
    });*/
    selected_item_ids = [];
    availableTags = availableAllTags;
    $('#div_selected_country').html("");
    $('#div_selected_ids').html("");
  });
});

nnnnnn · Accepted Answer · 2013-12-23 11:28:17Z

3

If I understand you correctly, you expect this line:

var availableAllTags = availableTags;

...to create a copy of the availableTags array and put it in the availableAllTags variable, but that's not how JS arrays (and other JS objects) work. What that line does is create a second reference to the same array.

To create a copy of the array you can use the .slice() method:

var availableAllTags = availableTags.slice(0);

Then within your Remove All button click handler where you currently try to reset the array by doing availableTags = availableAllTags you can again use .slice() to make a copy:

availableTags = availableAllTags.slice(0);

answered Dec 23, 2013 at 11:28

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

user1911703 · Accepted Answer · 2013-12-23 14:12:06Z

1

actually in javascript, var x=y; means assign reference of y to x. so in order to assign value you have to use var x=y.slice();

answered Dec 23, 2013 at 14:12

user1911703

7505 gold badges8 silver badges24 bronze badges

Comments

Aziz Shaikh · Accepted Answer · 2013-12-23 11:28:20Z

1

Instead of using var availableAllTags = availableTags;, try this: var availableAllTags = availableTags.slice();.

Your current code make a new variable which holds reference to the same array instead of making a copy on it.

answered Dec 23, 2013 at 11:28

Aziz Shaikh

16.6k11 gold badges65 silver badges81 bronze badges

Comments

user1911703 · Accepted Answer · 2013-12-25 06:52:42Z

your array example assign values correctly but almost no code works accurately in IE8. have a look the fiddle (http://jsfiddle.net/aminulsumon/w73yr/14/). you see the when i start writing country name the drop down appears but when i select a country the drop down automatically doesn't go out.

  $(function() {
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {alert("control comes here");
           country=ui.item.value;  //$('#target').text( ui.item.value );
           $('#div_selected_country').html($('#div_selected_country').html()+"<span>"+country+
                " <a href='?delete="+country+"' class='del_country'>X</a></span>"+"\n ");
           //Add country id in selected_items array.
           selected_item_ids.push(availableAllTags.indexOf(country));

           //Remove country name from availableTags array.
           i = availableAllTags.indexOf(country);
           availableTags.splice(i, 1);   //alert(availableTags[0]);
           if ( ui.item ){
              $(this).val('');
              return false;
           }
      }
    });
  });

in the above code alert("control comes here"); line not executed along with many other lines.

Collectives™ on Stack Overflow

why javascript array item removed automatically

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related