Fix For DB-Toolkit DatePicker Not Working

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.  As of today (July 6, 2013), 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.

DB-Toolkit Plugin - DatePicker renders behind modal.

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).  I recommend Notepad++ or Sublime Text 2, but any text editor will do.
  4. Scroll down to line 18 which should contain the following:
  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
  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).  I recommend Notepad++ or Sublime Text 2, but any text editor will do.
  4. Scroll down to line 495 which should contain the following:
  5. After this line of code, add the following:

    That block of PHP code should now look like this:

     
  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
  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.

 

 

 


Alternative Fix When Using DB-Toolkit v0.3.2.026

This is an old fix, I recommend you use the one above as this will break other parts of the plugin!

This post will explain how to fix one error that is present initially in the plugin, and then how to fix an error that arises due to the fix.

#1: DatePicker Exception

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

This fix was cobbled together using advice from a thread discussing this same problem on the plugin’s website.  The short version of the fix is update to the latest version of jQuery UI, and register that change in the plugin.

Here’s the specific steps I followed to do that:

  1. Download jQuery-UI.  At the time of this writing, the current version is 1.10.1.  However, later versions, if there are any, will likely work as well.
  2. 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.
  3. Once in your WordPress root directory, navigate to “/wp-content/plugins/db-toolkit/jqueryui/”.
  4. Rename “jquery-ui.min.js” to “jquery-ui.min.js.BACKUP” in case you want or need to restore this later.
  5. Copy your new jQuery UI file to this directory.
  6. Rename this new file to “jquery-ui.min.js”.
  7. Navigate to the directory “/wp-content/plugins/db-toolkit/libs/”.
  8. Open the “functions.php” file in a text editor (download and open it if working on a remote server).  I recommend Notepad++ or Sublime Text 2, but any text editor will do.
  9. Scroll down to line 491 which should contain the following:

    and replace it with this:

     
  10. Now, insert the following code onto line 496.

    That code block should now look something like this:

     
  11. Save the file. (Upload it to the remote server if necessary)
  12. Return to your interface, open it, and add a new entry.
  13. 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”.
  14. Click inside your date picker field.
  15. Behold the wonderment that is a working DatePicker.

#2: Draggable & Sortable Exception

But, before you celebrate, something else is now broken.  A useful feature of DB Toolkit is the ability to rearrange fields in the interface management screen which will automatically rearrange generated forms, generated lists/views, and more.  This is done using the jQuery UI draggable and sortable functionality… which is now broken thanks to our meddling.

Reproduce The Error

  1. Starting from where we left off above, edit your interface, and go to the “Fields Setup” tab.
  2. Attempt to rearrange fields by clicking and dragging them.
  3. Observe the whacky mayhem that ensues.

Upon further investigation, you will discover a thrown Javascript exception:

Uncaught TypeError: Object #<Object> has no method ‘isOverAxis’

Fix the Error

I discovered this fix by comparing the jQuery UI currently under development over at GitHub with the version included with WordPress.  In short, jQuery UI Sortable calls a function that is not defined.  We are going to define it.

So… here we go:

  1. Navigate to your WordPress installation directory using your file browser.  (Again, if working remotely, use FTP)
  2. Navigate from the WordPress directory to “/wp-includes/js/jquery/ui/”
  3. Open the file “jquery.ui.sortable.min.js”.  (If working remotely, download, then open the file).
  4. Immediately after the first curly brace of the opening function on line 5, add the following minified line of Javascript

    The first part of this line should now look something like

     
  5. Save the file.  (Upload to your remote server if necessary).
  6. Return to your interface’s edit page.
  7. You may need to refresh your browser’s cache again for this to take.  For non-Apple operating systems, try Ctrl+F5.  For Mac OSX, Google “hard refresh mybrowsername on Mac”.
  8. Try dragging and dropping.
  9. Cheer
  10. Breathe a sigh of relief
  11. Smile
  12. et cetera

 

16 Comments

Steve

Its not often I come across instructions like this that are clear and work first time. Many thanks for this and you have saved me hours and hours of research.

