Question

您好我正在尝试使用基于Ajax返回的结果返回的jQuery创建可排序列表。这就是我所拥有的。

在我的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文件无济于事。我尝试切换.ready为联赛刷新和改变但也无济于事。有人指出我正确的方向让这个工作。正如您在我的帖子中所看到的，我也希望如果可能的话立即更新数据库。非常感谢帮助！

Answer 1

两件事：

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

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

1 个答案: