Link to home
Start Free TrialLog in
Avatar of radarhill
radarhill

asked on

Save Sort Order - jQuery Tabs

Using http://jqueryui.com/demos/sortable/#connect-lists-through-tabs how could AJAX be used to save the sort order for each item on each tab?
Avatar of leakim971
leakim971
Flag of Guadeloupe image
on your page, click on the Events tab
check the update event

using $.post you may save the entire html of the tabs
ASKER CERTIFIED SOLUTION
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of radarhill
radarhill

ASKER

I'm getting closer but there is still some issues.  Test this out:
<!doctype html> 
<html lang="en"> 
<head> 
	<title>jQuery UI Sortable - Connect lists with Tabs</title>
	<link rel="stylesheet" class="theme-link" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="screen" />
	<style type="text/css"> 
	.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<div id="result">the result</div>
<div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">One</a></li> 
		<li><a href="#tabs-2">Two</a></li> 
		<li><a href="#tabs-3">Three</a></li> 
	</ul> 
	<div id="tabs-1"> 
		<ul id="sortable0" class="connectedSortable ui-helper-reset"> 
			<li id="li_1" class="ui-state-default">Item 1a</li> 
			<li id="li_2" class="ui-state-default">Item 2a</li> 
			<li id="li_3" class="ui-state-default">Item 3a</li> 
			<li id="li_4" class="ui-state-default">Item 4a</li> 
			<li id="li_5" class="ui-state-default">Item 5a</li> 
		</ul> 
	</div> 
	<div id="tabs-2"> 
		<ul id="sortable1" class="connectedSortable ui-helper-reset"> 
			<li id="li_6" class="ui-state-highlight">Item 1b</li> 
			<li id="li_7" class="ui-state-highlight">Item 2b</li> 
			<li id="li_8" class="ui-state-highlight">Item 3b</li> 
			<li id="li_9" class="ui-state-highlight">Item 4b</li> 
			<li id="li_10" class="ui-state-highlight">Item 5b</li> 
		</ul> 
	</div> 
	<div id="tabs-3"> 
		<ul id="sortable2" class="connectedSortable ui-helper-reset"> 
			<li id="li_11" class="ui-state-highlight">Item 1c</li> 
			<li id="li_12" class="ui-state-highlight">Item 2c</li> 
			<li id="li_13" class="ui-state-highlight">Item 3c</li> 
			<li id="li_14" class="ui-state-highlight">Item 4c</li> 
			<li id="li_15" class="ui-state-highlight">Item 5c</li> 
		</ul> 
	</div> 
