Solved

Save Sort Order - jQuery Tabs

Posted on 2011-09-11
17
1,259 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

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…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

636 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