[jQuery] Re: .html() only works on original source?

You could use custom events:

$('#form').bind('hidden',function(){
$(this).children(':input').each(function(){
var t = $(this);
t.data('value', t.val() );
});
}).bind('visible',function(){
$(this).children(':input').each(function(){
var t = $(this);
t.val( t.data('value') );
});

$('#form').hide().trigger('hidden');
$('#form').show().trigger('visible');

there is also a plug-in that implements listeners for all of jQuery's
methods, so you could do something like:

$('form').bind('hide', function(){ });
$('form').hide();

But I couldn't find it. I think Ariel Fresler was involved with it. In
case he's reading this I bet he would be kind enough to provide you
with a link :)

cheers,
- ricardo

On Dec 31 2008, 7:43 am, the_woodsman <elwood.ca...@gmail.com> wrote:
> Thanks Ricardo,
> That's along the lines of what I've been working on, althuogh I didn't
> think to use data() of the actual field, I was putting it in data
> ('field_name') of the form itself - your way is probably nicer!
>
> I was wondering, instead of the each() loop above, is there an event
> that I could use for when the inputs become visible again?? that way
> the inputs know to repopulate themselves when they're re-shown...
>
> On Dec 31, 5:05 am, Ricardo Tomasi <ricardob...@gmail.com> wrote:
>
> > Two issues at play here:
>
> > 1. the HTML in most browsers doesn't reflect all recent changes done
> > via Javascript
> > 2. the browser only saves form values after a submit
>
> > What you can do is save the values at the time of removal, and then re-
> > fill it when you put it back. Use the data() function:
>
> > // removal, store the values
> > var oldform = $('#form').children(':input').each(function(){
> >    var t = $(this);
> >    t.data('value', t.val() );
>
> > }).end().remove();
>
> > //append and fill
> > oldform.appendTo('body').children(':input').each(function(){
> >      var t = $(this);
> >      t.val( t.data('value') );
>
> > });
>
> > - ricardo
>
> > On Dec 30, 1:39 pm, the_woodsman <elwood.ca...@gmail.com> wrote:
>
> > > Hi all,
>
> > > I'm trying to save the content of a form into a hidden div, so I can
> > > bring it back later.
>
> > > However, I also want to save the user's progress on the form. I
> > > thought I could just dump $('#form').html() into the hidden div, but
> > > this seems to only remember the original html, no new value attributes
> > > exist even after I've entered some text.
>
> > > I tested with something like this:
>
> > >                 $('body').find(':input').each(
>
> > >                 function()
> > >                 {
> > >                         alert($(this).attr('name')+": "+$(this).val()+", "+$(this).attr
> > > ('value'));
> > >                         //.val() and .attr(val)  are always up to date
> > > and consistent
>
> > >                         alert(""+$(this).parent().html());
> > >                         //inconsistent with .attr(val)  above, seems to
> > > be the original only
>
> > >                 }
> > >                 );
>
> > > An obvious work around would be to iterate through the inputs
> > > explicitly setting the value atribute to .val(), which I assume would
> > > work, but it seems there must be a more elegant way...
>
> > > Is there something like  .liveHtml()?  Or another solution?
>
> > > Thanks in advance...