Update Database Upon Change (Ajax - jQuery)

TRI0N · January 15, 2013

Okay here is what I have in the works. What I want to achieve is the ability to update the order of items in a database upon change and if an item is moved from one tab to another it will update as well.

<?php
include ('global.php') ;
?>
<!doctype html>

<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>IT WHITEBOARD</title>
   <link rel="stylesheet" href="css/jquery-ui.css" />
   <script src="jquery-1.8.3.js"></script>
   <script src="jquery-ui.js"></script>
   <style>
   #sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 100%; }
   </style>
   <script>
   $(function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4" ).sortable().disableSelection();

    var $tabs = $( "#tabs" ).tabs();

    var $tab_items = $( "ul:first li", $tabs ).droppable({
	    accept: ".connectedSortable li",
	    hoverClass: "ui-state-hover",
	    drop: function( event, ui ) {
		    var $item = $( this );
		    var $list = $( $item.find( "a" ).attr( "href" ) )
			    .find( ".connectedSortable" );

		    ui.draggable.hide( "slow", function() {
			    $tabs.tabs( "select", $tab_items.index( $item ) );
			    $( this ).appendTo( $list ).show( "slow" );
		    });
	    }
    });
   });
   </script>
</head>
<body>

<div id="tabs">
   <ul>
    <li><a href="#tabs-1">Emergency Tasks</a></li>
    <li><a href="#tabs-2">Priority Tasks</a></li>
    <li><a href="#tabs-3">Issues List</a></li>
    <li><a href="#tabs-4">Completed Tasks</a></li>
   </ul>
   <div id="tabs-1">
    <ul id="sortable1" class="connectedSortable ui-helper-reset">
<?php
// Database Connection
mysql_connect("$dbhost","$dbuser","$dbpasswd") ;
// Database Selection
mysql_select_db("$dbname") ;
// Validate Connection
$result1 = mysql_query("SELECT * FROM tasks WHERE priority = 'Emergency' ORDER BY order_no ASC") ;
while($row = mysql_fetch_array($result1)) {
$job_name = $row['job_name'] ;
echo '<li class="ui-state-default"><a href="/">'.$job_name.'</a></li>' ;
}
// Close Query
mysql_close($result1) ;
?>
    </ul>
   </div>
   <div id="tabs-2">
    <ul id="sortable2" class="connectedSortable ui-helper-reset">
<?php
// Database Connection
mysql_connect("$dbhost","$dbuser","$dbpasswd") ;
// Database Selection
mysql_select_db("$dbname") ;
// Validate Connection
$result2 = mysql_query("SELECT * FROM tasks WHERE priority = 'Priority' ORDER BY order_no ASC") ;
while($row = mysql_fetch_array($result2)) {
$job_name = $row['job_name'] ;
echo '<li class="ui-state-default"><a href="/">'.$job_name.'</a></li>' ;
}
// Close Query
mysql_close($result2) ;
?>
    </ul>
   </div>
   <div id="tabs-3">
    <ul id="sortable3" class="connectedSortable ui-helper-reset">
<?php
// Database Connection
mysql_connect("$dbhost","$dbuser","$dbpasswd") ;
// Database Selection
mysql_select_db("$dbname") ;
// Validate Connection
$result3 = mysql_query("SELECT * FROM tasks WHERE priority = 'Issues' ORDER BY order_no ASC") ;
while($row = mysql_fetch_array($result3)) {
$job_name = $row['job_name'] ;
echo '<li class="ui-state-default"><a href="/">'.$job_name.'</a></li>' ;
}
// Close Query
mysql_close($result3) ;
?>
    </ul>
   </div>
   <div id="tabs-4">
    <ul id="sortable4" class="connectedSortable ui-helper-reset">
<?php
// Database Connection
mysql_connect("$dbhost","$dbuser","$dbpasswd") ;
// Database Selection
mysql_select_db("$dbname") ;
// Validate Connection
$result4 = mysql_query("SELECT * FROM tasks WHERE priority = 'Completed' ORDER BY order_no ASC") ;
while($row = mysql_fetch_array($result4)) {
$job_name = $row['job_name'] ;
echo '<li class="ui-state-default"><a href="/">'.$job_name.'</a></li>' ;
}
// Close Query
mysql_close($result4) ;
?>
    </ul>
   </div>
</div>

</body>
</html>

I have also attached the CSS file if needed. All other .js files are standard jQuery Libary.

Sign In

Update Database Upon Change (Ajax - jQuery)

Recommended Posts

TRI0N

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information