Fix For DB-Toolkit DatePicker

Jack Huang DB-Toolkit 0 Comment

Posted February 19, 2013 by John Morris

This post describes a solution to a broken date picker dropdown in the DB-Toolkit plugin for WordPress.  This problem is present with the following versions of relevant software:

WordPress v3.5.2
DB Toolkit WordPress Plugin v0.3.3 and v0.3.2.026

DB Toolkit is an amazing plugin for WordPress that dramatically increases the power of WordPress as a generic content management system as opposed to a blog oriented content management system.  It allows you to create custom, database driven “applications” and “interfaces” that are automatically tied into WordPress admin tools.  However, I want to address a serious bug I have discovered.

Unfortunately, depending on which version of the plugin you use, the fix is different.  The two most prevalent versions of the plugin in distribution are versions 0.3.2.026 and 0.3.3.  The fix for 0.3.2.026 is a bit more complex, and is detailed farther down in the post.  The fix for 0.3.3 is detailed immediately below.

Using DB-Toolkit v0.3.3

In this version, unlike the previous one, the DatePicker is rendered, even though it may not be visible.  What is happening, is the DatePicker is displayed behind other content.  Fortunately, since the DatePicker is there, it is easy enough to make it appear on top of everything else like it is supposed to.

Reproduce the error

First, let’s go through how to reproduce the error.

  1. Setup a vanilla install of WordPress (reproduced using v3.5.2)
  2. Install and activate the DB Tookit plugin by David Cramer (reproduced using v0.3.3)
  3. Create a “New Application” using DB Toolkit.
  4. Create a “New Interface” in this new application
  5. Set this interface to use a new database table (to prevent corrupting any existing tables)
  6. Add a new field using the DatePicker type.
  7. Save your interface.
  8. Under the title of your new interface, click “View” followed by “Add Entry”

At this point, a jQuery UI DatePicker appears.  However, it is rendered behind the dialog box used to add entries.

DatePickerBehind[1]

As you can see in this example, the DatePicker is behind the modal dialog box.

Fix the problem

  1. Navigate to the directory containing your WordPress installation using your file browser.  If you are on a remote server, this can be done using an FTP client such as FileZilla.
  2. Once in your WordPress root directory, navigate to the directory “/wp-content/plugins/db-toolkit/data_form/fieldtypes/date/css”.
  3. Open the “datepicker.css” file in a text editor (download and open it if working on a remote server).
  4. Scroll down to line 18 which should contain the following:
    .dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#ffffff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.dropdown-menu.pull-right{right:0;left:auto;}
  5. In that long line of code, locate the portion fairly close to the left which says “z-index:1000;”
  6. Change the number 1000 to 9999 (the exact value of the number doesn’t matter, only that it is significantly higher than the 1000 value).
  7. Save the file. (Upload it to the remote server if necessary)
  8. Return to your interface, open it, and add a new entry.
  9. You may need to refresh your browser’s cache on this page.  In most browsers in non-Apple operating systems, this is accomplished by hitting the Ctrl+F5 key combination.  On OSX, the methods vary depending on your web browser.  You will need to Google the appropriate method.  Try searching for “hard refresh a page in InsertBrowserNameHere on a Mac”.
  10. Click inside your date picker field.
  11. Behold the wonderment that is a working DatePicker.
    DatePicker[1]
  12. Cheer
  13. Breathe a sigh of relief
  14. Smile
  15. et cetera

Cause of the Error (for anyone interested)

This is a simple CSS problem.  When dealing with elements which stack one on top of the other, the CSS property z-index is used to determine the stacking order.  The higher the z-index value, the further up the visual stack the item goes.  What’s happening in version 0.3.3 is that the DatePicker is getting a z-index of 1000, while the dialog box containing the DatePicker has a z-index of something higher.  So the fix above makes the DatePicker’s z-index value larger than the dialog box, and it subsequently appears as it is supposed to.

Known Issues

