Javascript 通过Ajax从回显列表中对jQuery列表进行排序

您好，我目前正在尝试使用jQuery创建一个可排序列表，该列表是根据Ajax返回的结果返回的。这是我的

在my settings.php页面上，我的

标记中有以下内容：

<script type="text/javascript">
    $(document).ready(function () {
        $('#sportsort').sortable({
            axis: 'y',
            update: function (event, ui) {
                var data = $('#sportsort').sortable('serialize');
                $('#test').text(data);
                $.post("actions.php?action=updatesort",data,function(theResponse){
                    $("#sportsavemessage").html(theResponse);
                    $('#sportsavemessage').css("color","green");
                    $('#sportsavemessage').css("float","right");
                });
            }
        });
    });
</script>

<script type="text/javascript">
    function updateSortable() {
        $('ul#leaguesort').sortable({
            axis: 'y',
            stop: function(event, ui) {
                var data2 = $('ul#leaguesort').sortable('serialize');
                console.log(data2);
                $('#test').text(data2);
                $.post("actions.php?action=updatesort",data2,function(theResponse) {
                    $("#leaguesavemessage").html(theResponse);
                    $('#leaguesavemessage').css("color", "green");
                    $('#leaguesavemessage').css("float", "right");
                });
            }
        });
    };
</script>

<script>
    function showLeagues(str) {
      if (str=="") {
        document.getElementById("leagues").innerHTML="";
        return;
      } 
      if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("leagues").innerHTML=xmlhttp.responseText;
          updateSortable();
        }
      }
      xmlhttp.open("GET","get_leagues.php?q="+str,true);
      xmlhttp.send();
    }
</script>

$（文档）.ready（函数（）{
$（“#体育运动”）。可排序({
轴：‘y’，
更新：功能（事件、用户界面）{
变量数据=$（'#sportsort'）。可排序（'serialize'）；
$（#test'）。文本（数据）；
$.post（“actions.php？action=updatesort”、数据、函数（响应）{
$（“#SportsSaveMessage”）.html（响应）；
$（'#sportsavemessage'）.css（“颜色”、“绿色”）；
$（'#sportsavemessage'）.css（“float”，“right”）；
});
}
});
});
函数updateStoreTable（）{
$（'ul#leaguestort'）。可排序({
轴：‘y’，
停止：功能（事件、用户界面）{
var data2=$（'ul#leaguestort'）。可排序（'serialize'）；
console.log（data2）；
$（'测试'）.text（数据2）；
$.post（“actions.php？action=updatesort”，数据2，函数（响应）{
$（“#leaguesavemessage”）.html（响应）；
$（'leaguesavemessage'）.css（“颜色”、“绿色”）；
$（'leaguesavemessage'）.css（“float”，“right”）；
});
}
});
};
功能展示联盟（str）{
如果（str==“”）{
document.getElementById（“leagues”）.innerHTML=“”；
返回；
} 
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
document.getElementById（“leagues”）.innerHTML=xmlhttp.responseText；
updateSortable（）；
}
}
open（“GET”、“GET_leagues.php？q=“+str，true”）；
xmlhttp.send（）；
}

在settings.php正文中，我有以下部分：

<div class="box span6">
                <div style="padding-left: 12px;padding-top:10px;padding-bottom:5px">Choose Sport to view leagues
                    <select style="padding-top: 5px;" onchange="showLeagues(this.value)" >
                    <option>Select a Sport</option>
                    <?php
                        foreach ($conn->query('SELECT * FROM site_settings WHERE setting_name="sports" ORDER BY sort_order') as $sports) {
                        echo '<option value="'.$sports['setting_option'].'">'.$sports['setting_option']."</option>";
                        }
                    ?>
                    </select>
                </div>                      
                <div class="box-header">
                    <h2>List of Events</h2> <span id="leaguesavemessage"></span>                        
                </div>
                <div class="box-content">
                    <div id="leagues"></div>
                </div>                              
            </div>

选择“运动”查看联赛
选择一项运动
两件事：

1.
您的代码容易受到SQL注入的攻击，这是一种严重且经常被利用的安全风险。请在此阅读：

2.
问题可能是因为您只运行了一次
$（“#leaguestort”）.sortable
函数（当页面加载时），并且在运行时没有
#leaguestort
，因此不会发生任何事情。您需要做的是将
$（“#leaguesort”）.sortable
提取到它自己的函数中，然后在每次返回结果时调用该函数：

函数updateSortable（）{
$（'leaguestort'）。可排序({
轴：‘y’，
更新：功能（事件、用户界面）{
变量数据=$（'#leagues'）。可排序（'serialize'）；
$.post（“actions.php？action=leaguesort”），数据，函数（响应）{
$（“#leaguesavemessage”）.html（响应）；
$（'leaguesavemessage'）.css（“颜色”、“绿色”）；
$（'leaguesavemessage'）.css（“float”，“right”）；
});
}
});
}

然后在

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("leagues").innerHTML=xmlhttp.responseText;
      updateSortable(); // ADDED THIS LINE
    }

两件事：

1.
您的代码容易受到SQL注入的攻击，这是一种严重且经常被利用的安全风险。请在此阅读：

2.
问题可能是因为您只运行了一次
$（“#leaguestort”）.sortable
函数（当页面加载时），并且在运行时没有
#leaguestort
，因此不会发生任何事情。您需要做的是将
$（“#leaguesort”）.sortable
提取到它自己的函数中，然后在每次返回结果时调用该函数：

函数updateSortable（）{
$（'leaguestort'）。可排序({
轴：‘y’，
更新：功能（事件、用户界面）{
变量数据=$（'#leagues'）。可排序（'serialize'）；
$.post（“actions.php？action=leaguesort”），数据，函数（响应）{
$（“#leaguesavemessage”）.html（响应）；
$（'leaguesavemessage'）.css（“颜色”、“绿色”）；
$（'leaguesavemessage'）.css（“float”，“right”）；
});
}
});
}

然后在

  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("leagues").innerHTML=xmlhttp.responseText;
      updateSortable(); // ADDED THIS LINE
    }

你好，谢谢你的更新。实际上，我已经为此更改了get_leagues.php：列表现在排序，但不更新。我添加了$（'#test'）.text（数据）；在更新后的var data=$（'$leaguestor'）.sortable（'serialize'））这样我就可以看到应该发送到actions.php的数据，但我没有得到任何东西。序列化数据似乎没有更新。有什么建议吗？很难理解，你能用新代码更新你的问题吗？但我认为你还没有解决sql注入部分。检查这个答案，看看它是如何运行的uld完成：我做了一半，我只需要绑定参数。我知道我忘了一些东西。我一直在使用示例构建它。我将更新我的问题。问题在注意到get_leagues的value=“id_u”和not id=“id_u”后解决，因此它没有看到。简单更改您好，谢谢更新。我“实际上，我已经为此更改了get_leagues.php：列表现在进行排序，但不会更新；在更新后的页面上，var data=$（“$leaguestor”）.sortable（'serialize'），这样我就可以看到应该发送到actions.php的数据，但我没有得到任何信息。序列化数据似乎没有更新。有什么建议吗？这很难理解，你能用新的代码更新你的问题吗？但我认为您还没有解决sql注入部分。检查这个答案，看看应该怎么做：我做了一半，我只需要绑定