0

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)

Edited by Nick Evan: Fixed formatting

2
Contributors
3
Replies
4
Views
5 Years
Discussion Span
Last Post by Airshow
0

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

0

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

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.