Sortable not changing ids

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I want to be able, when I drag and drop, to replace all ids by the other.

For example in this code :

<div class="container">

  <div class="row" id="row_0">

    <div class="col-md-12">

      <form id="form_0" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_0">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_0">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

  <div class="row" id="row_1">

    <div class="col-md-12">

      <form id="form_1" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_1">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_1">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

</div>

I want to be able to change when I drag and drop all id="form_0" <-> id="form_1",id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" .. etc, this is just an example, there are more.

I know that we can use the stop option like so :

$('.container').sortable({

  stop: function(event, ui) {

    var moved = ui.item,

      replaced = ui.item.prev();



    if (replaced.length == 0) {

      replaced = ui.item.next();

    }



    var moved_num = parseInt(moved.attr("id").match(/d+/g), 10) + 1;

    var replaced_num = parseInt(replaced.attr("id").match(/d+/g), 10) + 1;



    moved.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);

    });

    replaced.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);

    });



  }

});

The idea here in the code above, is to get the id number of the one moved and replaced, and for each id, replace in each one of them the number of the other.

But it doesn't do what I'm trying to do. Any idea why?

Fiddle : https://jsfiddle.net/763opz0c/

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

Why would you need to change the id's in the first place?

– charlietfl
Nov 23 '18 at 15:44

@charlietfl good question, because I'm using a system where I'm generating data depending on the order of the _X. So when I change the order, I need to also change that information so the data would turn out correct. It's kinda hard to explain as the example above only explains a small part, the one I need fixed.

– user10641275
Nov 23 '18 at 15:46

So you would update wherever that system stores the order of items

– charlietfl
Nov 23 '18 at 15:48

@charlietfl actually the idea here is to change the _X so when I click on my button that generates data they get generated in the right order. I feel like I'm almost there, but I can't see why isn't my code working, as my logic behind it seems to be okay. I'll explain my logic in an edit.

– user10641275
Nov 23 '18 at 15:49

Sure you can , just seems more complicated than it needs to be doing it though. Can't you just use indexing? Anyway...create a runnable demo so can see what's going on in dev tools console

– charlietfl
Nov 23 '18 at 15:54

|
show 5 more comments

I want to be able, when I drag and drop, to replace all ids by the other.

For example in this code :

<div class="container">

  <div class="row" id="row_0">

    <div class="col-md-12">

      <form id="form_0" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_0">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_0">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

  <div class="row" id="row_1">

    <div class="col-md-12">

      <form id="form_1" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_1">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_1">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

</div>

I want to be able to change when I drag and drop all id="form_0" <-> id="form_1",id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" .. etc, this is just an example, there are more.

I know that we can use the stop option like so :

$('.container').sortable({

  stop: function(event, ui) {

    var moved = ui.item,

      replaced = ui.item.prev();



    if (replaced.length == 0) {

      replaced = ui.item.next();

    }



    var moved_num = parseInt(moved.attr("id").match(/d+/g), 10) + 1;

    var replaced_num = parseInt(replaced.attr("id").match(/d+/g), 10) + 1;



    moved.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);

    });

    replaced.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);

    });



  }

});

The idea here in the code above, is to get the id number of the one moved and replaced, and for each id, replace in each one of them the number of the other.

But it doesn't do what I'm trying to do. Any idea why?

Fiddle : https://jsfiddle.net/763opz0c/

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

Why would you need to change the id's in the first place?

– charlietfl
Nov 23 '18 at 15:44

@charlietfl good question, because I'm using a system where I'm generating data depending on the order of the _X. So when I change the order, I need to also change that information so the data would turn out correct. It's kinda hard to explain as the example above only explains a small part, the one I need fixed.

– user10641275
Nov 23 '18 at 15:46

So you would update wherever that system stores the order of items

– charlietfl
Nov 23 '18 at 15:48

@charlietfl actually the idea here is to change the _X so when I click on my button that generates data they get generated in the right order. I feel like I'm almost there, but I can't see why isn't my code working, as my logic behind it seems to be okay. I'll explain my logic in an edit.

– user10641275
Nov 23 '18 at 15:49

Sure you can , just seems more complicated than it needs to be doing it though. Can't you just use indexing? Anyway...create a runnable demo so can see what's going on in dev tools console

