Hello!

I implemented the ability to drag and drop on the site using the jquery.dragsort-0.5.1.min.js library, but the fact is that sometimes I need to update that part of the page that uses drag and drop and after the asynchronous update of this part of the page, drag and drop stops working, although the code is inserted correctly, apparently, when updating with the use of ajax, some function does not work, which works at the very beginning when the page loads normally. With the usual loading of both the page itself and the individual php ajax listener script, everything works fine. Please help me figure out how to fix this situation.

Here is the complete drag code:

<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 update implemented without 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 answers 2

    Wow, explosive mixture)) The question that immediately arose was why not to use Sortable jQuiery UI , and some third-party plugin? Although this is irrelevant.

    I can assume that you have a change in the structure after the ajax request, namely in the block with id = "div_kuzovi_vneshn" . You did not show this block, but if it is the parent of the " #gallery " list, then you may need to reinitialize the plug-in connection in the function of the ajax-response being processed:

     // .... statusElem.innerHTML = req.responseText.substr(nach, kon); $("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" }); // ...
    • No, changes in the external block do not occur, it's just a div tag and that's it. Next is already div_kuzovi. And how to reinitialize the plug-in connection in the function of the processed ajax-answer, tell me please? - masha2
    • Oh, thanks, I understood how, but it did not help either. - masha2
    • Deonis, thanks again, but this does not help, in my opinion, after the update, this function stops being called or triggered altogether. The jquery.dragsort-0.5.1.min.js code is complex. I do not know how to check what happens with the function after the update. The entire structure of the html document is obtained one-on-one with what it was before the update, but now the javascript from jquery stops working. - masha2
    • Hmm ... After the update, look at the generated code of the page (! Not the original one, but the generated one) and compare it with the code before the update. Check if there is a difference in the structure related to the gallery, "before" and "after". - Deonis
    • the only difference is that there should have been a function, a cat. You were advised to initialize - masha2

    So .. Still simple .. The drag'n'drop handler is hung on existing elements. After the page is updated, the Ajax elements change and there is no longer a handler for them. In any case, you need to reinitialize the drag'n'drop plugin. Either update a section of the page with JS, ie:

    PHP:

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