One of the biggest problems that I come across time and time again is dealing with accented characters when it comes to jQuery and PHP. My latest problem involves using the autocomplete plugin (http://www.devbridge.com/projects/autocomplete/jquery/) with a database that contains city names. Of course, living in Quebec, this means that the city names contain accented characaters.

The first problem is making the search function ignore accents so that searching the database for "montreal" will return "Montréal". The second half of the problem is returning "Montréal" when actually typing in "Montréal".

I managed to solve the first problem by modifying the .php file that does the searching. I created a function which in mysql will convert accented characters to their non-accent counterparts:

  function mysql_remove_accents($Value) {
    $Value = 'TRIM(' . $Value . ')';
    $FindArray = array('á', 'Á', 'à', 'À', 'â', 'Â', 'ä', 'Ä',
                          'ã', 'Ã', 'ç', 'Ç', 'é', 'É', 'è', 'È',
                          'ê', 'Ê', 'ë', 'Ë', 'í', 'Í', 'ì', 'Ì',
                          'î', 'Î', 'ï', 'Ï', 'ó', 'Ó', 'ò', 'Ò',
                          'ô', 'Ô', 'ö', 'Ö', 'ú', 'Ú', 'ù', 'Ù',
                          'û', 'Û', 'ü', 'Ü',
                          'á', 'Á', 'à', 'À',
                          'â', 'Â', 'ä', 'Ä',
                          'ã', 'Ã', 'ç', 'Ç',
                          'é', 'É', 'è', 'È',
                          'ê', 'Ê', 'ë', 'Ë',
                          'í', 'Í', 'ì', 'Ì',
                          'î', 'Î', 'ï', 'Ï',
                          'ó', 'Ó', 'ò', 'Ò',
                          'ô', 'Ô', 'ö', 'Ö',
                          'ú', 'Ú', 'ù', 'Ù',
                          'û', 'Û', 'ü', 'Ü');
    $ReplaceArray = array('a', 'A', 'a', 'A', 'a', 'A', 'a', 'A',
                          'a', 'A', 'c', 'C', 'e', 'E', 'e', 'E',
                          'e', 'E', 'e', 'E', 'i', 'I', 'i', 'I',
                          'i', 'I', 'i', 'I', 'o', 'O', 'o', 'O',
                          'o', 'O', 'o', 'O', 'u', 'U', 'u', 'U',
                          'u', 'U', 'u', 'U',
                          'a', 'A', 'a', 'A', 'a', 'A', 'a', 'A',
                          'a', 'A', 'c', 'C', 'e', 'E', 'e', 'E',
                          'e', 'E', 'e', 'E', 'i', 'I', 'i', 'I',
                          'i', 'I', 'i', 'I', 'o', 'O', 'o', 'O',
                          'o', 'O', 'o', 'O', 'u', 'U', 'u', 'U',
                          'u', 'U', 'u', 'U');
     foreach ($FindArray AS $Num => $Char) {
      $Value = 'REPLACE(' . $Value . ', "' . $Char . '", "' . $ReplaceArray[$Num] . '")';
    }
    return $Value;
  }

Using this function, I coded a file called autocomplete.php to do the actual searching:

<?
  include_once 'modules/include.php';
  $Values = '';
  if (strlen($_GET["query"]) > 1 && is_numeric(substr($_GET["query"], 1, 1))) {
    $PostalQuery = 'SELECT LocationPostalCode FROM LocationPostalCodeTable';
    $PostalQuery .= ' WHERE LocationPostalCode LIKE "' . str_replace(' ', '', $_GET["query"]) . '%"';
    $PostalQuery .= ' ORDER BY LocationPostalCode';
    $PostalQuery .= ' LIMIT 0, 10';
    $PostalResult = mysql_query($PostalQuery) or die ('Postal Query Failed: ' . mysql_error());
    while ($PostalLine = mysql_fetch_assoc($PostalResult)) {
      if ($Values !== "") {
        $Values .= ',';
      }
      $Values .= '\'' . $PostalLine["LocationPostalCode"] . '\'';
    }
  } else {
    $CityQuery = 'SELECT ContentValue, ContentIndex FROM ContentTable';
    $CityQuery .= ' WHERE ContentIndex LIKE "LocationCity\\_%"';
    $CityQuery .= ' AND ' . mysql_remove_accents("ContentValue") . ' LIKE "' . make_index_safe($_GET["query"]) . '%"';
    $CityQuery .= ' AND LanguageID = "' . $_GET["LangID"] . '"';
    $CityQuery .= ' ORDER BY ContentValue';
    $CityQuery .= ' LIMIT 0, 10';
    $CityResult = mysql_query($CityQuery) or die ('City Query Failed: ' . mysql_error());
    while ($CityLine = mysql_fetch_assoc($CityResult)) {
      if ($Values !== "") {
        $Values .= ',';
      }
      $CityID = substr($CityLine["ContentIndex"], 13);
      $ProvinceQuery = 'SELECT LocationProvinceID FROM LocationCityTable';
      $ProvinceQuery .= ' WHERE LocationCityID = "' . $CityID . '"';
      $ProvinceResult = mysql_query($ProvinceQuery) or die ('Province Query Failed: ' . mysql_error());
      $ProvinceLine = mysql_fetch_assoc($ProvinceResult);
      $Values .= '\'' . $CityLine["ContentValue"] . ', ' . content_get("LocationProvince_" . $ProvinceLine["LocationProvinceID"]) . '\'';
    }
  }
?>
{
 query:'<?= $_GET["query"] ?>',
 suggestions:[<?= $Values ?>]
}

The search field in the html has to be modified to output the proper text into the input field

        function html_entity_decode(str) {
          var ta=document.createElement("textarea");
          ta.innerHTML=str.replace(//g,">");
          return ta.value;
        }
        $("#searchfield").autocomplete({
          serviceUrl: "/autocomplete.php",
          params: { LangID: "%setting-langid%" },
          onSelect: function(data) {
            $("#searchfield").val(html_entity_decode(data));
            $("#search").submit();
          },
          onKeydown: function(data) {
            alert("marker");
          }
        });

To make sure that accent characters inputted into the search field are sent to the autocomplete function properly, the jquery.autocomplete.js also needs to be modified. The following function must be added into the .js file:

  function stripVowelAccent(str) {
    var s=str;
    var rExps=[ /[\xC0-\xC2]/g, /[\xE0-\xE2]/g,
                /[\xC8-\xCA]/g, /[\xE8-\xEB]/g,
                /[\xCC-\xCE]/g, /[\xEC-\xEE]/g,
                /[\xD2-\xD4]/g, /[\xF2-\xF4]/g,
                /[\xD9-\xDB]/g, /[\xF9-\xFB]/g ];
    var repChar=['A','a','E','e','I','i','O','o','U','u'];
    for(var i=0; i    s=s.replace(rExps[i],repChar[i]);
    return s;
  }

Next, the onValueChange function needs to be modified to make proper use of the new function:

    onValueChange: function() {
      clearInterval(this.onChangeInterval);
      this.currentValue = this.el.val();
      var q = this.getQuery(stripVowelAccent(this.currentValue));
      this.selectedIndex = -1;
      if (this.ignoreValueChange) {
        this.ignoreValueChange = false;
        return;
      }
      if (q === '' || q.length < this.options.minChars) {
        this.hide();
      } else {
        this.getSuggestions(q);
      }
    },

With all of those items in place, autocomplete now ignores accented characters and can perform a proper search of the MySQL database.

The jQuery 'Validate' module is one of the cornerstones of any web programmer's base set of plugins. The module is extremely powerful as well as extremely well programmed and flexible. One of the greatest things about the validation module is how easy it is to expand on the existing functionality. 

Personally, I have been doing a lot of work and experimentation with the module particularly when it comes to remote validation. By using either the 'remote' function built into the module or by creating your own unique extension, you can get the validate module to check an input's value against a database.

The concept is a little overwhelming at first but once you break it down it actually makes a lot of sense. I'm going to break this up into two posts to first explain how to use the remote function, then how to create a function of your own design.

The 'remote' function uses the same basic syntax as any other rule in the validate module. For instance, if we have a form called #MainForm that we want to validate:

       $(document).ready(function() {
        $("#MainForm").validate({
          rules: {
            email: {
              required: true,
              email: true
            }
          },
          messages: {
            email: {
              required: "Please enter an Email Address",
              email: "A valid email address is required"
            }
          }
        });
      });

      if($_GET["email"] == // some check //) {
        echo 'true';
      } else {
        echo 'false';
      } 

I wasted about two hours trying to figure out what the problem was with a json call in my jQuery script that was working fine just the other day. In the end it was a simple problem that no one online had a solution for.

Everytime I start a new project, I first make sure that all of my third party scripts are up-to-date. In this case, the project was using a variety of jquery scripts including the lastest jQuery 1.4.2 along with the latest version of jquery.form.js. This newest project was no different.

I installed my php scripts and loaded up my Drive2 code base for the project and started implementing and modifying custom modules to meet the client's needs. I start my testing and I get stuck right away on an inventory management function that I had been using for months.

I immediately trace the problem to a json call that is being made. Everything looks fine in the code and I compared the jQuery to a live project that I had launched just a month earlier. Everything is the same except for the jQuery version.

Just a little background on how json works. The idea in this case is that I want to populate a child drop down menu with data from a MySQL database. To do this, json takes the selected value from the parent drop down and onChange updates the child by connecting to another php file that spits out data from the database based on the parent value passed to it via a GET. The json does this by taking the data and processing it in a call back function. The jQuery code is as follows:

              $("[name=CatalogCategoryID]").change(function() {
                $.getJSON("admin_catalog_list-subcategory.php", {id: $(this).val()}, function(j) {
                  var options = '';
                  for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                  }
                  $("[name=CatalogSubCategoryID]").html(options);
                });
              }); 

This function calls "admin_catalog_list-subcategory.php" with the value from "CatalogCategoryID" which is name of the parent drop down. The GET value is passed as "id" using the value "$(this).val()".

"admin_catalog_list-subcategory.php" does a database call and spits out data that looks like this:

[
{optionValue: 40, optionDisplay: 'Lorem'},
{optionValue: 41, optionDisplay: 'ipsum'},
{optionValue: 42, optionDisplay: 'dolor'},
{optionValue: 43, optionDisplay: 'sit'},
{optionValue: 44, optionDisplay: 'amet'},
{optionValue: 45, optionDisplay: 'consectetur'},
{optionValue: 46, optionDisplay: 'adipiscing'}
]

The json function then uses the callback function and takes the values to re-populate "CatalogSubCategoryID".

The problem was that the above code had stopped working. I started doing some research into the problem and found a ton of documentation on json / jQuery / ajax problems but nothing helpful.

Because json is a shorthand version of the ajax functions, I first tried converting everything into a basic ajax script to see if I could narrow down the problem:

              $("[name=CatalogCategoryID]").change(function() {
                $.ajax({
                  url: "admin_catalog_list-subcategory.php",
                  dataType: 'json',
                  data: "id="+$(this).val(),
                  success: function (j) {
                    var options = '';
                    for (var i = 0; i < j.length; i++) {
                      options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                    }
                    $("[name=CatalogSubCategoryID]").html(options);
                  }
                });
               });

Still no luck. Firebug was reporting that the data was coming back to me and when I inspected everything, it looked fine. For whatever reason, the callback function refused to run. What's worse was that I got no error messages in javascript, just no response.

Looking around, I found other various functions that I tried to implement and ultimately ended up with the following code:

              $("[name=CatalogCategoryID]").change(function() {
                $.ajax({
                  type: "GET",
                  url: "admin_catalog_list-subcategory.php?id="+$(this).val(),
                  beforeSend: function(x) {
                    if(x && x.overrideMimeType) {
                      x.overrideMimeType("application/j-son;charset=UTF-8");
                    }
                  },
                  dataType: "json",
                  success: function(data){
                    // do stuff...
                  }
                });
              });

* // do stuff ... was obviously where I put in the for loop.

I finally got the point where I managed to 'alert()' simple text when I replaced the 'function()' call. I even managed to 'alert("marker")' from within the function as long as I excluded 'data' in the 'function()' call.

I continued to do more research until I came across a small article talking about the new formatting rules in 1.4.2 for json and ajax calls. The problem was not with the jquery, it was with the output from the php file.

It turns out that single quotes are no longer valid in 1.4.2 and that you have to use double quotes, even for your column names. So I reverted all of my jQuery back to the original code and I modified my "admin_catalog_list-subcategory.php" script to output the following:

[
{"optionValue": 40, "optionDisplay": "Lorem"},
{"optionValue": 41, "optionDisplay": "ipsum"},
{"optionValue": 42, "optionDisplay": "dolor"},
{"optionValue": 43, "optionDisplay": "sit"},
{"optionValue": 44, "optionDisplay": "amet"},
{"optionValue": 45, "optionDisplay": "consectetur"},
{"optionValue": 46, "optionDisplay": "adipiscing"}
]

Problem solved. This took up two hours of my life for nothing, I just hope my notes will help someone else.

Lately I have been finding myself using more and more jquery. In an ever-changing online environment, web GUIs are becoming more complex and clients demand that GUIs do more. The problem is that the way in which some of the more advanced database ajax features are managed by different browsers leaves a lot to be desired.

My most recent problem surfaced while working on a dynamic location selection form. The site visitor is able to select a city based on country and continent. To ensure consistency, the visitor selects a continent from a drop down which updates the country drop down via json call to a php file connect to a mysql database. The change in continent updates the country drop down. The change in country updates the city drop down. The city drop down is also populated via a json call to a php file connected to a database.

Everything was working fine until the client made a 'minor request'. Each city list should have an option at the end labeled 'other'. If a visitor selects this option, they will be given a text box to enter a city name of their choice.

I set out to work and I updated the already complex jquery infrastructure to include a function which checks to see what value the 'city' has been set to. If it's 'other' then the system would display (show) the text box to allow the visitor to enter their own city.

The problem I came across is that the way in which browsers (I'm generalizing since I have not done all my testing yet) handles json updates is that it performs the update, completes all of the javascript processing, THEN updates the values of the drop downs. This is a problem since I have to make an update to the drop down first, THEN grab the value, THEN assess whether or not to display the text box.

I'm going to continue to work on this and hopefully have a solution to post up here soon.
 

Internet Explorer was THE browser when I first started working on the web close to ten years ago. In that time, a lot has changed. For those who are new to the industry, there is a lot of history that you should take into account when trying to understand why browsers and companies act the way they do. If you know the back story, there is much to debate about who is still leading the way. If you're in the industry, you're looking ahead to see where to place your chips.

Ten years ago, the web was in a funny place. Some considered the Internet to be the wave of the future while others still insisted that there was no viable way to make long-term gains out of a failing business model. Keep in mind that this was after the 'Internet Bubble' had just burst, by the way, a great time to start a web business (sarcasm).

The Internet was still scattered, the future was unclear. Some people saw the web as being nothing more than simple, disconnected websites while others looked to the future to use the web for social communication and beyond. Websites of the time were simple creatures and other than sites like MySpace were used as little more than electronic encyclopedias and bill boards.

During this time, Internet Explorer and Microsoft were king and all other browsers were but a blip on the radar. I remember hosting sites for clients and looking at stats that would show 99.9% of the browsers being Internet Explorer on a Windows System. Some small percentage was Internet Explorer running on Mac Systems and all other browsers were not even worth mentioning.

At this time, programming a website meant programming for Internet Explorer. Web standards have always existed and even at that time there were browsers (like Navigator and Opera) that would try and follow these rules. Programmers always knew, however, that programming according to standards meant that the 99.9% of your audience running IE would be looking at a garbled site. Microsoft and IE seemed to make no apologies for this and at times even blatently implemented their own version of HTML on purpose to secure their browser's longevity.

When FireFox started becoming popular, it was an uphill battle. The browser was cleaver in that it would try to follow standards but only to a point. The first few versions that were popular seemed to try and work with IE standards while providing a few unique features that IE couldn't offer (such as tabbing). FireFox quickly became the favorite browsers of industry insiders even though they would continue to program for IE users.

I remember seeing the trend starting up slowly around the mid-2000s. FireFox all of a sudden accounted for a massive 3% of the web visitors on my client sites. It was not a big number but to many of us in the tech industry, this was huge. This meant that IE finally had some what of a rival.

Microsoft of course ignored this and continued to release new versions of IE that were still using their own standards. The new releases seemed to get heavier and heavier focusing on bells and whistles instead of on improving on their browser. FireFox in the meantime was focusing on making their browser less susceptible to spyware and crashing.

After just one year, FireFox suddenly accounted for 10% (up from 3%) of the browsers on the web. This was at the same time a huge releaf and a huge headache for programmers. On the one hand, we began to see IE browsers being released with some conformity to HTML standards. On the other hand, the continued emergence of the new browser meant we now have to make sure to program for both browsers so that we don't alienate 10% of our potential audience.

This was difficult at times as some tags would react blatently opposite of each other depending on the browser. The introduction of CSS scripting helped but at times, your CSS code would just look like a script of IE hacks and redundent code to get both browsers to work. Nonetheless, over time, the new trend forced Microsoft to make some major changes in an attempt to stop bleeding users. Programmers started seeing changes that made IE more complacent and easier to work with.

Today, modern stats show FireFox accounting for as much as 1/3 of all browsers being used on the web. There are several reasons to account for this. First off, the default Mac browser, Safari, has some major issues trying to render even some main stream sites. A lot of Mac users I know download FireFox for Mac right out of the box. Windows users continue to use FireFox simply because they have gotten accustomed to features such as tabbing (only recently available on IE). Finally, Linux has grown in popularity over the last few years as people look for alternatives to Mac OS and Windows. FireFox has long been the browser of choice for many Linux users.

It's hard to argue who is ahead at this point. Although IE is still the clear leader in terms of straight numbers, it seems that the trend is moving towards FireFox as the new browser of choice for those willing to install it. IE is still bundled very closely to the Windows plateform but even Windows itself is losing ground to Mac OS and Linux. IE has also lost its position of strength as it is forced to compromise and meet HTML standards. Finally, the new Chrome browser is not only lighter and more stable (some say) than FireFox but is also built specifically with Mobile users in mind and is possibly going to become the new OS of choice for NetBooks. All of these factors make it hard to tell who is in the lead in this close race to control our browsers.

Looking to the future we are now in the age of web applications and AJAX programming. A simple, flat, website is no longer worth what it used to be. Flash is too heavy and time consuming to work with and is not SEO friendly. Javascript on its own is far to rigid and difficult to program in. Many have turned to jQuery as the new standard and browsers that fall behind are probably going to be in trouble.

Taking all that into account the logical thing to do would be for browsers look ahead and make sure that the next generation of webware is supported by their products. Nonetheless, Microsoft again has decided to go their own way with Javascript standards and is now starting to run into trouble. Basic features of jQuery don't work properly in the latest version of IE. Will this hurt the browser's competative edge? Only time will tell.

With AJAX based web and intranet applications becoming ever more prevalent in the business world and browser competition becoming more fierce, is there still room on the web for cowboys who want to carve their own paths when it comes to web standards?

We have been using the same cropping tool for the last couple of years and felt that it was time for an update. As part of our on-going commitement to update our Ajax functionality to work with jQuery, we took some time to integrate a new cropping tool into our content and inventory management systems.

The new tool works seamlessly with our existing systems and brings about a newer, cleaner look to our administrative software. The rollout is in its final stages of testing and we hope to upgrade our premium clients' live sites soon.

Details of the new cropping tool can be found http://deepliquid.com/content/Jcrop.html

Every once in a while, I will hear someone in the industry claim that SEO is dead and something else is going to take its place (usually social networking). While, I do feel that search engine optimization is only a small component in an online marketing strategy, I would have to say that SEO is here for at least the next few years. It's a popular statement for 'forward thinkers' to claim that Google's days are numbered and that soon, the masses are going to stop searching in the traditional method and start find information on the web using some other form of media. These 'forward thinkers' are also usually self-proclaimed radical thinkers that can see ahead of the markets and know more about media than actual media and marketing experts. Unsurprisingly, these salesmen usually follow up their claims by getting you to invest in their great new idea.

The truth of the matter is, like it or not, Google is going to be around for the foreseeable future. Just like the Yellow Pages were around forever back in the pre-web days, there simply is not viable alternative. Google indexes everything it can and provides people with a tool to quickly flip through and find what they need. How do you replace such a simple, basic idea?

SEO will be around for at least a few more years simply because it logically has to be. Google is not powered by magic, it is powered by technology. Google sends out its bots to crawl the web and index what it can find so that we can search through an ever changing online environment. Obviously the Google algorithm is based on hard facts to display appropriate information when someone makes a search query. The secret to SEO is not to try and trick this algorithm but make it work for you and in the process, develop a better product. True, proper search engine optimization takes a lot of hard work and dedication. SEO experts know this and some do what it takes to generate proper code and content while others are constantly finding new ways to cut corners.

When people say that 'SEO is dying', what they mean is that those out there cutting corners are slowly falling behind. This is good. This means that Google is working hard to reward those of us who actually take the time to create new content, to provide useful information, and contribute positively to the online-world.

When I approach SEO, I take a client's content and I rewrite it properly. I take points that are important to their message and work on creating text that makes the site a useful source of information. When people learn something new from your site, they tend to trust your products and marketing. When they trust your message, they will start to buy your products. If your information is constantly being updated and your providing new, useful information to your readers, Google will pick up on this and reward you with a higher ranking.

So, is SEO dead? I think that we are nearing the end of the days when SEO guys can make a few keyword changes to a site, point some random links to a client's domain and artificially get a site moved to the top of the page. If you define SEO as clean coding a messy site and reorganizing content so that it's easier to read and more informative for your visitors, then 'SEO' is here to stay.

I recently started working on a project where I took over a semi-finished PLIGG project. I have to admit, I have little to no experience when it comes to third party CMS's (or whatever the plural of CMS should be). I am by no means an expert on the subject and my thoughts are probably extremely bias.

I also have to admit, when it comes to programming, my style is usually considered fairly unorthodox. Based on my experience though, I have to say, I would never voluntarily use PLIGG to complete another project as long as I work in the industry. I can understand the complexity and intricacy of these systems. I know that in theory, modular program and object oriented program are far superior to straight scripting and that it is supposed to be easier to work with when dealing with a team of programmers. In my personal experience, however, it just seems like over-kill for what should be a fairly straight forward development environment. What's worse, is that the moment you step out of the originally intended scope of any given project, you start having to deal with code hacking plug-ins or base code which could result in incompatibilities with future security updates.

The problem I have with these CMS's is that you end up with an overly complicated system that has been worked on by too many people making too many undocumented changes to the code. Add to that the fact that every experienced CMS code hacker ends up 'creating' their own idealized version of code that they use as a base for any project they take on. When you look up Joomla, Drupal, or even the new industry favorite WordPress, you find an endless list of sites that talk about how to modify the base code. When you jump into the code, you end up finding mismatched styles with random 'shout outs' commented in.

Tracing back functions becomes a chore and every time you make a change you find a conflict. You keep having to re-test and having to make more modifications elsewhere in the code. Before you know it you've wasted several hours for a simple change. Perhaps it's my lack of experience with these CMS's but either way, at the end of the day, I can't get the work done fast enough using pre-packaged software.

When I work with my own CMS by contrast, I know exactly where everything is. All of my functions are split up into basic functions, custom functions and on-the-fly functions stored in the database. All of the core code has been tested time and time again. The modules are designed specifically to work with each other. I even take extra steps to document my code and make the coding style as uniform as possible. If I have to make a change to the front end of a project, I rarely ever have to modify base code. If I do, I end up adding functionality, not modifying existing functionality.

At the end of the day, when a client asks me why I use my own CMS instead of something that has already been pre-programmed, I bring up three key points: my software is built around the management of multi-lingual text from day one, not just forced to adapt to a multi-lingual environment; my CMS was developed from scratch over ten years by very few contributors who were aware of the other modules in the base code; because it is not public code, my CMS is not exposed to as many security attacks. When asked WHY I created my own CMS, the answer is simple: when I as first asked to create a CMS driven site back in 2001, many of today's CMS simply did not exist.

So, although many of my peers in the industry may not agree with me, I do feel at the end of the day I can built a project on my CMS much quicker than I can with any pre-packaged CMS. My core modules run more smoothly, my code processes faster (being function based, not object-oriented) and it is easier to create and manage multi-lingual content.

Something so important that you would think it was one of the first things anyone would mention whenever writing up an explaination in JQuery, took me months to figure out on my own. Unbelieveable. Basically, whenever you use $("#someID").click() or $("#someID").change() or toggle() or some other event, a temporary 'this' object is created pointing back to whatever it was that triggered the event. You can then figure out 'value' and all sorts of other attributes belonging to that object. No one ever exaplains this anywhere!
 

I'm trying to figure out how to populate a table using database information queried through jquery on the fly. I'm thinking of just storing the information into a javascript array everytime and populating fields based on a selection algorythm. Not sure if there's a more refined way to do this where I can query the database and only pull out the relevant information.
 

Back when I was working on the BrianX project, I modified the fckeditor to grab the images folder from $_COOKIE["ImageFolder"]. If the cookie doesn't exist, the image folder is set to /images/ by default. This file is under the fckfolder: fckeditor\editor\filemanager\connectors\php\config.php

I also created an alternative configuration for the fckeditor's tool bar called 'BasicCustom'. This can be set under fckeditor\fckconfig.js
 

I ran into some problems after setting up the server. I wanted to take it off DHCP and give it a static IP. A few files to make note of:

/etc/network/interfaces        ->    this file contains the settings for eth0 (this file was missing the 'gateway' line
/etc/resolv.conf        ->    this file contains information related to the search domain

Also, I had to use nano instead of vi to modify the files. The following is an example of how to modify the interfaces file as admin:

sudo nano /etc/network/interfaces
 

The plugin is quite impressive and much more flexible than I had originally thought. In my latest use of this plugin, the form has to be available in three languages depending on the client's preference. Thus it stands to reason that when there is a mistake, the error messages should also be in three languages. As always, I store all of my multi-lingual text in my trusty ContentTable, however, now with the discovery that I can control and customize error messages, I can output the errors in any language I want.

First off, I set up the form as I normally would, with the added 'id' attribute on each input object. I also note the client's language preference by grabbing the current language using the function 'get_content' and a special value used for just this type of situation:

        <form method="post" action="" id="MailingListForm">
          <table>
            <tr>
              <td style="width: 200px;">First Name:</td>
              <td><input type="text" id="MailingListFirstName" name="MailingListFirstName" style="width: 300px; margin-right: 5px;"></td>
            </tr>
            <tr>
              <td>Last Name:</td>
              <td><input type="text" id="MailingListLastName" name="MailingListLastName" style="width: 300px; margin-right: 5px;"></td>
            </tr>
            <tr>
              <td>Email Address:</td>
              <td><input type="text" id="MailingListEmail" name="MailingListEmail" style="width: 300px; margin-right: 5px;"></td>
            </tr>
            <tr>
              <td>Verify Email:</td>
              <td><input type="text" id="MailingListEmail2" name="MailingListEmail2" style="width: 300px; margin-right: 5px;"></td>
            </tr>
            <tr><td colspan="2"><br></td></tr>
            <tr>
              <td colspan="2">
                <input type="hidden" name="MailingListLang" value="' . content_get("setting-lang", $LangID) . '">
                <input type="submit" value="Send">
              </td>
            </tr>
          </table>

Next I set up my jquery script:

        <script language="javascript">
          $(document).ready(function() {
            $("#MailingListForm").validate({
              rules: {
                MailingListFirstName: { required: true, minlength: 2 },
                MailingListLastName: { required: true, minlength: 2 },
                MailingListEmail: { required: true, email: true },
                MailingListEmail2: { required: true, email: true, equalTo: "#MailingListEmail" }
              },
              messages: {
                MailingListFirstName: "<br>Please enter your first name",
                MailingListLastName: "<br>Please enter your last name",
                MailingListEmail: "<br>Please enter a valid email address",
                MailingListEmail2: "<br>Please re-enter your email address"
              }
            });
          });
        </script>

And as a final touch, I set up my .error color:

        <style>
          .error { color: #ff0000; }
        </style>

Now all that's left to do is to create new label and error values in my ContentTable in different languages and apply them to my form using the 'get_content' function.

And that's it, a trilingual form with proper error messages :)
 

Doing the billing for AWDreams.com project. I had forgotten how I finally managed to hook the whole thing up. Because of the Elavon software (which I have to admit is pretty clean once it's all up and running), I had to reprogram the entire process flow for the forms. The client wants their donners to fill out one form, however, some parts of the form have to be stored on a database while other parts have to be submitted for the credit card transaction. My final solution was to have the script post to itself, make its validations and store the information on the database. Once the information was stored, the script generated a new form on the fly with the appropriate information that was then auto-submitted via javascript to Evalon for processing. Probably not best practice but I was under a lot of pressure to get the whole thing working and the final result is actually VERY clean. I'm quite pleased with the way the whole project turned out.
 

LesCheminsDor.ca

I like this project because it shows that we can do something in Flash.

BuyJDMEngines.com

This has got to be one of the best looking, most complexe yet cleanest sites I have built in a very long time. Unfortunately, the owners of the company have not yet committed the time in building up the site's database and content so I'm a little hesitant to show it off.

ItalianWeek.ca

This site is a complete mess but once it's cleaned up I will be able to show off how Drive2's multilingual functions work.

JapanMotorImport.com

Though a little dated now, the site still gets millions of hits per month and is definitely noteworthy.

LBPHS.ca

A very full site with lots of content and a decent visitor base. This site shows off what our software can do with proper maintenance.

SpaLeRefuge.com

A complex site that shows off a lot of custom programming.
 

I keep having to look up the same stupid characters so here's the 'most common' list:

anything with an accent:

&eacute;
&egrave;
&ecirc;

that stupid 'c' in the word Francais:

&ccedil;

upside-down V for when I'm creating buttons:

&Lambda;

the copyright symbol at the footer of every site:

&copy;

and for fun ... some boobies :)

&omega;

 

The last couple of projects I have been working on have been getting increasing complexe on the user side. Since the introduction of jQuery to my code, I have managed to do many of the validations on the user side, saving processing time and wasted server processing.

My latest challenge was to amalgamate serveral techniques when submitting a form. My goals were to validate the form quickly on the client side, before submission and to return data from a php file without reloading the page. In previous projects I had managed to accomplish both but not at the same time.

The first part of the code is to use the jquery.validate plugin to quickly validate the form. The form in question is a simple contact form which only has a few fields: first name; last name; email (with verification); and comment. The validation plugin is very simple to implement using just a few lines of code. Firstly, the plugin has to be called in the html by including jquery.validate.min.js. Then you create the form in normal html. Next you have to activate the validation code on the form by using:

$("#FormID").validate();

Finally, in each field that is required, you simply add the class 'required'. For email addresses, simply add the class 'email' as well as 'required'. The plugin is also very flexible: you can also specify additional such as 'minlength' and 'equalTo'.

<form method="post" id="FormID" action="send.php">
  <input type="text" name="FirstName" class="required">
  <input type="text" name="Email1" id="Email1" class="required email" minlength="3">
  <input type="text" name="Email2" class="required email" equalTo="#Email1">
</form>

The second part of the code was a little trickier. I wanted to set the whole thing up in such a way that when the form is submitted (after being validated) the original form would disappear and be replaced by the value echoed from a .php form (send.php in this case) that does the processing. To make this part work you will need the jquery.form plugin. Normally, the way this works is that you specify the form you want to submit and you use the 'ajaxForm' method. So in our case the code would be:

$("#FormID").ajaxForm({
});

Because I wanted the form to be replaced when the results from my .php file, I want to specify a 'target':

$("#FormID").ajaxForm({
  target: '#contact_content'
});

What this will do is that it will replace anything within '#contact_content' with the .html output from my .php file. Because I want the form to be replaced after being submitted, I put the form into a 'div' and gave it the id 'contact_content'.

Now, separately, both of these functions work quite well on their own. What I discovered was that together, the ajaxForm overrides the validation plugin and sends the post regardless of whether or not validate returns true or false. To get around this problem I had to code the ajaxForm within the validate function:

$("#FormID").validate({
  submitHandler: function(form) {
    jQuery(form).ajaxSubmit({
      target: "#contact_content"
    });
  }
});

The structure of the code is a little different to accomidate the fact that the ajax portion is now contained within the validate code. The code is fairly self explainitory and I'm tired of writing :)

The final result is that the form will appear when the page is first loaded. Before being posted to send.php, the form is validated using the jquery.validate plugin. If all the fields are filled in correctly, the form will be posted to send.php via the 'ajaxSubmit' method contained within the validate function. The send.php file will return output that is then shown in the 'div' with the id 'contact_content', thus replacing the original form. The final code:

<html>
....
<script language="javascript">
  $(document).ready(function(){
    $("#FormID").validate({
      submitHandler: function(form) {
        jQuery(form).ajaxSubmit({
          target: "#contact_content"
        });
      }
    });
  }
</script>
....
<div id="contact_content">
  <form method="post" id="FormID" action="send.php">
    <input type="text" name="FirstName" class="required">
    <input type="text" name="Email1" id="Email1" class="required email" minlength="3">
    <input type="text" name="Email2" class="required email" equalTo="#Email1">
  </form>
</div>
....
</html>
 

I will never understand why marketing companies always insist on using some sort of overly complicated merchant tool to do credit card processing. I know that back in the day, PayPal was super sketchy and associated with porn sites and warez but these days it's become the industry standard. Working with Mediavation is great but when they insist on using dated tools for the sake of impressing a client, it's frustrating to say the least.

Working on the email and quote systems for the site. A couple of problems with the jquery stuff not working properly in IE. Still very useful stuff though. Definitely one of the most advanced, cleanest sites to date. Using my custom CMS (drive2) software combined with jquery for the aJax stuff.