Solved

Save Sort Order - jQuery Tabs

Posted on 2011-09-11
17
1,191 Views
Last Modified: 2012-05-12
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
Comment
Question by:radarhill
  • 7
  • 7
  • 3
17 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36519274
on your page, click on the Events tab
check the update event

using $.post you may save the entire html of the tabs
0
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 500 total points
ID: 36520795
0
 
LVL 1

Author Comment

by:radarhill
ID: 36546115
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 82

Expert Comment

by:leakim971
ID: 36546277
>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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547323
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36547338
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
 
LVL 1

Author Comment

by:radarhill
ID: 36549469
The array is incomplete when moving items between tabs.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36549542
ID:36546277 save the complete HTML inside the tabs div
0
 
LVL 1

Author Comment

by:radarhill
ID: 36549554
Not sure how that would help the ajax updating or how I'd do that.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36549628
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
 
LVL 1

Author Comment

by:radarhill
ID: 36549719
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36550884
>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
 
LVL 1

Author Comment

by:radarhill
ID: 36553012
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36553378
don't replace the previous $.post line 57

can I see sort_retrieve.php and sort_update.php ?
0
 
LVL 1

Author Comment

by:radarhill
ID: 36554401
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36554411
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
 
LVL 1

Author Comment

by:radarhill
ID: 36568922
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Insert Button on a table 16 38
html border input line 7 16
send email part1 9 28
php error 26 28
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 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