Skip to content

Instantly share code, notes, and snippets.

@Cengizism

Cengizism/sortable_table_rows.html

Created November 16, 2013 20:30
Show Gist options
  • Save Cengizism/e36c53df0cde6ac113e3 to your computer and use it in GitHub Desktop.
Save Cengizism/e36c53df0cde6ac113e3 to your computer and use it in GitHub Desktop.
Download ZIP
sortable_table_rows.html
Raw
sortable_table_rows.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en">
<head>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Navigation Order</title>
<style type="text/css">
form {
width: 50%;
margin: 0 auto;
}
fieldset {
background: #555555;
padding: 1em;
}
legend {
border: 1px #513939 solid;
background: #FAFAFA;
}
label {
position: absolute;
margin-left: -999em;
}
ol {
list-style: none;
position: relative;
}
body {
font: 100% serif;
}
ol li {
border: 1px #FFF solid;
background: #FAFAFA;
padding: 0.7em;
}
ol li:hover {
border: 1px #513939 solid;
}
input[type='text'] {
width: 2em;
text-align: center;
position: absolute;
left: 40%;
}
</style>
<script type="text/javascript" src="navigation-3_files/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script src="navigation-3_files/jquery.js" type="text/javascript"></script>
<script src="navigation-3_files/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input').hide();
$('ol').sortable({
items: 'li',
update: function(event, ui) {
//Convert the ordered list into an array
var new_order = $('ol').sortable('toArray');
//Loop through the array and assign the input
//that matches the li id the new position value
$.each(new_order, function(i, element) {
$('input[name=' + element + ']').attr('value', i + 1);
});
//Submit the form via ajax
$.post("save_order.php", {
'new_order': $('form').serialize()
})
}
});
});
</script>
</head>
<body style="cursor: auto;">
<div id="container">
<form action="save_order.php" method="post">
<fieldset>
<legend>Order of Navigation</legend>
<ol class="ui-sortable">
<li class="" style="" id="homepage-12">Homepage
<label for="menu-id-12">Change the order for Homepage</label>
<input style="display: none;" name="homepage-12" id="menu-id-12" value="1" type="text">
</li>
<li class="" style="" id="about-16">About Us
<label for="menu-id-16">Change the order for About Us</label>
<input style="display: none;" name="about-16" id="menu-id-16" value="3" type="text">
</li>
<li class="" style="" id="latest-14">Latest News
<label for="menu-id-14">Change the order for Latest News</label>
<input style="display: none;" name="latest-14" id="menu-id-14" value="4" type="text">
</li>
<li class="" style="" id="contact-23">Contact Us
<label for="menu-id-23">Change the order for Contact Us</label>
<input style="display: none;" name="contact-23" id="menu-id-23" value="2" type="text">
</li>
</ol>
</fieldset>
<p>
<input style="display: none;" value="Save new order" type="submit">
</p>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment