Cor Cinza

O código do nosso index.php ficou mais ou menos assim com todas as mudanças da primeira parte deste tutorial:

require_once('database.php');
require_once('movies.php');

if (!dbConnect()) {
echo 'Error connecting to database';
exit;
}

$movies = getMovies();
?>

<script src="jquery-1.2.2.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.mouse.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.draggable.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.droppable.js" type="text/javascript"></script>
<script src="jquery.ui-1.0/ui.sortable.js" type="text/javascript"></script>
<script type="text/javascript"> function sortList() { $(\\'#sortable_switch\\').click(function() { var list = $(\\'#movies_list\\'); if ($(this).hasClass(\\'ordering\\')) { list.sortableDestroy(); $(this).removeClass(\\'ordering\\'); $(\\'.destroy\\').remove(); } else { list.children(\\'li\\').prepend(\\'<span class="destroy">ordenando: </span> \\'); $(this).addClass(\\'ordering\\'); list.sortable({}); }

return false; }) } $(document).ready(function() { sortList(); }) </script>
<h1>phpRiot Sortable Lists</h1>
<a href="#" id="sortable_switch">Ordenar</a>
<ul id="movies_list">  $title) { ?&amp;gt;
<li></li>
</ul>
Agora é hora de fazer o nosso javascript trabalhar com o servidor para salvarmos a ordem dos elementos no banco de dados.
<h2>Colocando um pouco de AJAX</h2>
Vamos ter que fazer uma modificação no corpo do nosso arquivo HTML. Vamos alterar um pouco o código do elemento dentro do loop do HTML desta forma:

[sourcecode language='php']
<ul id="movies_list">  $title) { ?&amp;gt;
<li id="&amp;lt;?= $movie_id ?&amp;gt;"></li>
</ul>

Tudo o que fizemos foi adicionar o atributo id dentro do nosso elemento de lista contendo o id da entrada do dado no BD. Agora vamos voltar ao nosso código Javascript e adicionar o que precisamos pra fazer o ajax funcionar, primeiro criamos uma função que gere uma lista dos id’s dos elementos na ordem atual:

function serializeLists(list) {
var order = new Array;
list.find('li').each(function() {
order.push($(this).attr('id'));
});
return order.join(',');
}

Esta função pega uma determinada lista, cria um array e vai inserindo nele os id’s de cada elemento da lista de forma sucessiva. No final ele retorna um string com todos os id’s reagrupados e separados por vírgulas.

Agora tudo o que precisamos fazer é modificar a nossa função sortList() adicionando algumas linhas extras, veja:

function sortList() {
$('#sortable_switch').click(function() {
var list = $('#movies_list');
if ($(this).hasClass('ordering')) {
list.sortableDestroy();
$(this).removeClass('ordering');
$('.destroy').remove();
$.post('order.php', {order: serializeLists(list)})
} else {
list.children('li').prepend('<span class="destroy">ordenando: </span> ');
$(this).addClass('ordering');
list.sortable({});
}

return false;
})
}

Tudo o que fizemos foi adicionar uma linha que irá gerar o pedido Ajax ao servidor ($.post()) num arquivo chamado order.php. Também enviamos a string gerada pela função criada anteriormente como parâmetro do pedido.

Agora o código do arquivo php é o seguinte:

include('database.php');

if (!dbConnect()) {
echo 'Error connecting to database';
exit;
}

$order = explode(",", $_POST['order']);

$rank = 1;

foreach($order as $o) {
$query = sprintf('update movies set ranking = %d where movie_id = %d', $rank, $o);
echo $query;
if(mysql_query($query)) { echo ' - sucesso
'; } else { echo ' - fracasso
'; }
$rank++;
}

?>

Ele tem uma série de echo’s que na verdade não vão aparecer, mas que foram colocados ali a título de teste. Básicamente, o que este script faz é se conectar com o nosso banco de dados e receber o post do Ajax, que no caso é a string com os id’s dos elementos. Depois disso ele gera, novamente, um array com os id’s e cria um loop que vai atualizar o banco de dados de acordo com a posição do elemento. Ao final de cada loop é adicionado + 1 à variável $rank, determinando a posição do próximo elemento. Simples né?

Enfim, está pronto o nosso programinha de ordenar listas! Não é tão difícil assim, e talvez exista até um jeito ainda mais fácil, mas este foi o jeito que eu usei pra solucionar o meu problema quando não encontrava um caminho melhor de fazer as coisas. Acabou que esta foi uma solução limpa, rápida e muito eficiente. É claro, existe muito mais coisas que eu poderia colocar aqui pra deixar o visual de tudo mais legal, mas eu queria apresentar só o básico. A documentação do jQuery é muito boa e eles contam com uma comunidade muito bacana em seu canal no IRC da Freenode (#jQuery). Se você tiver alguma dúvida, crítica ou sugestão, os comentários estão abertos ok?

Um abraço e até a próxima!