jQuery UI onchange each loop not working as expected
What I'm trying to achieve is when the list of textareas is rearranged that the name of the textareas updates to always be ordered ascending. To demonstrate:
Original
name content
value[0] content0
value[1] content1
value[2] content2
Reordered (not necessarily in this order, just an example)
name content
value[0] content2
value[1] content0
value[2] content1
What I've written should loop through the list and update the name attributes, but sometimes it just doesn't and the other times it will get the order of the names very wrong. Here's the jQuery I'm running:
$(document).ready(function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
$( ".sortable" ).on("sortchange", function( event, ui ) {
var $i = 0;
$('.sortable > li').each(function(){
$(this).children('textarea').attr( 'name', 'value[' + $i + ']' );
$i++;
});
});
});
And a fiddle. Not sure what I'm doing wrong.
use sortstop instead of sortchange:
$(document).ready(function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
$( ".sortable" ).on("sortstop", function( event, ui ) {
var $i = 0;
$('.sortable > li').each(function(){
$(this).children('textarea').attr( 'name', 'value[' + $i + ']' );
$i++;
});
});
});
fiddle: https://jsfiddle.net/kz4t8ph5/2/
Also take a look at Saif's answer below :)
use sortupdate instead of sortchange. sortchange is triggered during sorting that's why you are getting unexpected number sequence. sortupdate will be triggered when you stopped sorting. so you will get the final position and expected sequence.
$( ".sortable" ).on("sortupdate", function( event, ui )
{
}
-
12:40
-
05:30
-
05:10
-
9:40
-
4:50
-
11:30
How to prevent a token created with OAuth 2.0 from expiring?
-
08:00
-
05:10
-
6:30
- search for elements in a list 110477 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 105056 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98144 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 95619 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 91863 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 61304 visits
- Adding methods to es6 child class 22012 visits
