Question

In my page I use Ajax tabs using prototypejs. And one of them includes a sortable. Although sortable works individually,
when I put it into the tab, it doesnt work. How can I solve this problem? Thanks.

my tabs are as follows:

<div id="container">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
</div>

my sortable list as follows:

<ul id="list">
    <li>now</li>
    <li>works</li>
    <li>this</li>
</ul>

<script type="text/javascript">
    Sortable.create("list");
</script>

my ajax function is as follows

function init () {

    var tabs = document.getElementsByClassName('tabs');
   for (var i = 0; i < tabs.length; i++) {
    $(tabs[i].id).onclick = function () {
        getTabData(this.id);
    }
}
}
function getTabData(id) {
var url = 'demos/ajax-tabs/process.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;

var myAjax = new Ajax.Request( 
        url, {
              method: 'get', 
              parameters: pars, 
              onLoading: showLoad, 
              onComplete: showResponse
              });

}
function showLoad () {
$('load').style.display = 'block';
    Sortable.create("list");

}
function showResponse (originalRequest) {
//Sortable.create("list");
var newData = originalRequest.responseText;
$('load').style.display = 'none';
$('content').innerHTML = newData;


}
init();

Answer 1

if you call Sortable.create(“list”); function, it will search your page for all element with id “list” make em sortable.

BUT: With Ajax you need to call Sortable.create() again AFTER content have been loaded successfully because you need to apply sortable again to new content.

function showResponse (originalRequest) {
    var newData = originalRequest.responseText;
    $('load').style.display = 'none';
    $('content').innerHTML = newData;   // make sure that newData contains <ul id="list">.....</ul>
    Sortable.create("list");
}