JQuery en direct et triables

Question

Je suis en train de mettre en œuvre le glisser-déposer pour que je puisse trier les listes de données et mettre à jour la base de données avec les positions pertinentes.

J'ai un exemple de travail, mais lorsque je tente d'utiliser le même code sur les listes qui sont portées via ajax l'événement est obligatoire, mais aucun de ses méthodes sont déclenchés et les articles ne restent pas troqué, (Ils permute quand vous Lâchez la souris)

ici est mon html

<ul class='sortable'>
    <li>
        <ul>
            <li>Data</li>
            <li>Data2</li>
        </ul>
   </li>
   <li>
        <ul>
            <li>Data3</li>
            <li>Data4</li>
        </ul>
   </li>
</ul>

et puis mon JavaScript ressemble à ceci. Je veux seulement être permuté de l'UL interne. -À-dire les listes contenant les li Données2 etc.

$(document).ready(function()
{
    //$(".sortable").disableSelection();
    $(".sortable").live("dblclick", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

L'utilisation d'un événement comme un double clic ou clic était la seule façon que je pouvais obtenir l'événement pour se lier à tous. L'utilisation triables ne fonctionne pas.

Voici le code que je l'ai utilisé pour lier essayé de l'élément ainsi que l'exemple ci-dessus

$(document).ready(function()
{
    $(".sortable").live("sortable", function()
    {
        $(".sortable").sortable({
            update : function()
            {
                alert("update");
            }
        });
    });
});

J'ai essayé aussi le code ci-dessus sans .live () enroulé autour, mais cela ne fonctionne pas non plus.

Voici le code qui charge la liste du serveur,

$(".myLink").live("click", function()
{
    var id   = $(this).attr("id");
    var url = base_url + "admin/controller/function/" + id;

    showList(url);

    return false;
});


//loads data into the form div
function showList(url)
{
    var arr = new Array();
    $.post(url, arr, function(data)
    {
        $("#form").html(data);

    }, "text");
}

Toutes les suggestions ou des pointeurs dans la bonne direction serait utile.

Merci

Answer 1

Ok j'ai réussi à le réparer et je ne suis pas sûr pourquoi cela arrêterait il fonctionne, mais il est certainement le problème. La liste que je tentais de trier avait un flotteur gauche dans la feuille de style sur elle pour afficher la liste horizontalement. Une fois que je l'ai enlevé ce style l'événement de mise à jour a ensuite été déclenchée.

Je viens d'utiliser maintenant l'affichage: en ligne à la liste pour styler horizontalement. J'espère que cela aide quelqu'un parce qu'il a pris mes heures pour travailler dehors.

Merci pour l'aide. Ben

Answer 2

[mise à jour]

Changez votre ligne de rappel AJAX de $("#form").html(data); à ceci:

$("#form").html(data).find('.sortable').sortable(originalOptions);

Et changer votre commande sortable() originale (que je suppose est ailleurs) à quelque chose comme ceci:

var originalOptions = { update: function(){ alert('click');}  };
$(".sortable").sortable( originalOptions );

La chose importante est de originalOptions sûr est disponible pour une utilisation dans votre fonction showList.

[réponse originale]

Vous avez juste besoin d'utiliser refresh lorsque la liste est mise à jour. Disons donc que vous avez ce code $.post:

$.post('/url', { new_positions: whatever }, function(data){
  // data = a bunch of 'lis' but no 'ul'
  $('.sortable').html(data).sortable('refresh');
}, 'html');

Cela change les anciens articles de li pour les nouveaux, et le refresh devrait rebind et accepter les nouveaux éléments.