Ajax Updates |
| XAJAX PHP Live Datagrid – Gridview Posted: 18 Dec 2009 04:41 PM PST I've come across a lot of these 'live' datagrids / gridviews and I haven't really found one I like. Mainly because they seem to only deal with a small bit of data or the code isn't portable. So I figured I'd just have to code my own and here's what I came up with. I'll start with the primary or main page of the live datagrid. As you see, it's fairly simple. Oh and this is probably the time that you should visit http://www.xajaxproject.org/ and familiarize yourself with the XAJAX library. I found it to be very easy to work with dispite the lack of complete documentation. Moving on… gridview.php < ?php require_once('dgCommon.php'); ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iCE Breakers XAJAX Datagrid</title> < ?php $xajax->printJavascript("/javascript/"); ?> </head> <body> <center> <div id="dataGrid" align="center"></div> <script type="text/javascript"> xajax_showDataGrid(); </script> </center> </body> </html> Now heres the glue that holds all this XAJAX stuff together and allows it to do it's thing. Simply, include the XAJAX library and then register a callback function showDataGrid, which should be fairly self-explanatory. dgCommon.php < ?php require_once('includes/xajax.inc.php'); session_start(); $xajax = new xajax("callbacks/cbDataGrid.php"); $xajax->registerFunction("showDataGrid"); ?> Next for the meat, the actual work-horse of the whole live datagrid. This callback function is only able to sort, search and count our rows. I've tried to keep this as simple and basic as possible. I use my own home brewed database class, but you can use PEAR's DB class if you like. You'll notice I'm using clsDataGrid which I won't include here since it's rather long. The clsDataGrid class is basically a class that displays a HTML table. The methods/setters set up CSS styles and define how the datagrid is going to look. callbacks/cbDataGrid.php < ?php require('clsDB.php'); require('clsDataGrid.php'); require_once('../dgCommon.php'); $commonDB = new clsDB($GLOBALS['DB']); /* * getNumRows * */ function getNumRows($strColumn=NULL,$strValue=NULL) { GLOBAL $commonDB; // Possibly use memcache here? $query = "SELECT COUNT(*) AS numrows FROM tblCustomer"; if ($commonDB->query($query)) { $row = $commonDB->fetchRow(); } return $row['numrows']; } // END getNumRows /** * * Primary Callback Function * */ function showDataGrid($intStart=0, $intLimit=25, $strOrderCol=NULL, $strSortDir="ASC", $strWhere=NULL) { GLOBAL $commonDB; $objResponse = new xajaxResponse(); $objDataGrid = new clsDataGrid(); $objDataGrid->setTableName('ibDataGrid'); $objDataGrid->setTableStyle('style="width:80%; border: 2px solid #C3DAF9; color:#000; padding:0px; margin:0px;" cellspacing=0 cellpadding=0′); $objDataGrid->setHeaderStyle('style="text-align: center; font-family: tahoma; font-size: 10px; border:0; margin:0; padding:3px; font-weight:bold; color:#000; background-image:url(images/mso-hd.gif); no-repeat; border-bottom: 1px solid #6593CF;"'); $objDataGrid->setCellStyle('style="text-align: left; font-family: tahoma; font-size: 10px; color:#000; border:0; margin:0; padding:3px; border-bottom: 1px solid #DDECFE; border-left: 1px solid #F1EFE2"'); $objDataGrid->setStyleEven('style="background: #F5F5F5; border:0; margin:0; padding:0;"'); $objDataGrid->setStyleOdd('style="background: #fff; border:0; margin:0; padding:0;"'); $objDataGrid->setNavRowStyle('style="font-family: tahoma; font-size: 10px; height: 20px; border:0; margin:0; padding:0px; font-weight:bold; color:#000; background-image:url(images/mso-hd.gif); no-repeat; border-top: 1px solid #6593CF;"'); $objDataGrid->setLimit($intLimit); $objDataGrid->setOffset($intStart); $objDataGrid->setOrderCol($strOrderCol); $objDataGrid->setSortDir($strSortDir); $cols = array(); $cols['customer_id'] = "Customer ID"; $cols['first_name'] = "First Name"; $cols['last_name'] = "Last Name"; $cols['email_address'] = "E-Mail Address"; $cols['phone_number'] = "Phone Number"; $objDataGrid->setDBColumns( array_keys($cols) ); $objDataGrid->setColumnHeaders( array_values($cols) ); $query = 'SELECT ' . join(', ',array_keys($cols)) . ' FROM tblCustomer'; if ($strWhere != NULL) { $query .= ' WHERE ' . $strWhere; } if ($strOrderCol != NULL) { $query .= ' ORDER BY ' . $strOrderCol . ' ' . $strSortDir; } $query .= ' LIMIT ' . $intStart . ',' . $intLimit; if ($commonDB->query($query)) { while($row = $commonDB->fetchRow()) { $objDataGrid->addRow($row); } $objDataGrid->setTotalRows(getNumRows()); $objResponse->assign('dataGrid', "innerHTML", $objDataGrid->renderDataGrid()); } else { $objResponse->assign('dataGrid', "innerHTML", "No results found."); } return $objResponse; } $xajax->processRequest(); ?> I hope a lot of this code is self explanatory. You don't have to put your CSS inline like I did. You can use your own CSS files, just as long as you use proper CSS HTML tags in the setters. Update the column names to fit your database scheme. If you use my DB class, you'll have to update config.php and setup the DB credentials there.  Related Listings:
|
| Posted: 18 Dec 2009 04:13 PM PST A bit of a friendly challenge was put to me by Chris Heilmann, a London based Yahoo developer and JavaScript guru / author. So, I have updated this little demo with improved expand / collapse toggle behavior. I have also made it so that each portlet can be dragged and dropped, ala Netvibes. This was made possible using the Interface plugins for jQuery. I am going to go out on a limb here and say that this whole crazy notion about Ajax (it's not an acronym), JavaScript and Web Standards is more than just a fad. In fact, I dare say that it is here to stay. Yes sir-ee, these Intarwebs are alive with so many flashy widgets, you'd swear we are in the 1990's all over again. Recently, the man himself – Zeldman had this to say about it. Web 1.0: Pointless Flash widgets. Not to be left behind, I have found myself using JavaScript more and more in the workplace. Without wanting to spark a debate over which JavaScript framework / toolkit is superior, I just wanted to say that jQuery is very cool and well worth checking out. Much like I did with my pointless moo.fx iMac, I have put together a little demo showing off some of jQuery's native features. Initially, I was going to title this post "jQuery for Designers," but then I realized that has already been done before, twice. What I love about jQuery is that as a designer who is comfortable with CSS, you will immediately appreciate the familiarity of descendant selectors. Another nice aspect is that it has been rigorously tested in multiple browser situations by a dedicated group of JavaScript enthusiasts. I'm subscribed to the jQuery mailing list, and it's never a dull day with all that discussion. In CSS, if you wanted to get all links with the class name of "toggle" you would write that as a.toggle. In jQuery you write that as, you guessed it – a.toggle. As a designer, since you are familiar with descendant selectors, then the concept of going up the DOM tree will not be tough to grasp. So, instead of starting at some container and moving down, let's start at a single point and move up. Here is a code example from the demo… $('a.toggle').click(function() { $(this).parent('div').next('div').toggle(); return false; } ); So, first we're saying "Yo JavaScript, go get me all the links with the class name toggle, pronto!" Once we've got those links, we attach an onclick event handler with click(function(){…}). Now, if anyone clicks any of those links, then it starts a chain reaction. It begins with the link itself, represented by this, and then finds its containing element, called a parent in JavaScript. If the parent has the tag name div, then it finds the next nearest tag. If this is also a div then it will apply the toggle() to it. If it's visible it will get display: none; but if it's hidden it will be shown automagically. So, this means the aforementioned piece of code can be put in the page just once, and any of the links with the class toggle will respond to the click, but only affect the div immediately following the containing parent div. Likewise, you could simplify that script even further by just writing this… $('a.toggle').click(function() { $(this).parent().next().toggle(); return false; } ); If you used that bit of code, the next item after the link's containing element would be hidden, regardless of what tag type it might be. That makes for one incredibly portable piece of code. Also, you can apply that to more than just links, putting the click event handler on any tag you want with any ID or class name. Now, in the demo you might be asking yourself what the difference between show() / hide() and toggle() are. Good question – see, you're catching on already! Show and Hide do just that: showing hidden things, and hiding visible things. Toggle acts as a single button that does both and determines the state automatically. In the demo, if you toggle one portlet to visible and hit "Expand," all will be visible. If you were to toggle it off and hit "Collapse," all would be hidden. If you hit "Invert" though, that calls a toggle on all the portlets, and will hide all that are shown and/or show all that are hidden. This can result in what is depicted below. $('a.toggle').click(function() { $(this).parent('div').next('div').toggle('slow'); return false; } ); That would cause the toggled portlet to slide in and out of place. With no speed specified, the change is done without delay, which is what I tend to prefer since animations can run slowly on less powerful computers, whereas instant changes are, well – instant. jQuery also comes with a variety of other animations like slideDown, slideUp, fadeIn, fadeOut, etc. It can also handle heavier things like innerHTML, Ajax calls, XPath and regular expressions. Without belaboring the point, if you are designer who wants to learn about JavaScript but isn't sure where to start, why not download my example and dissect it, then try your hand at wielding jQuery for a spell. Also, be sure to check out the following resources for a more comprehensive explanation of just how powerful this lightweight JavaScript library can really be. Related Listings:
|
| Posted: 18 Dec 2009 04:00 PM PST There is a brand new Version of the Tab Menu available – it's called Easy Tabs 1.2 and you can find and download A lot of people ask me about the Tabs i'm using on this page – so i decided to pack it in a zip file for you. You can use this Menu for your own Projects and Websites. * If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick Code Explanation There are 3 new Settings you can set in the javascript //Set the number of your menu which should autochange var autochangemenu = 1; //Set the speed in seconds when tabs should change var changespeed = 3; //should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes var stoponhover = 0; Related Listings:
|
| Posted: 18 Dec 2009 03:33 PM PST This is a quite simple process. Let's assume we have all the code already in place from the last tutorial. In your motionpack.js file, let's add a new function at the very bottom, looking like this: function toggleSlide(objname){ if(document.getElementById(objname).style.display == "none"){ // div is hidden, so let's slide down slidedown(objname); }else{ // div is not hidden, so slide up slideup(objname); } } Now, stepping though this function is very simple. There's an if-statement to check is the DIV is already hidden, or if it's still visible. If the style.display property is set to "none", then it's hidden, so we slide the DIV down. If it is visible, the code jumps to the else statement, and slides the DIV up, using the same slidedown() and slideup() functions we used in the last tutorial. Now, your link itself would look like this: <a href="javascript:;" onmousedown="toggleSlide('mydiv');">Toggle DIV Slide</a> This is assuming your DIV still has the ID of 'mydiv'. And finally, here is the new code in action. Enjoy. 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.