</div> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
$(function() {

	function updateDB() 
	{
		var $report = '';
		$.each( $( '[id^=sortable] ' ) , function( k , v ) {
			$these_lis	= $( '#sortable' + k + ' li' );
			$.each( $these_lis , function( kk , vv ) {
				$report += '<br>Tab: ' + k + ' li id: ' + vv.id;
			});
		});
		$( '#result' ).html( $report );
	}

	$( '[id^=sortable]' ).sortable({
	        connectWith: '.connectedSortable' 
	        , update : function () 
	          {
	            $.ajax(
	            {
	                type: "POST",
	                url: "sort_update.php",
	                data: 
	                {
	                    sort0:$("#sortable0").sortable('serialize'),
	                    sort1:$("#sortable1").sortable('serialize'),
	                    sort2:$("#sortable2").sortable('serialize')
	                }
	            });
	            updateDB();
	          } 
	}).disableSelection();

		var $tabs	= $( '#tabs' ).tabs();
		var $tab_items = $( 'ul:first li' , $tabs ).droppable({
			  accept:	'.connectedSortable li' 
			, hoverClass:	'ui-state-hover' 
			, drop:		function( ev , ui ) 
					{
					var $item = $(this);
					var $list = $( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
					ui.draggable.hide( 'slow' , 
						function() 
						{
						$tabs.tabs( 'select' , $tab_items.index( $item ) );
						$(this).appendTo( $list ).show( 'slow' );
						});

						//updateDB( $tab_items.index( $item ) );
						//$( '[id^=sortable]' ).sortable( 'refresh' );

					} 
		});
	});
</script>
</body> 
</html>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
>but there is still some issues

what about : $.post("sort_update.php", {"tabs":$("#tabs").html()}, function(msg) { alert(msg); });

http://jsfiddle.net/uaeus/2/
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
In fact, your code is correct. $.ajax is going to post the data. So your post URL is like this

sort_update.php?sort0=li%5B%5D%3D1%26li%5B%5D%3D3%26li%5B%5D%3D2%26li%5B%5D%3D4%26li%5B%5D%3D5&sort1=li%5B%5D%3D6%26li%5B%5D%3D7%26li%5B%5D%3D8%26li%5B%5D%3D9%26li%5B%5D%3D10&sort2=li%5B%5D%3D11%26li%5B%5D%3D12%26li%5B%5D%3D13%26li%5B%5D%3D14%26li%5B%5D%3D15

You can easily catch this parameter  at sort_update.php using

echo $_REQUEST["sort0"]. "<br />";
echo $_REQUEST["sort1"]. "<br />";
echo $_REQUEST["sort2"];
Avatar of Kiran Sonawane
Kiran Sonawane
Flag of India image
I tested this with my local settings


<!doctype html> 
<html lang="en"> 
<head> 
  <title>jQuery UI Sortable - Connect lists with Tabs</title>
  <link rel="stylesheet" class="theme-link" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="screen" />
  <style type="text/css"> 
  .connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<div id="result">the result</div>
<div id="tabs"> 
  <ul> 
    <li><a href="#tabs-1">One</a></li> 
    <li><a href="#tabs-2">Two</a></li> 
    <li><a href="#tabs-3">Three</a></li> 
  </ul> 
  <div id="tabs-1"> 
    <ul id="sortable0" class="connectedSortable ui-helper-reset"> 
      <li id="li_1" class="ui-state-default">Item 1a</li> 
      <li id="li_2" class="ui-state-default">Item 2a</li> 
      <li id="li_3" class="ui-state-default">Item 3a</li> 
      <li id="li_4" class="ui-state-default">Item 4a</li> 
      <li id="li_5" class="ui-state-default">Item 5a</li> 
    </ul> 
  </div> 
  <div id="tabs-2"> 
    <ul id="sortable1" class="connectedSortable ui-helper-reset"> 
      <li id="li_6" class="ui-state-highlight">Item 1b</li> 
      <li id="li_7" class="ui-state-highlight">Item 2b</li> 
      <li id="li_8" class="ui-state-highlight">Item 3b</li> 
      <li id="li_9" class="ui-state-highlight">Item 4b</li> 
      <li id="li_10" class="ui-state-highlight">Item 5b</li> 
    </ul> 
  </div> 
  <div id="tabs-3"> 
    <ul id="sortable2" class="connectedSortable ui-helper-reset"> 
      <li id="li_11" class="ui-state-highlight">Item 1c</li> 
      <li id="li_12" class="ui-state-highlight">Item 2c</li> 
      <li id="li_13" class="ui-state-highlight">Item 3c</li> 
      <li id="li_14" class="ui-state-highlight">Item 4c</li> 
      <li id="li_15" class="ui-state-highlight">Item 5c</li> 
    </ul> 
  </div> 
</div> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
  
  $( '[id^=sortable]' ).sortable({
          connectWith: '.connectedSortable' 
          , update : function () 
            {
              $.ajax(
              {
                  type: "get",
                  url: "http:localhost:3000",
                  data: 
                  {
                      sort0:$("#sortable0").sortable('serialize'),
                      sort1:$("#sortable1").sortable('serialize'),
                      sort2:$("#sortable2").sortable('serialize')
                  }
              });
              updateDB();
            } 
  }).disableSelection();
  
  

    var $tabs = $( '#tabs' ).tabs();
    var $tab_items = $( 'ul:first li' , $tabs ).droppable({
        accept: '.connectedSortable li' 
      , hoverClass: 'ui-state-hover' 
      , drop:   function( ev , ui ) 
          {
          var $item = $(this);
          var $list = $( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
          ui.draggable.hide( 'slow' , 
            function() 
            {
            $tabs.tabs( 'select' , $tab_items.index( $item ) );
            $(this).appendTo( $list ).show( 'slow' );
            });

            //updateDB( $tab_items.index( $item ) );
            //$( '[id^=sortable]' ).sortable( 'refresh' );

          } 
    });
  });
  
  
  function updateDB() 
  {
    var $report = '';
    $.each( $( '[id^=sortable] ' ) , function( k , v ) {
      $these_lis  = $( '#sortable' + k + ' li' );
      $.each( $these_lis , function( kk , vv ) {
        $report += '<br>Tab: ' + k + ' li id: ' + vv.id;
      });
    });
    $( '#result' ).html( $report );
  }
  
  
