Thank you both for posting :)
mkmanning, your code works very well! I'm still somewhat of a noob
with jQuery syntax, care to explain your code a little more thorough?
//The children of the matched element -filtered down to the span
element- get hidden, what does the ", spn" part do exactly?
var el = $(this), spn = el.children('span').hide();
//look for the textfield with the wtf class inside the span
var edit = el.find('input.wtf');
//check for edit variable (in other words if a textfield was found in
the span). If not append one with a type="text" attribute to the span
if the blur event is fired on the textfield, something happens but you
lost me there
edit = edit.length>0?edit:$('<input>').attr('type','text').addClass
('wtf').appendTo(el).blur(function()
{
spn.text($(this).hide().val()).show();
});
//??
edit.val(spn.text()).show()[0].focus();
On Mar 10, 1:15 am, mkmanning <michaell...@gmail.com> wrote:
> Typo: last line should be:
>
> edit.val(spn.text()).show()[0].focus();
>
> otherwise you'll grab text outside the span.
>
> On Mar 9, 5:07 pm, mkmanning <michaell...@gmail.com> wrote:
>
> > A couple of notes. Rather than create and then re-create the input and
> > span with every double-click and constantly reattach the blur event,
> > you can just create the input once, and then show/hide the span/input.
>
> > Here's a suggested refactoring:
>
> > //turn all titles into textfields
> > $('ul li').dblclick(function(){
> > var el = $(this), spn = el.children('span').hide();
> > var edit = el.find('input.wtf');
> > edit = edit.length>0?edit:$('<input>').attr('type','text').addClass
> > ('wtf').appendTo(el).blur(function(){
> > spn.text($(this).hide().val()).show();
> > });
> > edit.val(el.text()).show()[0].focus();
>
> > });
>
> > On Mar 9, 5:00 pm, Hector Virgen <djvir...@gmail.com> wrote:
>
> > > Try focusing the text field right after it is created by calling focus()
> > > directly on the element. That's the only way to make sure blur is fired
> > > when
> > > the user clicks somewhere else.
>
> > > -Hector
>
> > > On Mon, Mar 9, 2009 at 4:18 PM, bart <b...@ivwd.nl> wrote:
>
> > > > Hi all,
>
> > > > I've set something up which runs at
> > > >http://www.vliegendepijl.nl/pages/test/
>
> > > > As you can see it's an unordered list with some list items in it. If
> > > > you doubleclick the list item the text in it is being replaced by a
> > > > textfield with the same value in it. This works like it should, no
> > > > problems.
>
> > > > Now what I'd like to have is that as soon as the field is not focussed
> > > > anymore (blur?) it's should go back to the text in the list item again
> > > > only then with the updated info (assuming the textfield value has been
> > > > changed). This is the point where it doesn't behave as I'd like it to.
>
> > > > When I doubleclick the first and immediately after that the second
> > > > they're both left "open", so I guess the blur(). method is not
> > > > completely doing the trick. How can I improve my code so that there
> > > > can be no more than one textfield "open"?
>
> > > > Safari 3.2.1 (mac os 10.5) gets it right as it is now, the rest of
> > > > browsers I've tested on all work like I've described. (firefox, opera,
> > > > camino, chrome, IE)
