[eluser]Jbeasley6651[/eluser]
Got it! Thanks! To show how thankful I am heres a little treat for you.
Have you ever wanted to drag and drop sort a list item?
If anyone wants to do Ajax sortable list item (so you can drag and drop the list items to change order) and have it save to a database automatically upon dropping without refreshing the page in Code Igniter you can download the following...
Screen Shots
Before Drag
<a href="http://img20.imageshack.us/img20/7101/picture1lfe.png">http://img20.imageshack.us/img20/7101/picture1lfe.png</a>
During Drag
<a href="http://img33.imageshack.us/img33/8241/picture2pxe.png">http://img33.imageshack.us/img33/8241/picture2pxe.png</a>
After Drop (notice console data in firebug)
<a href="http://img30.imageshack.us/img30/1791/picture3wxi.png">http://img30.imageshack.us/img30/1791/picture3wxi.png</a>
Controller:
Code:
// Boxes
$this->db->order_by('boxListingID','ASC');
$data['getbox'] = $this->db->get('boxes');
Code:
function updateBOX()
{
if (empty($_POST)) { return false; }
$updateRecordsArray = $_POST['recordsArray'];
$listingCounter = 1;
foreach ($updateRecordsArray as $listingCounter=>$recordIDValue) {
$this->db->set('boxListingID',$listingCounter+1)->where('boxID',$recordIDValue)->update('boxes');
}
}
CSS:
Code:
ul {
margin: 0;
}
#contentWrap {
width: 700px;
margin: 0 auto;
height: auto;
overflow: hidden;
}
#contentTop {
width: 600px;
padding: 10px;
margin-left: 30px;
}
#contentLeft {
float: left;
width: 400px;
}
#contentLeft li {
list-style: none;
margin: 0 0 4px 0;
padding: 10px;
background-color:#00CCCC;
border: #CCCCCC solid 1px;
color:#fff;
}
JS/ajax- (you will need jquery draggable, droppable, sortable, selectable)
Code:
[removed]
$(document).ready(function(){
$(function() {
$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize");
$.post("home/updateBOX", order, function(theResponse){
$("#contentRight").html(theResponse);
});
}
});
});
});
[removed]
View:
Code:
<div id="contentLeft">
<ul>
<?php foreach($getbox->result() as $box) :?>
<li id="recordsArray_<?php echo $box->boxID ?>"><?php echo $box->boxID . ". " . $box->boxID . $box->boxText ?></li>
<?php endforeach; ?>
</ul>
</div>
mysql dump:
Code:
CREATE TABLE `boxes` (
`boxID` int(11) NOT NULL auto_increment,
`boxText` varchar(255) default NULL,
`boxListingID` int(11) default NULL,
PRIMARY KEY (`boxID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `boxes`
--
INSERT INTO `boxes` VALUES(1, 'Once dropped, an Ajax query is activated', 3);
INSERT INTO `boxes` VALUES(2, 'Dragging changes the opacity of the item', 2);
INSERT INTO `boxes` VALUES(3, 'Returned array can be found at the right', 1);
INSERT INTO `boxes` VALUES(4, 'It is very very easy', 4);
Please let me know if this was helpful.
Thanks,
Joel Beasley