</script>
</body> 
</html>

Open in new window

Avatar of radarhill
radarhill

ASKER

The array is incomplete when moving items between tabs.
Avatar of leakim971
leakim971
Flag of Guadeloupe image
ID:36546277 save the complete HTML inside the tabs div
Avatar of radarhill
radarhill

ASKER

Not sure how that would help the ajax updating or how I'd do that.
Avatar of leakim971
leakim971
Flag of Guadeloupe image
in your last code you was using $.ajax({ .... });

replace it by : $.post("sort_update.php", {"tabs":$("#tabs").html()}, function(msg) { alert(msg); });

on the server side you know you save the complete tabs div content
Avatar of radarhill
radarhill

ASKER

Making that update did pass the HTML as expected.  Still the item(s) moved between tabs are not passed on the initial move.  Check it out:
<!doctype html> 
<html lang="en"> 
<head> 
	<title>jQuery UI Sortable - Connect lists with Tabs</title>
	<link rel="stylesheet" class="theme-link" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="screen" />
	<style type="text/css"> 
	.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">One</a></li> 
		<li><a href="#tabs-2">Two</a></li> 
		<li><a href="#tabs-3">Three</a></li> 
	</ul> 
	<div id="tabs-1"> 
		<ul id="sortable0" class="connectedSortable ui-helper-reset"> 
			<li id="li_1" class="ui-state-default">Item 1a</li> 
			<li id="li_2" class="ui-state-default">Item 2a</li> 
			<li id="li_3" class="ui-state-default">Item 3a</li> 
			<li id="li_4" class="ui-state-default">Item 4a</li> 
			<li id="li_5" class="ui-state-default">Item 5a</li> 
		</ul> 
	</div> 
	<div id="tabs-2"> 
		<ul id="sortable1" class="connectedSortable ui-helper-reset"> 
			<li id="li_6" class="ui-state-highlight">Item 1b</li> 
			<li id="li_7" class="ui-state-highlight">Item 2b</li> 
			<li id="li_8" class="ui-state-highlight">Item 3b</li> 
			<li id="li_9" class="ui-state-highlight">Item 4b</li> 
			<li id="li_10" class="ui-state-highlight">Item 5b</li> 
		</ul> 
	</div> 
	<div id="tabs-3"> 
		<ul id="sortable2" class="connectedSortable ui-helper-reset"> 
			<li id="li_11" class="ui-state-highlight">Item 1c</li> 
			<li id="li_12" class="ui-state-highlight">Item 2c</li> 
			<li id="li_13" class="ui-state-highlight">Item 3c</li> 
			<li id="li_14" class="ui-state-highlight">Item 4c</li> 
			<li id="li_15" class="ui-state-highlight">Item 5c</li> 
		</ul> 
	</div> 
