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

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 sortable标签，这些项目也完全不允许拖放。 这是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 个解决方案

解决方案1
0 2015-12-15 22:50:15

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

问题描述

1 个解决方案

解决方案1 0 2015-12-15 22:50:15

解决方案1
0 2015-12-15 22:50:15