通過Ajax從一個回顯列表中排序jQuery列表

您好我目前正在嘗試使用基於Ajax返回結果返回的jQuery創建一個可排序列表。這是我的。通過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>'; 

?>

下拉作品和我的「M得到正確的物品回到了我的列表，但是我不能再拖累而這些項目進行排序。我試圖移動腳本分揀到get_legaues文件無濟於事。我嘗試切換.ready爲leaguesort刷新和更改，但也無濟於事。任何人都指出我正確的方向，讓我的工作。正如你可以在我的帖子中看到我也希望這保持更新數據庫立即if ！可能非常感謝幫助

來源

2015-12-15 DexDeadly

兩件事情：

您的代碼容易受到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 
    }

來源

2015-12-15 22:50:15 vikeri

您好感謝您的更新。我實際上改變了這個get_leagues.php： <？php include「header.php」; $ q = $ _GET ['q']; $ query =「SELECT * FROM site_settings WHERE setting_name ='leagues 'AND setting_option ='「。$ q。」'「; $ stmt = $ conn-> prepare（$ query）; $ stmt-> execute（）; $ leagues = $ stmt-> fetchAll（）; echo'

'。$ league_new ['setting_option_value']'。'

'; > 列表現在各種各樣，但不更新 – DexDeadly

我添加了一個$（' ＃測試「）文本（數據）;在在var data = $（'$ leaguesort'）。sortable（'serialize'）後更新，以便我可以看到它應該發送到actions.php的數據，但我沒有得到任何東西。似乎沒有更新，有什麼建議嗎？ – DexDeadly

這很難理解，你可以用新代碼更新你的問題嗎？但我認爲你沒有解決sql注入部分。檢查這個答案，看看它應該如何完成：http://stackoverflow.com/a/60496/1836121 – vikeri

通過Ajax從一個回顯列表中排序jQuery列表

回答

相關問題