sortable a mousedown událost
- ondrusu
- Člen | 118
Zdravím všechny Nette specialisty.
Do existující galerie obrázků jsem přidal jQuery Sortable.
Volám ho na událost mouseDown, protože nechci aby se to „hejbalo“ když
vezmu za obrázek, ale za určitý element. Problém je v tom, že když
přetáhnu jeden obrázek, tak se odešle ajax, ale na podruhé už ta událost
nezafunguje. Nepíše to ani nic do konzole.
Tady je JS:
$('.fa-arrows').mousedown(function () {
$("div.reorder-photos-list").sortable({
tolerance: 'pointer',
connectWith: ".show_gall_img",
update: function (event, ui) {
var h = [];
$("div.reorder-photos-list .show_gall_img a").each(function () {
console.log($(this).attr('id'));
h.push($(this).attr('id'));
});
//$.get("{link 'selectOrder!'}&move=" + $(ui.item).attr('id') + "&order=" + $(this).sortable('toArray').toString());
$.nette.ajax({
type: 'GET',
url: "?do=renderOrdering",
data: {
gid: gid,
ids: h
},
success: function (data) {
//$("div.reorder-photos-list").disableSelection();
},
error: function (jqXHR, textStatus, errorThrown) {
var text = "An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!<br><br>"
+ "<b>" + jqXHR.statusText + "</b><br>"
+ jqXHR.responseText.substring(0, 360) + " . . . <b>More in console</b>";
dialogMessage(text);
}
});
}
});
});
Presenter
public function renderShow($gid) {
if ($gid == NULL) {
$gid = $this->gid;
}
$this->template->show_gallery_info = $this->database->table('gallery')->where('id = ?', $gid)->fetch();
$this->template->gallery_images = $this->database->query('SELECT * FROM gallery_images WHERE gallery_id = ? ORDER BY archived ASC, visible DESC, position ASC', $this->gid)->fetchAll();
$this->template->images_cnt = count($this->template->gallery_images);
// Zjistit velikost a počet obrázků
$this->template->gid = $this->gid;
if ($this->isAjax()) { // Pokud se jedná o ajax, přerenderujeme galleryList
$this->redrawControl('galleryListShow');
}
}
public function handleRenderOrdering($gid, array $ids) {
if ($this->isAjax()) {
$this->template->gid = $gid;
$count = 1;
foreach ($ids as $id) {
$this->database->query('UPDATE gallery_images SET position = ? WHERE id = ?', $count, $id);
$count++;
}
}
}
V template nebude asi nic zajímavého pouze, jen přidám includy.
<script src="{$basePath}/js/show.gallery.js"></script>
<script src="{$basePath}/js/sortable.js" type="text/javascript"></script>
v souboru sortable.js
zpracovávám to co potřebuji já a v
show.gallery.js
je na začátku
$(function () {
$.nette.init();
$.nette.ext('unique', null); // vypnuti unikatni extenze
$.nette.ext('closeFlashes', {
success: function () {
initialize();
}
});
});
Když přidám do metody handleRenderOrdering
$this->sendPayload();
tak to zafunguje, ale nevím zda je to
čisté řešení.
Poradíte mi prosím co dělám špatně??
Mockrát děkuji.
- Michal Hlávka
- Člen | 190
Když provedeš ajaxový požadavek, překresluješ pak snippet, to má za následek změnu DOMu. Musíš událost mousedown znovu inicializovat.
- ondrusu
- Člen | 118
Tak na konec po pár hodinách experimentování a hledání zafungovalo
následující.
Při document.ready zavolat
$('div.reorder-photos-list').sortable();
$("div.reorder-photos-list").sortable("option", "disabled", true);
$('div.reorder-photos-list').on("mousedown", ".fa-arrows", function () {
sortableShowGallery();
});
To samé zavolat když se odešle ajax
$.nette.ext('closeFlashes', {
success: function () {
$('div.reorder-photos-list').sortable();
$("div.reorder-photos-list").sortable("option", "disabled", true);
$('div.reorder-photos-list').on("mousedown", ".fa-arrows", function () {
sortableShowGallery();
});
}
});
A v javascriptové funkci sortableShowGallery
je:
$("div.reorder-photos-list").sortable("option", "disabled", false);
$("div.reorder-photos-list").sortable({
tolerance: 'pointer',
update: function (event, ui) {
...