sortable a mousedown událost

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
ondrusu
Člen | 118
+
0
-

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
+
0
-

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
+
0
-

aha, zajímavé a jak to mohu provést?
Zkoušel jsem to hledat ale bez výsledku.

ondrusu
Člen | 118
+
0
-

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) {
...