Comment faire en sorte que ce tri fonctionne pour les multi div avec le même nom de classe #sortable.

Voici un exemple

mettre à jour

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

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

Triable

<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>
0
Adham Mohamed 16 mars 2019 à 20:57

2 réponses

Meilleure réponse
  1. $("#sortable") sélectionnera toutes les balises dont l'ID est égal à "triable", PAS les classes.
  2. Vérifiez votre console. Avez-vous des erreurs concernant .sortable ?
  3. Le nom de classe '#sortable' n'est PAS valide. Changez-le en "sortable" et changez le sélecteur en $(".sortable") . Est-ce que ça marche maintenant ?

EDIT Pour être exact, (3) EST valide en HTML5. Encore une meilleure pratique consiste à commencer vos noms de classe / identifiant par une lettre. Si vous devez utiliser '#', vous devrez l'échapper dans le sélecteur jQ. C'est une confusion inutile.

1
JohnPan 16 mars 2019 à 19:02

Je pense que vous pourriez dire ceci :

    <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>

Changez également l'attribut id en class et essayez !

0
user8181313user8181313 16 mars 2019 à 19:37