可通过Ajax从回显列表中排序jQuery列表

Sortable jQuery list from an echoed list via Ajax

本文关键字：列表 jQuery 排序 Ajax 可通过      更新时间：2023-09-26

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

在我的settings.php页面上，我的<head>标签中有以下内容：

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

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

正如您所看到的，我有一个带有下拉框的div部分。一旦我从这个下拉框中选择，值就会被发送到get_leagues.php页面，并以列表格式返回一些项目。然而，尽管我已经应用了jQuery可排序标记，但这些项目根本不允许拖放它们。这是get_leagues.php文件。

<?php 
include "header.php";
$query = "SELECT * FROM site_settings WHERE setting_name ='leagues' AND setting_option=:sport";
$stmt = $conn->prepare($query);
$stmt->bindParam(":sport", $_GET['q']);
$stmt->execute();
$leagues = $stmt->fetchAll();
echo '<ul class="dashboard-list metro" id="leaguesort">';
$i = 1;
foreach ($leagues as $league_new) {
echo '<li value="id_'.$league_new['id'].'"><i class="icon-caret-right"></i>'.$league_new['setting_option_value'].'</li>';
$i++;
}
echo '</ul>';
?>

下降有效，我"我正在将正确的项目返回到我的列表中，但我无法拖动和排序这些项目。我尝试将排序脚本移动到get_legaues文件，但没有成功。我尝试切换。为联盟排序刷新和更改做好了准备，但也没有成功。任何人都为我指明了正确的工作方向。正如你在我的帖子中看到的，我也希望这能继续更新数据库。"e如果可能的话，立即。非常感谢您的帮助！

两件事：

1.您的代码容易受到SQL注入的攻击，这是一种严重且经常被利用的安全风险。请在此处阅读：https://www.owasp.org/index.php/SQL_Injection

2.这个问题可能是由于您只运行$('#leaguesort').sortable函数一次（当页面加载时），而当您运行时没有#leaguesort，所以什么都不会发生。你要做的是将$('#leaguesort').sortable提取到它自己的函数中，然后每次得到结果时都调用它：

function updateSortable() {
    $('#leaguesort').sortable({
        axis: 'y',
        update: function(event, ui) {
            var data = $('#leagues').sortable('serialize');
            $.post("actions.php?action=leaguesort", data, function(theResponse) {
                $("#leaguesavemessage").html(theResponse);
                $('#leaguesavemessage').css("color", "green");
                $('#leaguesavemessage').css("float", "right");
            });
        }
    });
}

然后在中

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