[Infusion-users] Tweaking inlinedit blurHandler

Matt Zumwalt collaborate at yourmediashelf.com
Sat Jan 30 01:51:50 UTC 2010


Hi Antranig,

Thanks for the pointers.

I was not able to get the exceptions to work right in the custom blurHandler.  In particular, I got funny behaviour when I put the datepicker on a page with other forms of inlineEdit lying around.  I think there might be some bleed-over in the component integrations.

In the end, I used a total hack  with some pretty elaborate use of callbacks in both Fluid and in the datepicker.  Basically, when you select a date in the picker, a callback updates _both_ the "inactive"/original editable node and the "active" input and then calls the click() function on the original node, putting the editable field back into its editable state.  As a result, while you're using the picker, the editable field is actually inactive, but it's not really noticeable because as soon as you finish using the picker it flips back to the active/editable state.  Note: The callback has to update both nodes in case the user opens the datepicker more than once before submitting, since the editable node reverts to showing its "inactive" node whenever you click on the datepicker.  This then created some hassles for my finishEditHandler, etc. etc.

This was a total hack but it seems to work in Safari & Firefox. I expect to clean it up sometime soon.  Once/if its cleaned up, I'll share the code.


Matt Zumwalt
MediaShelf, LLC
http://www.yourmediashelf.com




On Jan 26, 2010, at 11:26 PM, Antranig Basman wrote:

> On 26/01/2010 14:01, Matt Zumwalt wrote:
>> I'm trying to attach a date picker to one of my inline edit fields.  It's almost working, but I've run into the problem that selecting the datepicker means you've clicked off of the input, which causes the whole thing to cease being editable (and causes the date picker to disappear).
>> 
>> The date picker is within the edit-container, but it's outside of the input itself.  Is there a way to change the inline edit initializer so that the input will remain editable as long as I click within the edit container?  I have a vague sense that the blurHandler option or bindBlurHandler method might be my friend here, but the documentation is a bit sparse on that front.
>> 
> 
> Hi there Matt - you are quite correct, that the blurHandler options is indeed the key to getting the behaviour you desire :)
> Sorry that it is not more clearly documented, but actually it is a little obscure to guess what exactly we might say about it. The best thing I can do is point you at a usage of this option in the context of our drop-down selection inlineEdit integration which would otherwise suffer from exactly the problem you name - that a loss of focus on the target input itself causes the control to fold up again.
> 
>    fluid.inlineEdit.dropdown.blurHandlerBinder = function (that) {
>        fluid.deadMansBlur(that.editField,
>                           $("div.selectbox-wrapper li", that.editContainer),
>                           function () {
>                               that.cancel();
>                           });
>    };
> 
> (from InlineEditIntegrations.js)
> 
> The crucial configuration you need to apply here is the 2nd argument to the framework utility fluid.deadMansBlur - this registers a set of nodes which are to be recognised as controls for which the "close-on-blur" behaviour should be ignored, if the blur is caused by a focus on them. I hope that is reasonably clear - in any case, you should try to concoct a selector which in this case hits all of the DOM nodes that it is possible for focus to reach that lie within the datepicker control you are using. This probably would need to be done with a bit of experiment and/or a judicious investigation with the Firebug DOM inspector or similar... don't hesitate to come back quickly if you need any further clarification of help. Given this situation takes a bit of explaining it is best to adopt an iterative approach :)
> 
> If you do get this work, please don't hesitate to try to contribute any code you might have back to us, since an inline-editable datepicker is something that has been on our roadmap for a while but languished for lack of resources.
> 
> Cheers,
> A.
> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/infusion-users/attachments/20100129/8856d0d6/attachment.html>


More information about the Infusion-users mailing list