JQuery - get value of fields in list

Hi,
I am using jQuery ui sortable, is there a way I can get the values of icon_position & icon_id when an icon box is moved and then create an sql statement to update my icon2 table?

   $(function() {
            $("#sortable1,#sortable2,#sortable3" ).sortable({'update':function(){
            
                        alert ($(this).attr("#id"));
                        alert ($(this).val("#id"));
                        
 
            }});
            $(  "#sortable1,#sortable2,#sortable3" ).disableSelection();
      });


<li class="my_icon" icon_id='85' icon_position='1' group_name='common'> logout</li>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta charset="utf-8">
	<title>jQuery UI Sortable - Connect lists</title>
<!--	<script src="/jq/development-bundle/jquery-1.6.2.js"></script>   -->  
	
	<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.6.2.js"></script>
 
	<script src="/jq/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="/jq/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="/jq/development-bundle/ui/jquery.ui.mouse.js"></script>
	<script src="/jq/development-bundle/ui/jquery.ui.sortable.js"></script>
    
    
 
 
	
<style>
 
#sortable1 {
	list-style-type: none;
	padding: 0;
	float: left;
	margin-right: 10px;
	min-height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	background-color: #036;
	height: auto;
	width: 800px;
}
#sortable2 {
	list-style-type: none;
	padding: 0;
	float: left;
	margin-right: 10px;
	min-height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	background-color: #ccc;
	height: auto;
	width: 800px;
}
#sortable3 {
	list-style-type: none;
	padding: 0;
	float: left;
	margin-right: 10px;
	min-height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	background-color: #C33;
	height: auto;
	width: 800px;
}
#sortable1 li, #sortable2 li, #sortable3 li {
	padding: 5px;
	font-size: 1.2em;
	width: 90px;
	height: 90px;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	float: left;
}
 
#icons_container{
	width: 900px;
	height: auto;
}
 
.my_icon{
	width:80px;
	height: 80px;
	color: #FFF;
	background-color: #CCC;
	border: 1px solid #000;
}
 
 
#slickbox1, #slickbox2, #slickbox3{
	width: 900px;
	float:left;
	clear:left;
	height: auto;
	
}
 
	</style>
	<script> 
	
	$(document).ready(function() {
		// hides the slickbox as soon as the DOM is ready
		 $('#slickbox1').show();
		 $('#slickbox2').hide();
		 $('#slickbox3').hide();
		  
		 // toggles the slickbox on clicking the noted link  
		  $('#slick-show1').click(function() {
			$('#slickbox1').toggle(400);
			return false;
		  });
		
		 // toggles the slickbox on clicking the noted link  
		  $('#slick-show2').click(function() {
			$('#slickbox2').toggle(400);
			return false;
		  });	
		 
		 // toggles the slickbox on clicking the noted link  
		  $('#slick-show3').click(function() {
			$('#slickbox3').toggle(400);
			return false;
		  });		
		
		});
	
	$(function() {
		$( "#sortable1, #sortable2 , #sortable3" ).sortable({
			connectWith: ".connectedSortable"
		}).disableSelection();
	});
    
   $(function() {
		$("#sortable1,#sortable2,#sortable3" ).sortable({'update':function(){
		
				alert ($(this).attr("#id"));
				alert ($(this).val("#id"));
				
 
		}});
		$(  "#sortable1,#sortable2,#sortable3" ).disableSelection();
	});
    
</script>
</head>
<body>
<div class="icons_container">
 
<div ><a id="slick-show2" href="#">Display More Icons</a>&nbsp;&nbsp;<a id="slick-show3"href="#">Display Admin Icons</a></div>
 
<div id="slickbox1">
<ul id="sortable1" class="connectedSortable">
        <li class="my_icon" icon_id='86' icon_position='0' group_name='common'>
        settings    </li>
	    <li class="my_icon" icon_id='85' icon_position='1' group_name='common'>
        logout    </li>
	    <li class="my_icon" icon_id='94' icon_position='2' group_name='common'>
        web_stats    </li>
	    <li class="my_icon" icon_id='84' icon_position='3' group_name='common'>
        google_analytics    </li>
	</ul>
