Ajax beginner – ukladanie update na pozadi

tomolas

Zdravim,

s Nette uz mam nejake skusenosti, ale s Ajaxom a jQuery prilis nie.
Chcel by som urobit velmi jednoduchu vec.

Mam obrazky v <ul> zozname, ktory som spravil pomocou jQuery „sortable“. http://jqueryui.com/demos/sortable/
Chcel by som dosiahnut to, aby ked niekto zmeni poradie obrazkov (presunie potiahnutim), sa toto nove poradie ulozilo do databazy.

Z mojich doterajsich skusenosti by som to riesil nejak tak, ze by som zavolal nieco v zmysle

<script type="text/javascript">
$( ".selector" ).sortable({
	update: function(event, ui) {
		var order = $('#zoznam_obrazkov').sortable('serialize');
		$("#zoznam_obrazkov").load("script_ktory_to_ulozi.php?"+order);
	}
});
</script>

Otazka teda znie, ako na toto v Nette? Alebo: Ako javascriptom zavolat PicturesPresenter a v nom funkciu saveOrder($nove-poradie)?

Nie som si isty, ci chapem principu, ako na to.

Patrik Votoček

Představ si jak by jsi to řešil bez AJAXu. Asi by jsi měl seznam těch obrázků s odkazy „posunout vpřed“ a „posunout vzad“ které by vedly na nějaký signal . No a pak si polož stejnou otázku jakou jsi zde teď položil… :-)

tomolas

Nooo,
tak som na to prisiel.

Prikladam aj riesenie, ak by to niekoho zaujimalo.

Template:

<script type="text/javascript">
	$(function() {
		$("#sortable").sortable({
			revert: true,
			handle: '.handle',
			update : function () {
				$.get({link saveOrder!}, {'order': $("#sortable").sortable("toArray")});
				//toto je najpodstatnejsie -- vola sa funkcia handleSaveOrder v Presenteri,
				//ako parameter sa posiela premenna z javascriptu
			}
		});
		$("#draggable").draggable({
			connectToSortable: '#sortable',
			helper: 'clone',
			revert: 'invalid'
		});
		$("ul, li").disableSelection();
	});
</script>

… stale template

		{snippet:pictures}
		<ul class="imglist" id="sortable">
		{foreach $pictures as $picture}
			<li id="{$picture['picture_id']}" >
				<img src="{$images_path}thumb_{$picture['file_name']}" class="handle"/>
			</li>
		{/foreach}
		</ul>
		{/snippet}

Presenter:

<?php
	public function handleSaveOrder(array $order)
	{
		//vola model, ktory to vyriesi v databaze podla $order
	}
?>

Dufam, ze to niekomu s podobnym problemom pomoze.