Sortable jQuery list from an echoed list via Ajax

Question

Hello I am currently trying to create a sortable list using jQuery that is returned based off of results returned from an Ajax. Here is what I have.

On my settings.php page I have the following in my <head> tags:

<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:

<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. 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. However even though I've applied the jQuery sortable tag these items do not let drag and drop them at all. Here is the get_leagues.php file.

<?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!

Answer 1

Two things:

1. Your code is vulnerable to SQL-injections, a severe and commonly exploited security risk. Read up on it here: 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. 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:

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
    }

Sortable jQuery list from an echoed list via Ajax

Question

1 answers

solution1
0 2015-12-15 22:50:15

Sortable jQuery list from an echoed list via Ajax

Question

1 answers

solution1 0 2015-12-15 22:50:15

solution1
0 2015-12-15 22:50:15