2

Здравствуйте!

Я реализовала возможность перетаскивания на сайте с использованием библиотеки jquery.dragsort-0.5.1.min.js, но дело в том, что иногда мне надо обновлять с использованием ajax ту часть страницы, в которой используется перетаскивание и после асинхронного обновления этой части страницы перетаскивание перестает работать, хотя код вставляется правильно, видимо, при обновлении с использованием ajax не срабатывает какая-то функция, которая срабатывает в самом начале при обычной загрузке страницы. При обычной загрузке как самой страницы, так и отдельного php скрипта-слушателя ajax - всё отлично работает. Помогите, пожалуйста, разобраться, как исправить данную ситуацию.

Вот полностью код перетаскивания:

<div id="div_kuzovi">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <ul id="gallery">
    <?php
    if (GetParam('action') <> 'saveorder') {
        $kuzovs = $DS->getAssoc('kuzov', '*', ' order by Poryadok ');
        $list   = array();
        $list2  = array();

        foreach ($kuzovs as $ID => $kuzov) {
            array_push($list, $ID);
            array_push($list2, " <span style=' padding-bottom:0px; font-size : 11px;font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; '> " . $kuzov['Title'] . "   </span>");
        };
        for ($idx = 0; $idx < count($list); $idx += 1) {
            echo "<li data-itemid='" . $idx . "'>";
            echo "<div >" . $list2[$idx] . "";        
            echo "</li>";
        }
    }
    ?>
    </ul>
    <script type="text/javascript" src="/_pages/jquery.dragsort-0.5.1.min.js"></script>
    <script type="text/javascript">
        $("#gallery").dragsort({
            dragSelector: "div",
            dragEnd: saveOrder,
            placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
        });

        function saveOrder() {
            var data = $("#gallery li").map(function () {
                return $(this).data("itemid");
            }).get();
            $.post("/admin/", {
                "ids[]": data
            });

            par_data = data.join('_');
        };

        function saveOrderSP() {
            var data = $("#gallery li").map(function () {
                return $(this).data("itemid");
            }).get();
            $.post("/admin/", {
                "ids[]": data
            });

            par_data = data.join('_');

            $url = "/admin/?page=order&admitem=add_model&action=saveorder&banid=1&par_data=" + par_data;
            window.parent.parent.frames.mainframe.document.location.href = $url;
        };
    </script>
    <div style="clear:both;"></div>
</div>

ajax-обновление реализовано без использования jQuery

<script type="text/javascript">
    function createRequestObject_v_glavnom() {
        if (typeof XMLHttpRequest === 'undefined') {
            XMLHttpRequest = function () {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP.6.0");
                } catch (e) {}
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                } catch (e) {}
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {}
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
                throw new Error("This browser does not support XMLHttpRequest.");
            };
        }
        return new XMLHttpRequest();
    }

    function obnovit_kuzovi() {

        req = new XMLHttpRequest(); //new обязательно - иначе в ие и хроме не пашет
        if (req) {
            var Title_kuzov = document.getElementById('Title_kuzov').value;
            req.open("POST", '/admin/?page=handler_obnovit_kuzovi&title=' + Title_kuzov,
            true); //скрипт к которому обращаемся
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // заголовок в посте это обязательный атрибут
            req.onreadystatechange = processReqChange_obnovit_kuzovi; // обработчик приёма ответа
            req.send('gfgdf=fdfsd'); // значения
        }
    }

    function processReqChange_obnovit_kuzovi() {

        var statusElem = document.getElementById('div_kuzovi_vneshn')
        try {
            if (req.readyState == 4) {
                // для статуса "OK"
                if (req.status == 200) {
                    var nach = req.responseText.indexOf('<!-- nachalo -->');
                    var kon = req.responseText.indexOf('<!--konec-->');
                    alert(req.responseText.substr(nach, kon));
                    statusElem.innerHTML = req.responseText.substr(nach, kon);
                } else {
                    alert("Ne udalos poluchit dannie:\n" + req.statusText);
                }
            }
        } catch (e) {}
    }
</script>

2 ответа 2

2

Ух, гремучая смесь )) Вопрос, который сразу возник, так это почему не использовать Sortable jQuiery UI, а какой-то сторонний плагин? Хотя это к делу не относится.

Могу предположить, что у вас после ajax-запроса происходят изменения в структуре, а именно в блоке с id = "div_kuzovi_vneshn". Этот блок вы не показали, но если он является родителем списка "#gallery", то возможно надо переинициализировать подключение плагина в функции обрабатываемой ajax-ответ:

// ....
statusElem.innerHTML = req.responseText.substr(nach, kon);

$("#gallery").dragsort({
    dragSelector: "div",
    dragEnd: saveOrder,
    placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
});
// ...
10
  • Нет, изменения во внешнем блоке не происходят, это просто тег div и всё. Дальше идет уже div_kuzovi. А как переинициализировать подключение плагина в функции обрабатываемой ajax-ответ, подскажите, пожалуйста?
    – masha2
    13 авг 2012 в 13:37
  • Ой, спасибо, поняла как, но это тоже не помогло.
    – masha2
    13 авг 2012 в 13:42
  • Deonis, спасибо еще раз, но это не помогает, по-моему, после обновления эта функция вообще перестает вызываться или срабатыввать. Код у jquery.dragsort-0.5.1.min.js сложный. Не знаю как проверить, что там происходит с функцией после обновления. Вся структура документа html получается один в один с тем, что было до обновления, но вот яваскрипт из jquery перестает работать.
    – masha2
    13 авг 2012 в 13:52
  • Хм... После обновления, посмотрите сгенерированный код страницы (!не исходный, а именно сгенерированный) и сравните его с кодом, до обновления. Проверьте, будет ли разница в структуре, относящейся к галерее, "до" и "после".
    – Deonis
    13 авг 2012 в 13:53
  • разница есть только в том, что должна была добавить функция, кот. вы советовали инициализировать
    – masha2
    13 авг 2012 в 13:58
1

Дык.. Всё же просто.. Обработчик drag'n'drop навешивается на существующие элементы. После обновления страницы аяксом элементы меняются и на них уже нет обработчика. В любом случае надо переинициализировать drag'n'drop плагин. Либо обновлять кусок страницы вместе с JS, т.е.:

PHP:

ob_start();
?>
<script type='text/javascript'>
    $('#ololo').dragsort();
</script>
<ul id="ololo">
    _тут_данные_
</div>
<?php
echo ob_get_clean();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.