Twitter Bootstrap Question posted in

Twitter bootstrap – How to give number in order even if I delete a row of inputs the order should not be duplicated

I’m using the length property from jquery for numbering but the order is missed once I delete a row. Duplicate numbers exist againg

$('#add').click(function() {
  var x = $('<div class="ui-state-highlight">' + ($('.con div').length + 1) + '<input type="text" class="form-control" ng-model="input.field" placeholder="Name"/><input type="text" class="form-control" ng-model="input.value" placeholder="Email"/><a href="a"><span class="glyphicon glyphicon-move"></span></a><input type="button" class="form-control Minus" value="delete" /></div>');
  x.appendTo('#form .con')
});

$('.con').on('click', '.Minus', function() {
  $(this).parents(".ui-state-highlight").remove();
});

$("span").sortable({
  connectWith: ".con"
}).disableSelection();
<!DOCTYPE html>
<html>
<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
  <div>
    <button id="add">add another option</button>
    <form id="form" class="form-inline">
      <span class="con">
        <div class="ui-state-highlight"><input type="text" class="form-control" ng-model="input.field" placeholder="Name"/>
          <input type="text" class="form-control" placeholder="Email"/>
          <input type="button" class="Minus" value="-" />
        </div>
      </span>
    </form>
  </div>
</body>
</html>
Tags:

2

Answers


  1. 0

    You are using AngularJS. The best possible option is to have that as an ng-repeat. Going outside of Angular is a bad idea and will cause many problems in the future. Would have put this is a comment but apparently not allowed.

    /edit

    …are you using Angular? you do not include it, but you have ng-model attribute?

    Login or Signup to reply.
  2. 0

    As I understand it you wish to renumber your “order” number when things change?

    With a slight update to your markup (add a span around the number) and then some minor changes this can be done.

    First I got rid of the large string you append and simply cloned the first row and clear the inputs
    I then prevented that first row from being removed IF it is the only row.

    I added a rowid class to make it easier to do this.

    I then updated that number for all rows when anything changes, including a sort.

    Markup with changes:

    <div>
    <button id="add">add another option</button>
    <form id="form" class="form-inline"> <span class="con">
        <div class="row ui-state-highlight"><span class="rowid">1</span>
            <input type="text" class="form-control" ng-model="input.field" placeholder="Name" />
            <input type="text" class="form-control" placeholder="Email" />
            <input type="button" class="Minus" value="-" />
        </div></span>
    </form>
</div>

function fixIds() {
    $('#form .con').find('.rowid').each(function (i) {
        $(this).text(i + 1);
    });
}
$('#add').click(function () {
    var x = $('#form').find('.row:first').clone();
    x.find('.form-control').val('');
    x.appendTo('#form .con');
    fixIds();
});
$('.con').on('click', '.Minus', function () {
    if ($('.rowid').length > 1) {
        $(this).parents(".ui-state-highlight").remove();
        fixIds();
    }
});
$("span.con").sortable({
    connectWith: ".con"
}); //.disableSelection();
$("span.con").on("sortupdate", function (event, ui) {
    fixIds();
});

    Fiddle to play with: http://jsfiddle.net/MarkSchultheiss/wLum04bq/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search