[jQuery] load() and sortable()

Wed, 29 Oct 2008 09:38:36 -0700 

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

</body>
</html>

Reply via email to