Figured this out myself, though I'm open to suggestions for a better
workaround. It's actually not the show() that's causing the problem;
it's the hide() that's called on the blur event. Details.
1. User clicks on input field.
2. livequery captures the focus event for that field and reveals the
help information.
3. User enters data for the field.
4. User clicks (mousedown) on the submit button.
5. livequery interprets the mousedown on the submit button as a blur
event on the input field and dutifully hides the help text.
6. When the help text is hidden, content below the help text moves up
to fill in what would otherwise be empty space. Among the content
below the help text is the submit button, so the submit button moves
up as well.
7. When user releases the mouse (mouseup), the pointer is no longer
positioned over the submit button (as the button effectively moved out
from underneath the pointer), so no submit is triggered.
Major bummer. Now I see what so many examples position context-
sensitive help to the side of the input instead of beneath it.
Unfortunately, my help text can sometimes run paragraphs in length
(the form is for medical information), so that's not an option. The
workaround I'm using is a global variable that disables the blur
processing. I capture mousedown events on the submit buttons to turn
on this variable, and mouseup events to release it. There are
definitely some corner cases where this doesn't work, but it seems to
deal with the most common cases reasonably well. If the jquery blur
event set relatedTarget appropriately, I could probably do something
with it, but, alas, that's not an option.
If anyone has a more elegant solution, I'd love to hear it.
Stephen
On Dec 27, 7:40 pm, Stephen <sathoma...@gmail.com> wrote:
> I've been stumped on this one long enough that it's time for someone
> to show me the obvious. I have a form where each element is a table
> row. Interspersed between the rows with actual elements are rows with
> help information for the element above them. When the focus is on an
> element, I want to show the help information. When I have it all set
> up, however, the submit button no longer works. The submit button
> won't work until focus is removed from all input elements. Here's an
> example form with just two elements -- user name and email address.
> Without any jquery, the form works perfectly fine. Click on a field;
> type a value, and click on the Update button and the form is
> submitted.
>
> <form id='group0' action='#' method='post'>
> <table>
> <tr>
> <td><label for='user_name'>Name</label></td>
> <td><input type='text' name='user_name' id='user_name' /></td>
> </tr>
> <tr class='help'>
> <td colspan='3'>The full name of the user.</td>
> </tr>
> <tr>
> <td><label for='user_email'>Email Address</label></td>
> <td><input type='text' name='user_email' id='user_email' /></
> td>
> </tr>
> <tr class='help'>
> <td colspan='2'>The email address of the user.</td>
> </tr>
> <tr>
> <td colspan='2'>
> <span><button type='submit'>Update</button></span>
> </td>
> </tr>
> </table>
> </form>
>
> Now if I add the following jquery, the form doesn't work anymore:
>
> $('input:not(:checkbox), textarea, select').
> livequery("focus",function() {
> $(this).parents('tr').next().show();
> return true;
> }).
> livequery("blur",function() {
> $(this).parents('tr').next().hide();
> return true;
> });
>
> With jquery, click on a field, and (as expected) the help for that
> field is revealed. Type a value in the field, and click on the Update
> button and the form is NOT submitted. Instead, the focus just leaves
> the input element. Now, with no focus on any input element, click on
> the Update button a second time and the form is submitted. Obviously,
> I don't want to make my users click on the submit button twice!
>
> Although I'm using livequery (because the form is delivered via ajax),
> I've tried static code with plain old jquery and the problem is still
> present. Tested on Safari and Firefox.
>
> Suggestions very much appreciated!
>
> TIA, Stephen
