Search jQuery

jQuery Forum

Screen name:
drewkpope

drewkpope's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Sortable Connected Lists MySQL Update Problem
[0Replies]
- 30-Jan-2013 12:35 PM
- Forum: Using jQuery UI
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:

------------------------------

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



<div id="contentLeft">


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

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend