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!
'; $i = 1; foreach ($leagues as $league_new) { echo '- '.$league_new['setting_option_value'].'
';
$i++;
}
echo '
'; ?> The list now sorts but does not update. – DexDeadly Dec 16 '15 at 00:55