Hi.

I have a web site that contains jquery tabs and one tab consists of a sortable jquery.
Although the sortable works induviduallay it doesnt work when it is put into the tabs. Is there a solution of that?

My tab code is as follows.

<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="javascripts/check_form.js"></script>
<script type="text/javascript" src="javascripts/ThickBox.js"></script>



<script type="text/javascript" src="javascripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="javascripts/jquery.ui.tabs.demo.js"></script>


<ul class="nav-content">
<li class="current first-li"><a href="tab1.php">Tabs-1</a></li>
<li><a href="tab2.php" ><span>Tabs-2</span></a></li>
<li><a href="tab3.php" ><span>Tabs-3</span></a></li>
</ul>



<script type="text/javascript">
$(function() {
$(".nav-content").tabs(
{
// CSS classes
selectedClass: 'current',
spinner: '',
select: function(ui) {
//$(".nav-content").hide();
$(".loading").show();
},
show: function(ui) {
$(".loading").hide();
//$(".nav-content").show();
}
}
);
});
</script>



-------
and the sorting code is as follows:


<link rel="stylesheet" href="files/jquery.ui.all.css">
<script src="files/jquery-1.6.2.js"></script>
<script src="files/jquery.ui.core.js"></script>
<script src="files/jquery.ui.widget.js"></script>
<script src="files/jquery.ui.mouse.js"></script>
<script src="files/jquery.ui.sortable.js"></script>


<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>


<div class="demo">


<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

The tabs and sortable is in the following link if it helps.

www.kolaydil.com/sortable/tab1.php (the sortable here is working)www.kolaydil.com/sortable (Here it is not working)

Where is .sortable() called in the tabbed page?

$( "#sortable" ).sortable() is in tab1.php
Did you ask this?

As far as I can tell, nothing applies sortable() to the dynamic content.

Javascript embedded in an HTML response to an AJAX request will not be executed in the same way as javascript embedded in the original page download.

That appears to be why it's not working.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.