Здравствуйте!
Я реализовала возможность перетаскивания на сайте с использованием библиотеки 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>