[jQuery] load() and sortable()
Hi everybody,
I can't load content from a page and use sortable afterwards !
The problem lies in the 'afficher_rubriques' function.
When content is loaded (unordered list <ul></ul> with id="rubriques")
I whish to use sortable. But nothing happens. I have to use my
function sortable with a click action on a button to enable.
How should I do ?
Here's my code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-
latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/
latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/
latest/ui/ui.sortable.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
afficher_rubriques();
});
function modifier_rubrique_ordre() {
document.form1.ids.value = $('#rubriques').sortable('toArray');
$.post("modifier_rubrique_ordre.php", { ids:
document.form1.ids.value });
}
function supprimer_rubrique(id) {
if(confirm('Etes-vous s�r(e) ?')) {
$.post("supprimer_rubrique.php", { id: id });
afficher_rubriques();
afficher_message('Rubrique supprim�e.');
}
}
function afficher_rubriques() {
$("#zone_rubrique").load("afficher_rubrique.php");
$("#rubriques").sortable({});
}
function ajouter_rubrique() {
var nouvelle_rubrique = $("#nouvelle_rubrique").val();
if(nouvelle_rubrique == '') { afficher_message('Vous devez d\'abord
indiquer un nom � la nouvelle rubrique.'); }
else {
$("#nouvelle_rubrique").val('');
$.post("ajouter_rubrique.php", { nouvelle_rubrique:
nouvelle_rubrique });
afficher_rubriques();
afficher_message('Nouvelle rubrique ajout�e.');
}
}
function afficher_message(text) {
$("#info").html(text);
$("#info").fadeIn("slow");
$("#info").fadeOut("slow");
}
function sortable() {
$("#rubriques").sortable({});
afficher_message('Sortable activ�');
}
function afficher_ordre() {
alert($("#rubriques").sortable('toArray'));
}
-->
</script>
<link href="admin.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="info_message"><div id="info" style="display: none;"></div></
div>
<div id="menu">
<input name="nouvelle_rubrique" id="nouvelle_rubrique" type="text"
value=""><input name="ajouter" type="button" value="Ajouter"
onClick="ajouter_rubrique();" id="ajouter">
<input type="button" name="button" id="button" value="Sortable"
onClick="sortable();">
<input type="button" name="button" id="button" value="Ordre"
onClick="afficher_ordre();">
</div>
<div id="zone_rubrique"></div>
</body>
</html>