Reply
Rob

Hi John,

At first i was very glad to read about your fix.
unfortunately theres something you missed out.

Your fix does help the problem of the datepicker. That much is true.
But at the same time it causes another problem on the backend of wordpress.

If you use DBToolkit like i do. Then you probably know that you can build a nice form in your front end and capture all the info in a viewlist in the backend. At least thats what i did.
But now when i go to the backend of my site and look at the viewlist. The three buttons on the right “view, edit and delete” are not working anymore. And when i take out youre fix they start working again.

Darn! And you where so close.

Hopefully you can find a fix for both.

Best regards. R. Hellem – Holland-

Reply
John Morris

Hello Rob,

Thank you for bringing this to my attention. I have gained some new perspective on WordPress plugins due to working on a fairly large scale one myself recently, so I was able to approach the problem a bit better this time. I have updated my post above with a much simpler, and all-around better fix. This one should not, as far as I can tell, have any unintended consequences.

However, before doing it, you’ll want to undo everything I had you do before. I left my old instructions attached at the bottom for information purposes, so perhaps you can reverse those. If not, let me know and I’ll try and wrangle up the original versions of the files I had you modify and send them to you somehow.

John

Reply
Rob

Hi John,

Yep. That did the trick. (Cheer, Breathe a sigh of relief, Smile, etc.) 🙂
Thank you very very much.
Perhaps nice to know that youre solution fixed other bugs in DBTK.
If you have a viewlist in the backend like me. Then you have a set of buttons on the top like Filters, Reload, Select all etc. On the left of these there is also a button to add a new record (all depends on how you build your app.) Well. That button didnt work either. But…now it does.

And on the leftside menu of a app in DBTK you have form processors. Also not working. up until now.

Thanks for that also.

Best regards. R. Hellem – Holland-

Reply
John Morris

Happy to help! Yeah, the developer, David Cramer, made changes, and completely disabled jQuery UI. I presume this wasn’t intentional as his plugin pretty heavily utilizes jQuery UI. As such, I’m not surprised that there were a number of problems. The only one that I wasn’t able to work around was the DatePicker.

Reply
Toni

Great work! It worked perfectly on version v0.3.2.026.
But after i updated dbtoolkit at v.0.3.3, added again your fix in function.php, date picker did not work more.
Someone did tried this fix on dbtoolkit v0.3.3 ? Do you think is possbile to fix date pciker on this version?
Thanks

Reply
John Morris

Hi Toni,

v0.3.3 has a completely different DatePicker problem, but the symptoms are similar. I was able to track down the problem and come up with a solution. I have updated this post with the fix for v0.3.3. The fix for v0.3.3 is at the top, while v0.3.2.026 is further down the page.

I do not believe (and haven’t found any evidence to the contrary) that anything I said to do in the v0.3.2.026 fix will break v0.3.3, so you can probably leave those changes if you’ve already done them. But to fix v0.3.3, you will need to follow the relevant instructions above.

I hope it works out!

Reply
Toni

Wonderful! Also fix with dbtoolkit v0.3.3 works great.

I did some tests: It works perfectly on IE 10, Firedox 22.0 with Windows8 pro. On my PC not works with Google Chrome, but this maybe a problem on my PC, and for me does not matter so much. (maybe if u want and have time to test on Chrome…)

Thanks a lot!!! Wonderful work!

Reply
John Morris

Hmm. I use Google Chrome as my primary browser, so I developed the fix using it. As such, it works here on my computer running Windows 8 Pro and Google Chrome 27.0.1453.116.

If you haven’t already, try the hard refresh I talked about in the post (press Ctrl + F5). If that doesn’t fix it, then I’m not sure exactly what the issue is. I unfortunately can’t seem to reproduce this behavior on my end. Perhaps you can help troubleshoot?