</div>
<div id="slickbox2">
<ul id="sortable2" class="connectedSortable">
        <li class="my_icon" icon_id='77' icon_position='4' group_name='extra'>
        twitter    </li>
	    <li class="my_icon" icon_id='91' icon_position='5' group_name='extra'>
        db_backup_email    </li>
	    <li class="my_icon" icon_id='90' icon_position='6' group_name='extra'>
        webmail    </li>
	    <li class="my_icon" icon_id='76' icon_position='7' group_name='extra'>
        homepage    </li>
	</ul>
</div>
<div id="slickbox3">
<ul id="sortable3" class="connectedSortable">
        <li class="my_icon" icon_id='97' icon_position='8' group_name='admin'>
        add_to_gallery    </li>
	    <li class="my_icon" icon_id='58' icon_position='9' group_name='admin'>
        edit_webpages    </li>
	    <li class="my_icon" icon_id='73' icon_position='10' group_name='admin'>
        meta_tags    </li>
	    <li class="my_icon" icon_id='64' icon_position='11' group_name='admin'>
        view_orders    </li>
	    <li class="my_icon" icon_id='59' icon_position='12' group_name='admin'>
        page_order    </li>
	    <li class="my_icon" icon_id='70' icon_position='13' group_name='admin'>
        add_user    </li>
	</ul>
</div>
</div>
</body>
</html>

Open in new window



CREATE TABLE IF NOT EXISTS `icons2` (
  `id` tinyint(3) NOT NULL auto_increment,
  `icon_position` tinyint(3) default '100',
  `icon_name` varchar(120) NOT NULL,
  `visible` enum('1','0') default '1',
  `group_name` varchar(30) default 'admin',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `icon_name` (`icon_name`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=104 ;


INSERT INTO `icons2` (`id`, `icon_position`, `icon_name`, `visible`, `group_name`) VALUES
(98, 31, 'add_email', '1', 'admin'),
(95, 30, 'db_backup_online', '1', 'admin'),
(87, 26, 'forms_settings', '1', 'admin'),
(86, 0, 'settings', '1', 'common'),
(85, 1, 'logout', '1', 'common'),
(94, 2, 'web_stats', '1', 'common'),
(84, 3, 'google_analytics', '1', 'common'),
(100, 36, 'view_users', '1', 'admin'),
(97, 8, 'add_to_gallery', '1', 'admin'),
(26, 17, 'view_shop', '1', 'admin'),
(80, 34, 'hosting_account', '1', 'admin'),
(93, 27, 'facebook', '1', 'admin'),
(92, 28, 'blog', '1', 'admin');

Open in new window

sabecsAsked:
Who is Participating?
 
Kiran SonawaneConnect With a Mentor Project LeadCommented:
You can modify your jquery function like below.
 
$(function() {
    $("#sortable1,#sortable2,#sortable3" ).sortable({
    update: function(event, ui) {
      var index="";
      
      for (i=0; i < this.children.length; i++) {
        if (index.length) {
          index += '&';
        }
        index += 'index[]=' + this.children[i].id;
        
      }
      alert(index);
     
    }
  });

Open in new window

After alert you can use ajax to update values

$.ajax({
        type: "POST",
        url: this.attributes.getNamedItem('data-sort-url').value,
        data: index,
        dataType: "text"
      });

Open in new window

0
 
Kiran SonawaneProject LeadCommented:
Replace url with your actual url

$.ajax({
        type: "POST",
        url: "Your_url",
        data: index,
        dataType: "text"
      });
0
 
sabecsAuthor Commented:
Thanks sonawanekiran for your help, I have tried your code but get the following
index[]=&index[]=&index[]=
0
 
Kiran SonawaneProject LeadCommented:
try replacing icon-id with id of all li items
0
 
sabecsAuthor Commented:
Thanks sonawanekiran, it works great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.