Saturday, 15 March 2014

php - Why is PJAX stopping Nestable working? -



php - Why is PJAX stopping Nestable working? -

i have 3 columns in app. each column has unordered list. using nestable drag , drop list items between lists. mark follows:

<div class="row-fluid span12"> <div class="cf nestable-lists"> <div id="pjax-content"> <div class="span4"> <div class="dd" id="nestable1"> <ul class="dd-list"> <li class="dd-item dd3-item" data-id="123"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> <li class="dd-item dd3-item" data-id="456"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> </ul> </div> </div> <div class="span4"> <div class="dd" id="nestable2"> <ul class="dd-list"> <li class="dd-item dd3-item" data-id="789"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> <li class="dd-item dd3-item" data-id="1011"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> </ul> </div> </div> <div class="span4"> <div class="dd" id="nestable3"> <ul class="dd-list"> <li class="dd-item dd3-item" data-id="1213"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> <li class="dd-item dd3-item" data-id="1415"> <div class="dd-handle dd3-handle">drag</div> <div class="dd3-content"> // list content </div> </li> </ul> </div> </div> </div> </div> </div>

this works , can drag , drop list items between each list. problem when implement pjax.

i have few links utilize pjax alter url i.e. each link update info or order of info in each list based on url. info updates within id="pjax-content" accordingly, works. snippet of server side code (using ci):

if (isset($_server["http_x_pjax"])) { echo $data['contents']; } else { // build views when not pjax }

$data['contents'] contains html string.

i have next js libraries (i have tried removing of these , problem still exists):

<script type="text/javascript" src="jquery-1.9.0.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="nestable.js"></script> <script type="text/javascript" src="nestable-settings.js"></script> <script type="text/javascript" src="bootstrap-editable.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src='jquery.pjax.js'></script> <script type="text/javascript"> $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content'); $(document).on('pjax:send', function() { console.log("before send"); }); $(document).on('pjax:complete', function() { console.log("done!"); }); </script> the problem

when click on 1 of links pjax works, info updated, page doesn't reload , console shows before send , done - well. however, nestable items no longer selectable can't drag , drop them. when total page refresh works , can drag , drop.

i have compared markup before , after (as previous issue) , same.

any suggestions on going wrong? or how best debug this?

call nestable after ajax finish function

$(document).on('pjax:complete', function() { $('#nestable1,#nestable2,#nestable3').nestable(); });

php javascript jquery pjax

No comments:

Post a Comment