CODEWITHSUNDEEP
javascriptjqueryjquery-ui-sortable
Adham Mohamed
Adham Mohamed

Reputation: 167

How to make sortable work with multi divs with the same class name

How to make this sortable work for multi divs with the same class name #sortable.

here is an example

update

      <div class="multi-fields" id="sortable">
          //something
      </div>

      <div class="multi-fields" id="sortable">
          //another something
      </div>

sortable

<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
jQuery(document).ready(function($) { 
    $("#sortable").sortable({
        cursor:'move',
        opacity: 0.5,
        cursor: 'pointer',
        axis: 'y',
        update:function(event, ui){
    var order = $('#sortable').sortable('serialize');
    $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_order&" + order
        });
    }});
    $("#sortable").disableSelection();
});
</script>

Upvotes: 0

Views: 589

Answers (2)

user8181313
user8181313

Reputation:

I think you might be saying this:

    <script type="text/javascript">
      var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
      jQuery(document).ready(function($) { 
      $(".sortable").sortable({
      cursor:'move',
      opacity: 0.5,
      cursor: 'pointer',
      axis: 'y',
      update:function(event, ui){
       var order = $('.sortable').sortable('serialize');
      $.ajax({
        type: "POST",
        url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
        data: "action=update_field_order&" + order
      });
      }});
      $(".sortable").disableSelection();
      });
      </script>

Change also the id attribute to class and try!

Upvotes: 0

JohnPan
JohnPan

Reputation: 1210

  1. $("#sortable") will select all tags with id equals to "sortable", NOT classes.
  2. Check your console. Do you get any errors regarding .sortable?
  3. Class name '#sortable' is NOT valid. Change it to "sortable" and change the selector to $(".sortable") . Does it work now?

EDIT To be exact, (3) IS valid in HTML5. Still a better practice is to start your class / id names with a letter. In case you have to go with '#' you will have to escape it in the jQ selector. This is unnecessary confusion.

Upvotes: 1

Related Questions