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