– charlietfl
Nov 23 '18 at 15:54

|
show 5 more comments

I want to be able, when I drag and drop, to replace all ids by the other.

For example in this code :

<div class="container">

  <div class="row" id="row_0">

    <div class="col-md-12">

      <form id="form_0" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_0">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_0">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

  <div class="row" id="row_1">

    <div class="col-md-12">

      <form id="form_1" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_1">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_1">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

</div>

I want to be able to change when I drag and drop all id="form_0" <-> id="form_1",id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" .. etc, this is just an example, there are more.

I know that we can use the stop option like so :

$('.container').sortable({

  stop: function(event, ui) {

    var moved = ui.item,

      replaced = ui.item.prev();



    if (replaced.length == 0) {

      replaced = ui.item.next();

    }



    var moved_num = parseInt(moved.attr("id").match(/d+/g), 10) + 1;

    var replaced_num = parseInt(replaced.attr("id").match(/d+/g), 10) + 1;



    moved.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);

    });

    replaced.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);

    });



  }

});

The idea here in the code above, is to get the id number of the one moved and replaced, and for each id, replace in each one of them the number of the other.

But it doesn't do what I'm trying to do. Any idea why?

Fiddle : https://jsfiddle.net/763opz0c/

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

I want to be able, when I drag and drop, to replace all ids by the other.

For example in this code :

<div class="container">

  <div class="row" id="row_0">

    <div class="col-md-12">

      <form id="form_0" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_0">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_0">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

  <div class="row" id="row_1">

    <div class="col-md-12">

      <form id="form_1" onsubmit="return false;">

        <select class="select2" name="test1" id="test1_1">

          <option value="o_test">o_test1_1</option>

          <option value="o_test">o_test1_2</option>

          <option value="o_test">o_test1_3</option>

        </select>

        <select class="select2" name="test2" id="test2_1">

          <option value="o_test">o_test2_1</option>

          <option value="o_test">o_test2_2</option>

          <option value="o_test">o_test2_3</option>

        </select>



        <button onclick="addRow()">clone</button>

      </form>

    </div>

  </div>

</div>

I want to be able to change when I drag and drop all id="form_0" <-> id="form_1",id="row_0" <-> id="row_1", id="test1_0" <-> id="test1_1" .. etc, this is just an example, there are more.

I know that we can use the stop option like so :

$('.container').sortable({

  stop: function(event, ui) {

    var moved = ui.item,

      replaced = ui.item.prev();



    if (replaced.length == 0) {

      replaced = ui.item.next();

    }



    var moved_num = parseInt(moved.attr("id").match(/d+/g), 10) + 1;

    var replaced_num = parseInt(replaced.attr("id").match(/d+/g), 10) + 1;



    moved.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + replaced_num);

    });

    replaced.find('[id]').each(function() {

      var $this = $(this),

        split = $this.prop('id').split('_')[0];

      $this.prop('id', $this.prop('id').split('_')[0] + '_' + moved_num);

    });



  }

});

The idea here in the code above, is to get the id number of the one moved and replaced, and for each id, replace in each one of them the number of the other.

But it doesn't do what I'm trying to do. Any idea why?

Fiddle : https://jsfiddle.net/763opz0c/

javascript jquery jquery-ui jquery-ui-sortable

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

edited Nov 23 '18 at 15:58

asked Nov 23 '18 at 15:10

user10641275

asked Nov 23 '18 at 15:10

user10641275

asked Nov 23 '18 at 15:10

user10641275

Why would you need to change the id's in the first place?

– charlietfl
Nov 23 '18 at 15:44

@charlietfl good question, because I'm using a system where I'm generating data depending on the order of the _X. So when I change the order, I need to also change that information so the data would turn out correct. It's kinda hard to explain as the example above only explains a small part, the one I need fixed.

– user10641275
Nov 23 '18 at 15:46

So you would update wherever that system stores the order of items

– charlietfl
Nov 23 '18 at 15:48

@charlietfl actually the idea here is to change the _X so when I click on my button that generates data they get generated in the right order. I feel like I'm almost there, but I can't see why isn't my code working, as my logic behind it seems to be okay. I'll explain my logic in an edit.

– user10641275
Nov 23 '18 at 15:49

