Why is PJAX stopping Nestable working? - php

Question

I have 3 columns in my app. Each column has an unordered list. I am using Nestable to drag and drop list items between lists. The mark up is as 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 and I can drag and drop list items between each list. The problem is when I implement PJAX.
I have a few links that use PJAX to change the url i.e. each link will update the data or order of the data in each list based on the URL. The data updates within id="pjax-content" accordingly, so it works. This is a snippet of the server side code (using CI):
if (isset($_SERVER["HTTP_X_PJAX"])) {
echo $data['contents'];
} else {
// construct views when not PJAX
}
$data['contents'] contains the html as a string.
I have the following JS libraries too (I have tried removing some of these and the 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 I click on one of the links PJAX works, the data is updated, the page doesn't reload and the console shows before send and done - so all is well. However, the nestable items are no longer selectable so a I can't drag and drop them. When I do a full page refresh it works and I can drag and drop.
I have compared the markup before and after (as that was a previous issue) and everything is the same.
Any suggestions on where I am going wrong? Or how to best debug this?

Answer 1

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