[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

JQuery - get value of fields in list

Posted on 2011-10-21
5
Medium Priority
?
248 Views
Last Modified: 2012-06-21
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

0
Comment
Question by:sabecs
  • 3
  • 2
5 Comments
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 37006168
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37006184
Replace url with your actual url

$.ajax({
        type: "POST",
        url: "Your_url",
        data: index,
        dataType: "text"
      });
0
 

Author Comment

by:sabecs
ID: 37006691
Thanks sonawanekiran for your help, I have tried your code but get the following
index[]=&index[]=&index[]=
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 37007111
try replacing icon-id with id of all li items
0
 

Author Closing Comment

by:sabecs
ID: 37007611
Thanks sonawanekiran, it works great.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses
Course of the Month19 days, 5 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question