</div> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
$(function() {

	$( '[id^=sortable]' ).sortable({
	        connectWith: '.connectedSortable' 
	        , update : function () 
	          {
			$.post("sort_update.php", {"tabs":$("#tabs").html()}, function(msg) { alert(msg); });
	            /*$.ajax(
	            {
	                type: "POST",
	                url: "sort_update.php",
	                data: 
	                {
	                    sort0:$("#sortable0").sortable('serialize'),
	                    sort1:$("#sortable1").sortable('serialize'),
	                    sort2:$("#sortable2").sortable('serialize')
	                }
	            });*/
	          } 
	}).disableSelection();

		var $tabs	= $( '#tabs' ).tabs();
		var $tab_items = $( 'ul:first li' , $tabs ).droppable({
			  accept:	'.connectedSortable li' 
			, hoverClass:	'ui-state-hover' 
			, drop:		function( ev , ui ) 
					{
					var $item = $(this);
					var $list = $( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
					ui.draggable.hide( 'slow' , 
						function() 
						{
						$tabs.tabs( 'select' , $tab_items.index( $item ) );
						$(this).appendTo( $list ).show( 'slow' );
						});
					} 
		});
	});
</script>
</body> 
</html>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
>Still the item(s) moved between tabs are not passed on the initial move.

read them from the database

<script>
$(function() {

$.get("sort_retrieve.php", function(tabs) { $("#tabs").html( tabs ); });

      $( '[id^=sortable]' ).sortable({
              connectWith: '.connectedSortable'
...
Avatar of radarhill
radarhill

ASKER

If this is what you're suggesting it still isn't able to retrieve the items on their initial move to a different tab.  Test it out:
<!doctype html> 
<html lang="en"> 
<head> 
	<title>jQuery UI Sortable - Connect lists with Tabs</title>
	<link rel="stylesheet" class="theme-link" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="screen" />
	<style type="text/css"> 
	.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">One</a></li> 
		<li><a href="#tabs-2">Two</a></li> 
		<li><a href="#tabs-3">Three</a></li> 
	</ul> 
	<div id="tabs-1"> 
		<ul id="sortable0" class="connectedSortable ui-helper-reset"> 
			<li id="li_1" class="ui-state-default">Item 1a</li> 
			<li id="li_2" class="ui-state-default">Item 2a</li> 
			<li id="li_3" class="ui-state-default">Item 3a</li> 
			<li id="li_4" class="ui-state-default">Item 4a</li> 
			<li id="li_5" class="ui-state-default">Item 5a</li> 
		</ul> 
	</div> 
	<div id="tabs-2"> 
		<ul id="sortable1" class="connectedSortable ui-helper-reset"> 
			<li id="li_6" class="ui-state-highlight">Item 1b</li> 
			<li id="li_7" class="ui-state-highlight">Item 2b</li> 
			<li id="li_8" class="ui-state-highlight">Item 3b</li> 
			<li id="li_9" class="ui-state-highlight">Item 4b</li> 
			<li id="li_10" class="ui-state-highlight">Item 5b</li> 
		</ul> 
	</div> 
	<div id="tabs-3"> 
		<ul id="sortable2" class="connectedSortable ui-helper-reset"> 
			<li id="li_11" class="ui-state-highlight">Item 1c</li> 
			<li id="li_12" class="ui-state-highlight">Item 2c</li> 
			<li id="li_13" class="ui-state-highlight">Item 3c</li> 
			<li id="li_14" class="ui-state-highlight">Item 4c</li> 
			<li id="li_15" class="ui-state-highlight">Item 5c</li> 
		</ul> 
	</div> 
</div> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
$(function() {

	$.get("sort_retrieve.php", function(tabs) { $("#tabs").html( tabs ); });

	$( '[id^=sortable]' ).sortable({
	        connectWith: '.connectedSortable' 
	        , update : function () 
	          {
			$.get("sort_retrieve.php", function(tabs) { $("#tabs").html( tabs ); });
	          } 
	}).disableSelection();

		var $tabs	= $( '#tabs' ).tabs();
		var $tab_items = $( 'ul:first li' , $tabs ).droppable({
			  accept:	'.connectedSortable li' 
			, hoverClass:	'ui-state-hover' 
			, drop:		function( ev , ui ) 
					{
					var $item = $(this);
					var $list = $( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
					ui.draggable.hide( 'slow' , 
						function() 
						{
						$tabs.tabs( 'select' , $tab_items.index( $item ) );
						$(this).appendTo( $list ).show( 'slow' );
						});
					} 
		});
	});
</script>
</body> 
</html>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
don't replace the previous $.post line 57

can I see sort_retrieve.php and sort_update.php ?
Avatar of radarhill
radarhill

ASKER

The following is the updated code.  In it's current version the tabs collapse immediately on load.  If the $get is remarked out the page and tabs load as expected.  Following the page is the sort_update.php code.  I simply have it emailing the result to me at this point.  Thanks for all your help.
<!doctype html> 
<html lang="en"> 
<head> 
	<title>jQuery UI Sortable - Connect lists with Tabs</title>
	<link rel="stylesheet" class="theme-link" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="screen" />
	<style type="text/css"> 
	.connectedSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
</head>
<body>
<div id="tabs"> 
	<ul> 
		<li><a href="#tabs-1">One</a></li> 
		<li><a href="#tabs-2">Two</a></li> 
		<li><a href="#tabs-3">Three</a></li> 
	</ul> 
	<div id="tabs-1"> 
		<ul id="sortable0" class="connectedSortable ui-helper-reset"> 
			<li id="li_1" class="ui-state-default">Item 1a</li> 
			<li id="li_2" class="ui-state-default">Item 2a</li> 
			<li id="li_3" class="ui-state-default">Item 3a</li> 
			<li id="li_4" class="ui-state-default">Item 4a</li> 
			<li id="li_5" class="ui-state-default">Item 5a</li> 
		</ul> 
	</div> 
	<div id="tabs-2"> 
		<ul id="sortable1" class="connectedSortable ui-helper-reset"> 
			<li id="li_6" class="ui-state-highlight">Item 1b</li> 
			<li id="li_7" class="ui-state-highlight">Item 2b</li> 
			<li id="li_8" class="ui-state-highlight">Item 3b</li> 
			<li id="li_9" class="ui-state-highlight">Item 4b</li> 
			<li id="li_10" class="ui-state-highlight">Item 5b</li> 
		</ul> 
	</div> 
	<div id="tabs-3"> 
		<ul id="sortable2" class="connectedSortable ui-helper-reset"> 
			<li id="li_11" class="ui-state-highlight">Item 1c</li> 
			<li id="li_12" class="ui-state-highlight">Item 2c</li> 
			<li id="li_13" class="ui-state-highlight">Item 3c</li> 
			<li id="li_14" class="ui-state-highlight">Item 4c</li> 
			<li id="li_15" class="ui-state-highlight">Item 5c</li> 
		</ul> 
	</div> 
</div> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script>
$(function() {

	$.get( 'sort_update.php' , function(tabs) { $( '#tabs' ).html( tabs ); });

	$( '[id^=sortable]' ).sortable({
	        connectWith: '.connectedSortable' 
	        , update : function () 
	          {
			$.post( 'sort_update.php' , { 'tabs':$( '#tabs' ).html() }, function( msg ) { alert( msg ); });
	          } 
	}).disableSelection();

		var $tabs	= $( '#tabs' ).tabs();
		var $tab_items = $( 'ul:first li' , $tabs ).droppable({
			  accept:	'.connectedSortable li' 
			, hoverClass:	'ui-state-hover' 
			, drop:		function( ev , ui ) 
					{
					var $item = $(this);
					var $list = $( $item.find( 'a' ).attr( 'href' ) ).find( '.connectedSortable' );
					ui.draggable.hide( 'slow' , 
						function() 
						{
						$tabs.tabs( 'select' , $tab_items.index( $item ) );
						$(this).appendTo( $list ).show( 'slow' );
						});
					} 
		});
});
</script>
</body> 
</html>

Open in new window

sort_update.php
<?php
	mail( 'email@domain.com' , 'sortable tabs' , print_r( $_REQUEST , TRUE ) );

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
ok, there's a mistake here

sort_update.php should save the tabs div content in a database for a given user
sort_retrieve.php load the tabs from the database for a given user
Avatar of radarhill
radarhill

ASKER

Thanks.  These suggestions are still not providing the ultimate.  That would be a multi-dimensional array for each tab with the id's of each <li> within.  Anyone?