If so, then to help track it down, can you check and see if your Chrome sees this new z-index value. The easiest way to do that is with the developer tools. Right click on some element in the form (like the text field where the date is supposed to go), and click “Inspect Element.” Next, hit Ctrl + F to search, and type “datepicker dropdown-menu”. The number of results from this search may vary depending on what fields you have in your form. Pick any one of the found lines of code, click on the line, then in the boxes on the right, expand the “computed style” section. In this computed style section, at or near the bottom of the list should be a z-index entry. Does the value correspond to what you put in the CSS file from the instructions? For example, mine reads “z-index: 9999;”.

If the value does show up as you typed it in the CSS file, but the DatePicker does not function, then the problem is probably not your PC. If it doesn’t show up with the new value, and is instead using the old one, then the issue is probably Chrome. That would mean it is not reading this new CSS for some reason. From this point, we can continue tracking it down.

If you can find this out, and report back, I will have a better idea of what’s wrong, and where to start.

Reply
Toni

You are correct. It is a probem on my PC, on other PC it works perfect also with Chrome.
Your work is wonderful!

Thanks very much. I hope you will always work to help on dbtoolkit, becuase it is a great Tool and you can help everybody who has problem! 🙂 ..you may also open a commnuity about Dbtoolkit! 🙂

regards

Reply
John Morris

Glad to hear it worked out. I have submitted this fix to the developer, using GitHub, so it shouldn’t be a problem anymore once he roles out version 4.0.

Reply
R Hellemons

Hi John,

Once again I come knocking on your door , hoping for some help on the following.

Some time ago, I published a simple form created with dbtoolkit allowing users to keep a log about school kids.
And for some reason this problem seems to occur:

Typing text in the DBToolkit textfield is not a problem. But placing a space by pressing the enter button does not seem to work anymore.
not such a problem if it only occasionally….. but they realy write a lot of log files.

Do you happen to have any idea why this is not working properly anymore?

They use IE 11
DBTK Versie: 0.1.0.4 (with youre fix)

Best regards, R. hellemons

Reply
John Morris

I don’t know what would have triggered this suddenly. However, missing line breaks are probably caused by how HTML treats blank space. If you want blank lines between divisions of text, there needs to be an HTML construct indicating a blank space. Either each section must be wrapped in “<p>” and “</p>”, or the blank lines replaced with “<br />”.

However, inserting one of those manually every time is probably an unacceptable solution, the process needs to be automatic. For that I have two suggestions. The first is to change the field type of the offending field from textfield to WYSIWYG. You can remove all the toolbar buttons from the WYSIWYG (“What You See Is What You Get”) editor in the field options so that it looks like a text field.

This WYSIWYG option will wrap each section in the “<p>” and “</p>” HTML tags automatically, behind the scenes. One downside to this option is that it won’t fix the line break problem on existing entries, only new ones. Old entries will need to be edited and reformatted using the WYSIWYG editor. Another downside is that it stores HTML in the database instead of the plain text. This isn’t an issue if you only ever output the data on webpages, but could be a problem if you wanted to use the database values for other uses.

The second suggestion I have will only work if you display these entries using custom templates instead of DB-Toolkit’s default display modes. With a custom template, you can use the PHP function nl2br() to convert empty lines into the “<br />” tag.

For example, if the template code for my field were {{thetexttooutput}}, wherever in the template I wanted to ouput the value of that, I would insert the following code instead:

This solution is problematic in that it requires using custom templates, and the display of the entry gets messed up if the text people input into the field contains double quotes (“). I used a similar technique to solve a somewhat different problem on a site I’ve worked on and the double quote problem is highly annoying, but would be extremely difficult to fix.

Again, I don’t know why this would happen all of a sudden if it wasn’t happening before. This should have been happening from the start or not at all. Let me know if it works, or if some of the assumptions I made along the way were incorrect.

John

Reply
R Hellemons

Hi John,

Sorry for the late respond.
O.K. i see what you mean.
It is indeed very strange why this problem suddenly appears. and not before.
Could there been a browser update that causes this?
But if so. then we must of heard of this problem from other users.

I’ll see what i can do and keep you posted.
Thanks for now.

Reply

Leave a Reply