Ajax Updates |
| Posted: 09 Dec 2009 07:55 AM PST This jQuery plugin for a quick way of allowing table columns to be filtered by the user. It will add text box’s to the top of each column in a table, by typing into the text box’s you can narrow the number of rows in the table down to those that match your search text. It allows for wild cards and a NOT operator (ie show me everything that doesn’t match my search text). $('#filterTable').columnFilters(); To use this script you need to download jQuery (included in the download below). Each table you apply the script to must be well formed; containing atleast a tbody and a thead. The script doesn’t yet compensate for any cells that have a colspan greater than 1. Below are a list of the variables that can be changed and there defaults. Please also check out the demo! * wildCard: (default ‘*’) Allow you to search for any characters. eg ‘*m’ or ‘*12*3′ One last thing, the row created containing the text box’s is given a class name of ‘filterColumns’ so that you may style that row using CSS. Tested to work in the following browsers; * IE 7 & 6  Related Listings:
| |||||
| Posted: 09 Dec 2009 07:50 AM PST Adds the ability to do background-position animations to jQuery 1.2 and newer. $('#background').animate({backgroundPosition: '10% 250px'}); Example: $('#background') .click(function(){ $(this) .animate({backgroundPosition: '500px 150px'}) .animate({backgroundPosition: '-20px 250px'}) ; }); Known Issue Due to a bug in FF 2.0, you have to set your (initial) background-position inline: <div style="background-position: 10px 20px"></div> Offcurse you can achieve this with JavaScript (jQuery), too: $('#background').css({backgroundPosition: '10px 20px'}); If you don´t set the inline-Style the script will degrade gracefully in FF 2. Related Listings:
| |||||
| Posted: 09 Dec 2009 07:48 AM PST Ajax can be very intimidating if you know very little about Javascript. However, the good news about it is that AJAX is very popular and each day, more and more tools, applications, demos, tutorials and articles show up and we’re getting friendlier and friendlier with it. In this tutorial I am going to teach you how to create an Ajax contact form for your website. The main purpose of using ajax for this task will be the fact that you’re saving bandwith (hard to believe that in 2007 we’re still looking to save bandwith but…), it communicates with the visitor on the same page, almost instantly and is faster because you’re not loading another page to show a confirmation message or whatever else is supposed to show given the situations. There are many ways of doing this, we’re going to use mootools to make AJAX possible. Mootools is a lightweight javascript library developed by Valerio Proietti and is capable of creating a huge amount of effects. The advantage on mootools is that you don’t need to download the whole library just to have an ajax event or some other tiny effect. You just download what you need. Ok, now that we finished introducing our tools let’s start coding. Our small project will contain 4 files: mootools, a stylesheet and our index page (interface) which will be working with send.php with the help of ajax. Basically, we have our main page helped by some AJAX magic to send data and receive+display the response. Our php code will look like an ordinary PHP mailer, using the mail() function: < ?php error_reporting(E_NOTICE); function valid_email($str) { return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE; } if($_POST['first_name']!='' &amp;amp;&amp;amp; $_POST['last_name']!='' &amp;amp;&amp;amp; $_POST['e_mail']!='' &amp;amp;&amp;amp; valid_email($_POST['e_mail'])==TRUE &amp;amp;&amp;amp; strlen($_POST['message'])>30) { $to = 'manilodisan@gmail.com'; $headers = 'From: '.$_POST['e_mail'].'' "\r\n" . 'Reply-To: '.$_POST['e_mail'].'' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $subject = "Hello! I'm testing my new ajax email that I got from roscripts.com"; $message = htmlspecialchars($_POST['message']); if(mail($to, $subject, $message, $headers)) {//we show the good guy only in one case and the bad one for the rest. echo 'Thank you '.$_POST['first_name'].'. Your message was sent'; } else { echo "Message not sent. Please make sure you're not running this on localhost and also that you are allowed to run mail() function from your webserver"; } } else { echo 'Please make sure you filled all the required fields, that you entered a valid email and also that your message contains more then 30 characters.'; } ?> Analyzing the code you will notice the function (which was taken from our snippets section) “valid_email” that we will use to validate the email address of the visitor. Also, I’ve started the code using an if statement to make sure all fields are completed, the message is bigger then 30 characters (you can modify everything to match your needs) and that the sender’s email address is a valid one. Please notice that I used htmlspecialchars() to avoid any attempt of cross site scripting(XSS) which is hard to believe that will bypass any email client at this moment but it’s always good to be prepared and cover anything that might be vulnerable. The javascript code which will trigger the event and process our form is very small and easy to follow. It’s ready to run on domready which is way much faster than onLoad and it uses Fx.Elements to change the class of our receiver element ( ) in order to show a loading gif until the job is done and our php sends back the response which can either be a positive one or negative. window.addEvent('domready', function(){ $('myForm').addEvent('submit', function(e) { new Event(e).stop(); var log = $('log_res').empty().addClass('ajax-loading'); this.send({ update: log, onComplete: function() { log.removeClass('ajax-loading'); } }); }); }); Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.