<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Live Query Test</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/reset/reset-min.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/fonts-min.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/base/base-min.css"> <style type="text/css" media="screen"> body { margin: 2em; } #anim { position: fixed; top: 0; right: 0; width: 100px; height: 100px; background-color: #000; } * html #anim { position: absolute; } </style> <script type="text/javascript" src="jquery.js"></script> <script src="../jquery.livequery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { var anim = (function() { var el = $('#anim'); return function() { el.toggle(1000, anim); }; })(); anim(); /*** Example 1-1 ***/ var example1_1 = function() { $(this) .text('Clicked') .blur(); return false; }; $('input[name=example1-1-add]') .bind('click', function() { $('ul#example1-1') .append('<li><a href="#listitem">List Item</a></li>'); this.blur(); }); $('input[name=example1-1-expire]') .bind('click', function() { $('body #example1-1 a') .expire('click'); this.blur(); this.disabled = true; $('input[name=example1-1-restart]').attr('disabled', false); }); $('input[name=example1-1-restart]') .bind('click', function() { $('body #example1-1 a') .livequery('click', function() { $(this) .text('Clicked') .blur(); return false; }); $('input[name=example1-1-expire]')[0].disabled = false; $('input[name=example1-1-restart]').attr('disabled', true).blur(); }); $('#example1-1', 'body') .find('a') .livequery('click', function() { $(this) .text('Clicked') .blur(); return false; }); /*** Example 1-2 ***/ var matched = function() { $(this) .append('<small> (Updated)</small>'); }; var unmatched = function() { $('small', this) .remove(); }; $('input[name=example1-2-add]') .bind('click', function() { $('ul#example1-2') .append('<li>List Item</li>'); this.blur(); }); $('input[name=example1-2-expire]') .bind('click', function() { $('body #example1-2 li') .expire(); this.blur(); this.disabled = true; $('input[name=example1-2-restart]').attr('disabled', false); }); $('input[name=example1-2-restart]') .bind('click', function() { $('body #example1-2 li') .livequery(function() { $(this) .append('<small> (Updated)</small>'); }, function() { $('small', this) .remove(); }); $('input[name=example1-2-expire]')[0].disabled = false; $('input[name=example1-2-restart]').attr('disabled', true).blur(); }); $('body #example1-2') .find('li') .livequery(function() { $(this) .append('<small> (Updated)</small>'); }, function() { $('small', this) .remove(); }); }); </script> </head> <body> <div id="anim"></div> <h1>Live Query: Unordered List Examples (Using Anonymous Functions)</h1> <p>A common use-case is when a new list item is added to an unordered list and an event should be bound to it or a script notified of the change.</p> <h2>Binding an event to each list item</h2> <p>The list below uses a live query to bind a click event to each list item that changes the text to read 'Clicked'. Expiring the Live Query unbinds the events.</p> <pre><code>$('ul#example1-1', 'body') .find('a') .livequery('click', function() { $(this) .text('Clicked') .blur(); return false; }); </code></pre> <p><input type="button" name="example1-1-add" value="Add New Item"> <input type="button" name="example1-1-expire" value="Expire Live Query"> <input type="button" name="example1-1-restart" disabled="disabled" value="Restart Live Query"><p> <ul id="example1-1"> <li><a href="#listitem">List Item</a></li> <li><a href="#listitem">List Item</a></li> <li><a href="#listitem">List Item</a></li> <li><a href="#listitem">List Item</a></li> </ul> <h2>Get notified when a list item is added</h2> <p>The list below uses a Live Query to call a function when a new list item is added. This function adds the following text to each list item: '(Updated)' and removes it when the Live Query is expired.</p> <pre><code>var matched = function() { $(this) .append('<small>&nbsp;(Updated)</small>'); }; var unmatched = function() { $('small', this) .remove(); }; $('#example1-2', 'body') .find('li') .livequery(matched, unmatched); </code></pre> <p><input type="button" name="example1-2-add" value="Add New Item"> <input type="button" name="example1-2-expire" value="Expire Live Query"> <input type="button" name="example1-2-restart" disabled="disabled" value="Restart Live Query"><p> <ul id="example1-2"> <li>List Item</li> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> </body> </html>