Archive for the ‘Client-side development’ Category.

Remove SVN folders from projects in Windows

This is a huge time-saver — big thanks to Hacktrix.com for this one!

I keep version-controlled directories of code snippets, plugins, components, classes, etc.  Problem is that when I go to paste in some of these snippets into projects (especially the more complex ones with deep folder structures), those SVN directories get copied over as well which can create all kinds of issues with the SVN repos on our SVN server.  Since I still work primarily from a PC, I wasn’t sure how to create a simple way to remove these directories.

Hacktrix.com has a great 2-step tutorial about adding a ‘delete SVN directories’ link to your right-click context menu in Windows.  They also have instructions for doing the same from OSX, but that was a bit less magical since it’s already easy enough to do that from the command line.

First, create a file with a .reg extension (cleanSVN.reg per the Hacktrix tutorial).  Paste in the following:

1
2
3
4
5
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN]
@="Delete SVN Folders"
[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN\command]
@="cmd.exe /c \"TITLE Removing SVN Folders in %1 && COLOR 9A  && FOR /r \"%1\" %%f IN (.svn _svn) DO RD /s /q \"%%f\" \""

Double-click the saved cleanSVN.reg file, and now ‘delete SVN folders’ will appear as a context menu item!  So now whenever I paste a plugin directory into a new project, I can just right-click and remove the existing SVN directories.  No more commit errors, no more accidental over-writing!  Hacktrix seems to be a pretty good resource — check them out!

 

A little jQuery redundancy

It’s kind of absurd to think that one of our sites would be up while Google’s Libraries API is down, but there is a real possibility that the google domain name could be blocked in certain countries and in certain circumstances. So just to be safe, here’s a quick little snippet to make sure it’s loaded either way. Note, this assumes you have jQuery on your webserver.

1
2
3
4
5
6
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
    document.write(unescape("%3Cscript src='/js/jquery1.5.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Detecting AJAX requests with PHP

In an effort to make client-side code as unobtrusive as possible, we typically take the approach of first building applications without JavaScript.  This practice makes sure all of our anchor tags have legitimate URLs in their href attribute.  We can then attached event handlers to the anchors that should trigger AJAX requests.  Then it’s simply a matter of reading the href attribute of the clicked item, and setting that as the source for the AJAX request.  Nothing new here…

1
2
3
4
5
$('a.trigger').click(function(){
  var src = $(this).attr('href');
  //AJAX request here
  return false;
});

But often we want to fork our controller logic based on whether or not a request was made via AJAX.  For example, no reason getting data we won’t be using in the AJAX response (like navigations, user data, etc).  Plus we want to load AJAX-specific views to return appropriate HTML snippets, or JSON objects.  So we just test to see if $_SERVER['HTTP_X_REQUESTED_WITH'] equals “xmlhttprequest” which seems to work consistently for all of the browsers on our checklist (note, this is sent when an AJAX request is made via jQuery – and most other JavaScript frameworks – but best not to assume).  We set this as a constant in our bootstrap file, allowing us to refer to it throughout our code.

1
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

One issue this brought up though was caching of AJAX requests, especially in Internet Explorer.  When updating our HTML with the server’s response, we often saw the entire page load into the target div.  IE was aggressively caching the AJAX request.  Simply setting JQuery to disable caching was the easy fix.

1
$.ajaxSetup({ cache: false });

Another simple approach would be to add a parameter to all of your AJAX requests. And even though the method outlined above is not tamper proof (not that anything really is), it seems a bit more reliable to me than the AJAX parameter approach, especially when you have many hands in the jar during the application development cycle. For more complex application development, the majority of PHP frameworks out there provide this via other means (CakePHP’s RequestHandler for example). But for our home-baked, lightweight Facebook Application frameworks, this works nicely.

Add external link tracking with jQuery and Google Analytics

Quick and easy way to setup Google Analytics tracking for all links that open in a new window (typically external links that wouldn’t normally be tracked)… Note, this should be called from within $(document).ready or after all anchor tags have been added to the DOM.

1
2
3
4
5
6
$('a[target=_blank]').click(function(){
    try{
        _gaq.push(['_trackEvent', 'External Links', 'Click', $(this).attr('href')]);
    } catch(err) {}
    return true;
});