Sure you can , just seems more complicated than it needs to be doing it though. Can't you just use indexing? Anyway...create a runnable demo so can see what's going on in dev tools console

– charlietfl
Nov 23 '18 at 15:54

|
show 5 more comments

Why would you need to change the id's in the first place?

– charlietfl
Nov 23 '18 at 15:44

@charlietfl good question, because I'm using a system where I'm generating data depending on the order of the _X. So when I change the order, I need to also change that information so the data would turn out correct. It's kinda hard to explain as the example above only explains a small part, the one I need fixed.

– user10641275
Nov 23 '18 at 15:46

So you would update wherever that system stores the order of items

– charlietfl
Nov 23 '18 at 15:48

@charlietfl actually the idea here is to change the _X so when I click on my button that generates data they get generated in the right order. I feel like I'm almost there, but I can't see why isn't my code working, as my logic behind it seems to be okay. I'll explain my logic in an edit.

– user10641275
Nov 23 '18 at 15:49

Sure you can , just seems more complicated than it needs to be doing it though. Can't you just use indexing? Anyway...create a runnable demo so can see what's going on in dev tools console

– charlietfl
Nov 23 '18 at 15:54

Why would you need to change the id's in the first place?

– charlietfl
Nov 23 '18 at 15:44

@charlietfl good question, because I'm using a system where I'm generating data depending on the order of the _X. So when I change the order, I need to also change that information so the data would turn out correct. It's kinda hard to explain as the example above only explains a small part, the one I need fixed.

– user10641275
Nov 23 '18 at 15:46

So you would update wherever that system stores the order of items

– charlietfl
Nov 23 '18 at 15:48

@charlietfl actually the idea here is to change the _X so when I click on my button that generates data they get generated in the right order. I feel like I'm almost there, but I can't see why isn't my code working, as my logic behind it seems to be okay. I'll explain my logic in an edit.

– user10641275
Nov 23 '18 at 15:49

Sure you can , just seems more complicated than it needs to be doing it though. Can't you just use indexing? Anyway...create a runnable demo so can see what's going on in dev tools console

– charlietfl
Nov 23 '18 at 15:54

|
show 5 more comments

1 Answer
1

active

oldest

votes

My suggestion is loop through all items and use their index within the container to update all id's

$('.container').sortable({

  stop: function(event, ui) {

     var $items = $(ui.item).parent().children()

     $items.each(function(index){

         $(this).find('[id]').add(this).attr('id', function(){

             return this.id.split('_')[0] +'_' + index 

         });

     });     

  }

});

Fiddle demo

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53449063%2fsortable-not-changing-ids%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

My suggestion is loop through all items and use their index within the container to update all id's

$('.container').sortable({

  stop: function(event, ui) {

     var $items = $(ui.item).parent().children()

     $items.each(function(index){

         $(this).find('[id]').add(this).attr('id', function(){

             return this.id.split('_')[0] +'_' + index 

         });

     });     

  }

});

Fiddle demo

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

add a comment |

My suggestion is loop through all items and use their index within the container to update all id's

$('.container').sortable({

  stop: function(event, ui) {

     var $items = $(ui.item).parent().children()

     $items.each(function(index){

         $(this).find('[id]').add(this).attr('id', function(){

             return this.id.split('_')[0] +'_' + index 

         });

     });     

  }

});

Fiddle demo

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

add a comment |

My suggestion is loop through all items and use their index within the container to update all id's

$('.container').sortable({

  stop: function(event, ui) {

     var $items = $(ui.item).parent().children()

     $items.each(function(index){

         $(this).find('[id]').add(this).attr('id', function(){

             return this.id.split('_')[0] +'_' + index 

         });

     });     

  }

});

Fiddle demo

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

My suggestion is loop through all items and use their index within the container to update all id's

$('.container').sortable({

  stop: function(event, ui) {

     var $items = $(ui.item).parent().children()

     $items.each(function(index){

         $(this).find('[id]').add(this).attr('id', function(){

             return this.id.split('_')[0] +'_' + index 

         });

     });     

  }

});

Fiddle demo

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

answered Nov 23 '18 at 16:37

charlietfl

142k1391125

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

add a comment |

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

This is perfect, thank you! (sorry for the late reply...)

– user10641275
Nov 26 '18 at 8:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk