Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1346
  • Last Modified:

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?
0
radarhill
Asked:
radarhill
  • 7
  • 7
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
on your page, click on the Events tab
check the update event

using $.post you may save the entire html of the tabs
0
 
radarhillAuthor Commented:
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

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
leakim971PluritechnicianCommented:
>but there is still some issues

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

http://jsfiddle.net/uaeus/2/
0
 
sonawanekiranCommented:
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"];
0
 
sonawanekiranCommented:
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

0
 
radarhillAuthor Commented:
The array is incomplete when moving items between tabs.
0
 
leakim971PluritechnicianCommented:
ID:36546277 save the complete HTML inside the tabs div
0
 
radarhillAuthor Commented:
Not sure how that would help the ajax updating or how I'd do that.
0
 
leakim971PluritechnicianCommented:
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
0
 
radarhillAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
>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'
...
0
 
radarhillAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
don't replace the previous $.post line 57

can I see sort_retrieve.php and sort_update.php ?
0
 
radarhillAuthor Commented:
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

0
 
leakim971PluritechnicianCommented:
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
0
 
radarhillAuthor Commented:
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?
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now