Response title
This is preview!
Sortable Connected Lists MySQL Update Problem
in Using jQuery UI
•
10 years ago
Hey everyone, to start off I'm very new to all of this and I've been attempting to teach myself coding for a couple weeks to design a web based app for a project at an internship. I've created a sortable list that exports the positions of each item to a database so upon refresh, they don't change. I ultimately want to have 2 lists that update a database and keep the positions of each item on the lists, but I haven't gotten there yet.
I am currently having trouble with my connecting lists and I think the problem is somewhere in my ID & Class definitions. When it is one way it will allow me to sort items from List B to List A, but not in the reverse. And when I change the a few things around in the ID/Class I can now sort the lists as they should, but the List A which is the current working list that updates to a database, no longer works (items go back to previous positions when the page is refreshed).
I am not knowledgeable enough to know what I should have where and again it's probably a silly problem. Thank you all in advance for your time and help. I've highlighted the comments around the area in question, my code is as follows:
I am currently having trouble with my connecting lists and I think the problem is somewhere in my ID & Class definitions. When it is one way it will allow me to sort items from List B to List A, but not in the reverse. And when I change the a few things around in the ID/Class I can now sort the lists as they should, but the List A which is the current working list that updates to a database, no longer works (items go back to previous positions when the page is refreshed).
I am not knowledgeable enough to know what I should have where and again it's probably a silly problem. Thank you all in advance for your time and help. I've highlighted the comments around the area in question, my code is as follows:
------------------------------
<?php require("db.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B.O.A.T.</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
margin-top: 10px;
float:center;
background:#ddd;
}
ul {
margin: 0;
padding: 0px;
}
#contentWrap {
width: 960px;
margin: 0 auto;
height: auto;
background:#EEE;
}
#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}
#contentLeft {
float: left;
margin:0px;
padding:0px;
width: 960px;
background:#DDD;
}
#contentLeft li {
list-style: none;
background-color:#808080;
color:#fff;
margin-bottom:5px; padding: 0px; float: left; height: 90px; text-align: center; width:120px;
}
#contentLeft li input {
visibility:hidden;
}
/*
#contentLeft li:hover input {
visibility:visible;
}
*/
#contentLeft li:nth-child(n+1):nth-child(-n+6) {
width:155px;
margin-right:5px;
}
#contentLeft li:nth-child(n+7):nth-child(-n+14) {
width:115px;
margin-right:5px;
}
#contentLeft li:nth-child(n+7):nth-child(-n+14), #contentLeft li:nth-child(n+23):nth-child(-n+28) {
float:right;
background-image:url('boatright.png');
background-repeat:no-repeat;
background-position:center;
}
#contentLeft li:nth-child(n+1):nth-child(-n+6), #contentLeft li:nth-child(n+15):nth-child(-n+22), #contentLeft li:nth-child(n+29):nth-child(-n+33) {
background-image:url('boat.png');
background-repeat:no-repeat;
background-position:center;
}
#contentLeft li:nth-child(n+15):nth-child(-n+22), #contentLeft li:nth-child(n+23):nth-child(-n+26) {
width:115px;
margin-right:5px;
}
#contentLeft li:nth-child(n+27):nth-child(-n+28) {
width:235px;
margin-right:5px;
}
#contentLeft li:nth-child(n+29):nth-child(-n+33) {
width:187px;
margin-right:5px;
}
#contentLeft li:nth-child(n+13):nth-child(-n+14)
{
background-image:url('water1.jpg');
color:#00ffff;
}
#contentLeft li:nth-child(20)
{
background-image:url('boat.png');
background-repeat:no-repeat;
background-position:center;
}
#contentRight {
float: right;
width: 260px;
padding:10px;
margin-top:10px;
display:none;
background-color:#336600;
color:#FFFFFF;
}
#sortable1, #sortable2 { list-style: none; margin: 0; padding: 0 0 2.5em; float: right; margin-right: 10px; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(document).ready(function()
{
$(function()
{
$("#insert-product").focus();
$("#contentLeft ul").sortable(
{
placeholder: "ui-state-highlight", opacity: 0.6, cursor: 'move',
update: function()
{
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("updateDB.php", order, function(theResponse)
{
$("#contentRight").html(theResponse);
});
}
});
});
});
/* THIS ALLOWS 2ND LIST TO BE DRAGGED TO the FIRST, BUT IT WILL NOT DO IT IN REVERSE? */
$(function() {
$( "#sortable1, #sortable2, #contentLeft" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
</head>
<body>
<div id="contentWrap">
<div id="contentTop">
</div>
<!-- When this following part is " id="contentLeft" ", the items in the list called contentLeft will update to the database and save when it is refreshed.
When it is changed to " class="contentLeft" ", now all lists can be sorted BUT now the list contentLeft will not save to the database. -->
<div id="contentLeft">
<!-- When this id is changed, it also alters in a similar way as described above -->
<ul id="contentLeft" class="connectedSortable">
<?php
$query = "SELECT * FROM records WHERE recordListingID<=33 AND recordListingID>0 ORDER BY recordListingID DESC LIMIT 33";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
?>
<li id="recordsArray_<?php echo $row['recordID']; ?>">
<?php echo "#" . $row['recordListingID'] . "<BR>" . $row['recordText']; ?>
<br/>
</li>
<?php } ?>
</ul>
</div>
<div class="connectedSortable">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
<form method="post" action="submit.php">
<input name="value" type="text" placeholder="value to insert" id="insert-product" />
<input name="insert" type="submit" />
</form>
</div>
</body>
</html>
1