I am unaware of any side effects from this fix.  Any that would appear would be due to the DatePicker having a higher z-index than another element that you need to see.  However, I do not believe this will be a problem as when the DatePicker is displayed, it is likely to be the center of attention.  When you are focusing on other tasks, the DatePicker is hidden.  If something does break because of this, please let me know in the comments below.  Also, if it fixes your problem, I’d love to hear it.

Using DB-Toolkit v0.3.2.026

In this version, the DatePicker does not display at all due to a JavaScript exception.  The fix comes from experience I have gained during development of my own large-scale WordPress plugin in recent weeks.

Reproduce the error

First, let’s go through how to reproduce the error.

  1. Setup a vanilla install of WordPress (reproduced using v3.5.2)
  2. Install and activate the DB Tookit plugin by David Cramer (reproduced using v0.3.2.026)
  3. Create a “New Application” using DB Toolkit.
  4. Create a “New Interface” in this new application
  5. Set this interface to use a new database table (to prevent corrupting any existing tables)
  6. Add a new field using the DatePicker type.
  7. Save your interface.
  8. Under the title of your new interface, click “View” followed by “Add Entry”

At this point, a jQuery UI DatePicker is supposed to be setup for the DatePicker field.  However, a Javascript exception is thrown:

Uncaught TypeError: Object [object Object] has no method ‘datepicker’

Clicking inside the date field or the calendar button confirms that no DatePicker was setup.

Fix the error

  1. Navigate to the directory containing your WordPress installation using your file browser.  If you are on a remote server, this can be done using an FTP client such as FileZilla.
  2. Once in your WordPress root directory, navigate to the directory “/wp-content/plugins/db-toolkit/libs/”.
  3. Open the “functions.php” file in a text editor (download and open it if working on a remote server).
  4. Scroll down to line 495 which should contain the following:
    wp_enqueue_script("jquery");
  5. After this line of code, add the following:
    wp_enqueue_script(“jquery-ui”);
    wp_enqueue_script(“jquery-ui-datepicker”);

    That block of PHP code should now look like this:

    wp_enqueue_script("jquery");
    wp_enqueue_script("jquery-ui");
    wp_enqueue_script("jquery-ui-datepicker");
    wp_enqueue_script("jquery-ui-core");
    wp_enqueue_script("jquery-ui-dialog");
    wp_enqueue_script("jquery-ui-sortable");
    wp_enqueue_script("jquery-ui-tabs");
    wp_enqueue_script('jquery-multiselect');
    wp_enqueue_script('data_report');
    wp_enqueue_script('data_form');
    wp_enqueue_script('jquery-validate');

  6. Save the file. (Upload it to the remote server if necessary)
  7. Return to your interface, open it, and add a new entry.
  8. You may need to refresh your browser’s cache on this page.  In most browsers in non-Apple operating systems, this is accomplished by hitting the Ctrl+F5 key combination.  On OSX, the methods vary depending on your web browser.  You will need to Google the appropriate method.  Try searching for “hard refresh a page in InsertBrowserNameHere on a Mac”.
  9. Click inside your date picker field.
  10. Behold the wonderment that is a working DatePicker.
    DatePicker[1]
  11. Cheer
  12. Breathe a sigh of relief
  13. Smile
  14. et cetera

Cause of the Error (for anyone interested)

The DatePicker is created using the jQuery UI library.  Essentially, the cause of this error is that the developer did not include jQuery UI and its necessary components to form a functioning DatePicker.  Based on some of the files he has present, and some of the code he commented out, I believe this is because, at one point, he included his own version of jQuery UI instead of using WordPress’ built-in version.  Then, at some point down the road, he removed his custom version, but did not re-include WordPress’ version.  Doing so is accomplished by adding the code above with the “jquery-ui”.  Getting the functioning DatePicker then required including jQuery’s DatePicker module, done with the code above with the “jquery-ui-datepicker”.

Known Issues

I am unaware of any side effects from this fix.  I do not believe that any should crop up, unlike with my older fix.  In fact, if anything, this may fix a few other problems that I don’t know of.  If something does break because of this, please let me know in the comments below.  Also, if it fixes your problem, I’d love to hear it.

Leave a Reply

Your email address will not be published. Required fields are marked *