dougsparling.org (kl93): jQuery

Showing posts with label jQuery. Show all posts

Tuesday, May 20, 2008

git

I've been wanting to play with git, so I created repositories for all my jquery plugins at github.com.

http://github.com/dsparling

For now, that would be:

jClock
datemaker
regexpCommon

git documentation:

http://git.or.cz/#documentation
http://www.sourcemage.org/Git_Guide
http://www.gitcasts.com/

Wednesday, February 27, 2008

jQuery Sortable with Ajax, PHP, and MySQL

I needed to create a sortable list that would save the order position of data items. I've been using jQuery more and more and decided to go with the Interface Elements for jQuery.

I found a blog entry titled jQuery Sortable Ajax PHP Integration that was a good start. However, it didn't actually use MySQL to store the sorted data so I've gone ahead and added the database queries and updates.

First I created a simple table to store links (I'd like my client to order the links they enter through an admin interface).


CREATE TABLE links ( 
id int(10) NOT NULL auto_increment, 
link_url varchar(50) NOT NULL, 
link_text varchar(50) NOT NULL, 
order_position int(2), 
primary key(id) 
);

Next is the PHP page that reads the link data from the table and displays the links based on the order_position column of the table.

index.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/js/jquery/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="interface.js"></script>
  
<script>
$(document).ready(
  function() {
    $("#sortme").Sortable({
      accept : 'sortitem',
      onchange : function (sorted) {
        serial = $.SortSerialize('sortme');

        $.ajax({
                  url: "sortdata.php",
                  type: "POST",
                  data: serial.hash,
                  // complete: function(){},
                  //success: function(feedback){ $('#data').html(feedback); }
                  // error: function(){}
        });
      }
    });
  }
);

  </script>
</head>
<body>

<ul id="sortme">
<?php
  // Connect to the database as necessary
  $dbh = mysql_connect('127.0.0.1','username','password')
    or die ("Unaable to connnect to MySQL");

  $selected = mysql_select_db("sort_test",$dbh)
    or die("Could not select sort_test");

  $result = mysql_query('SELECT * FROM links ORDER BY order_position');
  while ($row = mysql_fetch_array($result)) {
    print '<li id="' . $row{'id'} . '" class="sortitem">' . $row{'link_text'} . "\n";
  }
  mysql_close($dbh);
?>
</ul>
 
</body>
</html>

This will make an Ajax call back to the server where PHP will update the database as you drag and sort the list data:

sortdata.php


<?php

$sortme = $_POST['sortme'];
// Connect to the database as necessary
$dbh = mysql_connect('127.0.0.1','username','password')
  or die ("Unaable to connnect to MySQL");

$selected = mysql_select_db("sort_test",$dbh)
  or die("Could not select sort_test");

for ($i = 0; $i < count($sortme); $i++) {
  mysql_query("UPDATE links SET order_position=$i WHERE id=$sortme[$i]");
}
mysql_close($dbh);
?>

A little CSS certainly wouldn't hurt things. Here's some I found on another tutorial:


<style>
ul {
  list-style: none;
}
li {
  background: #727EA3;
  color: #FFF;
  width: 100px;
  margin: 5px;
  font-size: 10px;
  font-family: Arial;
  padding: 3px;
}
</style>

I wouldn't call this production ready code, but all the pieces are in place if you'd like to use jQuery with Ajax, PHP, and MySQL for a sortable list. Don't forget, you'll need to get jQuery itself and the interface.js file as well. Another thing to consider is alerting the user if the update fails or takes a long time.

Tuesday, February 19, 2008

jQuery

I've been using the jQuery Javascript library a lot lately and it's definitely become my favorite library. (I've written four plugins in the last couple months to boot)

Here are a few links to useful jQuery resources.

jQuery: The Write Less, Do More, JavaScript Library
jQuery UI: Widgets, Components, and Interaction
Plugins - jQuery JavaScript Library
jQuery Blog
Learning jQuery
Visual jQuery
IBM developerWorks: Simplify Ajax development with jQuery

Wednesday, January 23, 2008

jQuery: Cookie Plugin

I've become a big fan of jQuery and have contributed two small plugins myself, so when it came time to switch to a library for cookie manipulation with Javascript (time to replace all that nasty inline JS code) my first choice was jQuery.

Not to be disappointed, I found that Klaus Hartl has written a very slim and useful Cookie Plugin for jQuery.

Here's a small page test using the jQuery Cookie plugin:


<html>
<head>
  <title>jquery cookie</title>

  <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>

  <script type="text/javascript">

    $(function($) {

      function displayMessage(msg) {
        $('#message').html(msg).css({color: 'green'});
      }

      displayMessage('jQuery cookie plugin test');

      $('#setSessionCookie').click(function() { 
        $.cookie('test', 'Hmmm, cookie');
        displayMessage("Cookie 'test' has been set.");
      });

      $('#setCookie').click(function() {
        $.cookie('test', 'Hmmm, cookie', { expires: 7 });
        displayMessage("Cookie 'test' has been set and will expire in 7 days.");
      });

      $('#getCookie').click(function() {
        displayMessage("The value of the cookie named 'test' is: " + $.cookie('test'));
      });

      $('#deleteCookie').click(function() {
        $.cookie('test', null);
        displayMessage("Cookie 'test' has been deleted.");
      });

      $('#testCookiesEnabled').click(function() {
        $.cookie('testcookiesenabled', null);
        $.cookie('testcookiesenabled', 'enabled');
        if ($.cookie('testcookiesenabled')) {
          displayMessage("Cookie: "+ $.cookie('testcookiesenabled'));
        } else {
          displayMessage("Cookies disabled");
          $.cookie('testcookiesenabled', null);
        }
      });

    });

  </script>

</head>

<body>

<p><span id="message" style="forecolor: red;"></span>

<p><input type="button" id="testCookiesEnabled" value="Cookies enabled?"/></p>

<p><input type="button" id="setSessionCookie" value="Set session cookie"/></p>

<p><input type="button" id="setCookie" value="Set cookie expires in  7 days"/></p>

<p><input type="button" id="getCookie" value="Show cookie value"/></p>

<p><input type="button" id="deleteCookie" value="Delete the cookie"/></p>

</body>
</html>

My jQuery cookie demo using jquery.cookie.js

dougsparling.org (kl93)