Hello à tous,
Voilà ce que j'essai de faire à l'aide de jquery UI :
Pouvoir déplacer un élément dans un tabs (dropp).
Selon l'exemple suivant :
http://jqueryui.com/demos/sortable/#connect-lists-through-tabs
Aucun soucis pour faire ca, quoi de plus simple
Maintenant le problème c'est que mes "tabs" affiche des pages par chargement ajax.
Et donc tant qu'elle ne sont pas chargé (après avoir cliquer dessus) il n'y a aucun contenu.
Et la fonction drop ne trouve pas l'élément (puisqu'il n'est pas chargé, c'est normal)
Ce que j'ai fait alors c'est que j'ai placé ma fonction drop dans l'ajax après l'évenement "complete" ou "success". Mais cela ne change absolument rien
.
Voici donc le code de test :
Page principal : tabs.html (charge en ajax le contenu des 2 pages suivantes)
tabs1.html (chargé en ajax)
tabs2.html (aussi chargé en ajax)
Donc enfait il faudrait faire le script seulement plus tard.
Si vous avez une idée.
Merci d'avance
Voilà ce que j'essai de faire à l'aide de jquery UI :
Pouvoir déplacer un élément dans un tabs (dropp).
Selon l'exemple suivant :
http://jqueryui.com/demos/sortable/#connect-lists-through-tabs
Aucun soucis pour faire ca, quoi de plus simple
Maintenant le problème c'est que mes "tabs" affiche des pages par chargement ajax.
Et donc tant qu'elle ne sont pas chargé (après avoir cliquer dessus) il n'y a aucun contenu.
Et la fonction drop ne trouve pas l'élément (puisqu'il n'est pas chargé, c'est normal)
Ce que j'ai fait alors c'est que j'ai placé ma fonction drop dans l'ajax après l'évenement "complete" ou "success". Mais cela ne change absolument rien
.Voici donc le code de test :
Page principal : tabs.html (charge en ajax le contenu des 2 pages suivantes)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
var $tabs = $("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
},
complete: function() {
$("#sortable1 tbody.content, #sortable2 tbody.content").sortable().disableSelection();
var $tab_items = $("ul:first li", $tabs).droppable({
accept: ".connectedSortable tbody.content tr",
hoverClass: "ui-state-hover",
drop: function(ev, ui) {
var $item = $(this);
var $list = $($item.find('a').attr('name')).find('.content');
ui.draggable.hide('slow', function() {
$tabs.tabs('select', $tab_items.index($item)); // va aller sur le tabs ou on a droppé
$(this).appendTo($list).show('slow'); // .appendTo = ajoute les éléments dragg dans le tabs dropp choisi / .show va affiche l'element qu'on a droppé
});
}
});
}
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="tabs1.html" name="sortable1">Nunc tincidunt</a></li>
<li><a href="tabs2.html" name="sortable2">Proin dolor</a></li>
</ul>
</div>
</body>tabs1.html (chargé en ajax)
<table id="sortable1" class="connectedSortable ui-helper-reset">
<tbody class="content">
<tr><td>Item A</td></tr>
<tr><td>Item B</td></tr>
<tr><td>Item C</td></tr>
<tr><td>Item D</td></tr>
<tr><td>Item E</td></tr>
</tbody>
</table>tabs2.html (aussi chargé en ajax)
<table id="sortable2" class="connectedSortable ui-helper-reset">
<tbody class="content">
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Item 5</td></tr>
</tbody>
</table>Donc enfait il faudrait faire le script seulement plus tard.
Si vous avez une idée.
Merci d'avance