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

Question

Hello I am currently trying to create a sortable list using jQuery that is returned based off of results returned from an Ajax. 您好，我目前正在尝试使用基于Ajax返回结果返回的jQuery创建可排序列表。 Here is what I have. 这就是我所拥有的。

On my settings.php page I have the following in my <head> tags: 在我的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>

In the settings.php body I have the following section: 在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>

As you can see I have a div section with a drop down box. 如您所见，我有一个带下拉框的div部分。 Once I select from this drop down box the value is sent to the get_leagues.php page and returns me some items in a list format. 从下拉框中选择后，该值将发送到get_leagues.php页面，并以列表格式返回一些项目。 However even though I've applied the jQuery sortable tag these items do not let drag and drop them at all. 但是，即使我应用了jQuery sortable标签，这些项目也完全不允许拖放。 Here is the get_leagues.php file. 这是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>';

?>

The drop down works and I"m getting the correct items returned to my list, however I can't drag and sort these items. I tried moving the script for the sorting to the get_legaues file to no avail. I tried switching .ready for the leaguesort to refresh and change but also to no avail. Anyone point me to the right direction of getting this to work. As you can see in my post I also want this to stay updating the database immediately if possible. Greatly appreciate the help! 下拉列表有效，我将正确的项目返回到列表中，但是我无法对这些项目进行拖动和排序。我尝试将用于排序的脚本移动到get_legaues文件，但无济于事。我尝试将.ready切换为刷新和更改联赛，但无济于事。有人指出我要使其正确工作的正确方向。正如您在我的帖子中所看到的，我也希望它能尽可能保持即时更新数据库，非常感谢您的帮助！

Answer 1

Two things: 两件事情：

1. Your code is vulnerable to SQL-injections, a severe and commonly exploited security risk. 1.您的代码容易受到SQL注入的攻击，这是一种严重且通常被利用的安全风险。 Read up on it here: https://www.owasp.org/index.php/SQL_Injection 在这里阅读： https : //www.owasp.org/index.php/SQL_Injection

2. The the issue probably is due to the fact that you only run the $('#leaguesort').sortable function once (when the page loads) and when you run that there is no #leaguesort , so nothing will happen. 2.问题可能是由于您只运行一次$('#leaguesort').sortable函数（页面加载时），而当您运行时没有#leaguesort ，因此不会发生任何事情。 What you would have to do is to extract $('#leaguesort').sortable into its own function, that you then call each time you get your results back: 您需要做的是将$('#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");
            });
        }
    });
}

Then in 然后在

  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