Rails spinoffs - May 2006 - Using inline editor without requiring a URL

Hi,
I was wondering if anyone has implemented the inplace editor without the
need for the URL. I have tried this but run into a problem in that the
''saving...'' text in shown for ever and the label is no longer
editable.

Can I also confirm that my idea of the callback function is something that
runs before the value is passed to the URL (if you were to use one). What
might be it''s purpose because I thought it would make sense to have
this
done after you have the value BACK from the script so you know everything
went ok.

I am using it to edit the content of a HTML label and when the update is
complete, then update a cell in another table...I didn''t really want to
try
and update this value until I know the text entered in the inplace editor is
valid. How do I go about notify the table cell I want to update that the
inplace edit has finished and to update it''s value? I am looking into
events
as we speak but wanted to be sure this was the right thing to consider.

Thanks,

C


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Carlton Dickson wrote:
> I was wondering if anyone has implemented the inplace editor without the 
> need for the URL. I have tried this but run into a problem in that the 
> ''saving...'' text in shown for ever and the label is no
longer editable.
Yes, I have a project I worked on to try to create a editable tree (for 
a manual) at:

http://docdemo.cordata.com/

The goal was to provide a editable tree by using drag-n-drop and the 
in-place editor. Feel free to play around with this demo. It refreshes 
itself every day. To edit do the following:

1) Expand the TOC by clicking on the TOC pop out.
2) Hit the edit button to put the tree in edit mode.
3) Start editing.

You can click the "pencil/paper" icon to edit the text of a node. Drag
an node to the trash can to remove it (just hit enter on the popup to 
avoid the annoying drag mess). Drag the folder on the tree to add a 
folder. Drag the header of any page onto the tree to add a new link.

But the important part you are looking for can be found in this file:

http://docdemo.cordata.com/javascript/jstree.js

At the very end you will see I extend the in-place editor to allow 
callbacks to be defined instead of a URL. The old Ajax interface still 
works as well.

Eric

An inline delete confirmation form would be better than the alert.   
Just SlideDown (or the effect of your choice) the delete confirmation  
directly above the trash can, and allow the revert to proceed.  It''s  
not modal, but it won''t have the "drag mess," occurs in the
area the
user is already looking, may be styled, and should be fairly intuitive.


TAG

On May 24, 2006, at 8:35 AM, Eric Anderson wrote:
>  Drag an node to the trash can to remove it (just hit enter on the  
> popup to avoid the annoying drag mess).

Tom Gregory wrote:
> An inline delete confirmation form would be better than the alert.  Just 
> SlideDown (or the effect of your choice) the delete confirmation 
> directly above the trash can, and allow the revert to proceed. 
It''s not
> modal, but it won''t have the "drag mess," occurs in the
area the user is
> already looking, may be styled, and should be fairly intuitive.
Good idea. I appreciate the feedback. It is still a bit of a work in 
progress that is being used for some internal documentation.

Eric

Thanks Eric, I almost missed this post.
So when you say extend this means I don''t need to alter the source in
the
controls.js right?

How do you go about defining an element that is editable with your code,
with scriptaculous they obviously use

new Ajax.InPlaceEditor(element, ''url'', [options]);

What techniques would you use if you wanted to update a value in a table
based on the value that has been entered in the editor?
Is it the use of Observers or should I simply use a callback that includes a
function, e.g.

new Ajax.InPlaceEditor( ''label_'' + questionID,
''URL'', {callback:function
(form, value){ $(''element).setAttribute("aLabel", value);
return ''value='' +
value; }});

Sorry for these questions but just starting out with JS and pretty impressed
with things so far...have you tried the Yahoo YUI? I think the design
patterns look smart, would be even better if they had more examples on how
to implement these things :)

On 5/24/06, Eric Anderson <eric-ANzg6odk14w@public.gmane.org>
wrote:
>
> Carlton Dickson wrote:
> > I was wondering if anyone has implemented the inplace editor without
the
> > need for the URL. I have tried this but run into a problem in that the
> > ''saving...'' text in shown for ever and the label is
no longer editable.
>
> Yes, I have a project I worked on to try to create a editable tree (for
> a manual) at:
>
> http://docdemo.cordata.com/
>
> The goal was to provide a editable tree by using drag-n-drop and the
> in-place editor. Feel free to play around with this demo. It refreshes
> itself every day. To edit do the following:
>
> 1) Expand the TOC by clicking on the TOC pop out.
> 2) Hit the edit button to put the tree in edit mode.
> 3) Start editing.
>
> You can click the "pencil/paper" icon to edit the text of a node.
Drag
> an node to the trash can to remove it (just hit enter on the popup to
> avoid the annoying drag mess). Drag the folder on the tree to add a
> folder. Drag the header of any page onto the tree to add a new link.
>
> But the important part you are looking for can be found in this file:
>
> http://docdemo.cordata.com/javascript/jstree.js
>
> At the very end you will see I extend the in-place editor to allow
> callbacks to be defined instead of a URL. The old Ajax interface still
> works as well.
>
> Eric
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Carlton Dickson wrote:
> So when you say extend this means I don''t need to alter the source
in
> the controls.js right?
That is correct. Javascript''s objects can be modified after creation so
I just change the initialize method (and a few other things). This means 
you will need to put this bit of code after your Script.aculo.us code.
> How do you go about defining an element that is editable with your code, 
> with scriptaculous they obviously use
> 
> new Ajax.InPlaceEditor(element, ''url'', [options]);
You can still use that but if you prefer it to not make the Ajax call 
and instead prefer a callback you can do:

new Ajax.InPlaceEditor(element, {
	saveText_Callback: function(form, fieldval, success, failure) {
		//...Implement your custom saving...
	}
});

Basically I add an option called "saveText_Callback" (probably not the
best named but I did this a while back). This function object is 
responsible for doing whatever needs to happen to save this value. It is 
given an instance of the form and the field value. It is also given the 
"onComplete" and "onFailure" function objects so that it can
carry out
those events depending on the status of it''s save operation. This
allows
the onComplete and onFailure event handlers to still have meaning.

The idea is that you are implementing the save yourself instead of 
relying on the built in Ajax call. This may mean you store the value in 
a hidden form field, you make your own ajax call, or perhaps you don''t 
save at all. It''s up to you.

Even after adding this modified version of Ajax.InPlaceEditor you can 
still use the old interface (i.e. passing a url as the second parameter 
and the options as a third parameter) so it does not break existing 
behavior.
> What techniques would you use if you wanted to update a value in a table 
> based on the value that has been entered in the editor?
If your are using my code and you don''t care about saving the actual 
value of the inplace editor I would do something like:

new Ajax.InPlaceEditor(element, {
	saveText_Callback: function(form, fieldval, success, failure) {
		Element.update(''my_table_cell'', fieldval);
		success();
	}
});

Eric

That''s exactly Mr. Anderson, I will look at this tomorrow and hopefully
I''ll
be able to put this great advice into some of my code...thanks ever so much
:)

On 5/25/06, Eric Anderson <eric-ANzg6odk14w@public.gmane.org>
wrote:
>
> Carlton Dickson wrote:
> > So when you say extend this means I don''t need to alter the
source in
> > the controls.js right?
>
> That is correct. Javascript''s objects can be modified after
creation so
> I just change the initialize method (and a few other things). This means
> you will need to put this bit of code after your Script.aculo.us code.
>
> > How do you go about defining an element that is editable with your
code,
> > with scriptaculous they obviously use
> >
> > new Ajax.InPlaceEditor(element, ''url'', [options]);
>
> You can still use that but if you prefer it to not make the Ajax call
> and instead prefer a callback you can do:
>
> new Ajax.InPlaceEditor(element, {
>         saveText_Callback: function(form, fieldval, success, failure) {
>                 //...Implement your custom saving...
>         }
> });
>
> Basically I add an option called "saveText_Callback" (probably
not the
> best named but I did this a while back). This function object is
> responsible for doing whatever needs to happen to save this value. It is
> given an instance of the form and the field value. It is also given the
> "onComplete" and "onFailure" function objects so that
it can carry out
> those events depending on the status of it''s save operation. This
allows
> the onComplete and onFailure event handlers to still have meaning.
>
> The idea is that you are implementing the save yourself instead of
> relying on the built in Ajax call. This may mean you store the value in
> a hidden form field, you make your own ajax call, or perhaps you
don''t
> save at all. It''s up to you.
>
> Even after adding this modified version of Ajax.InPlaceEditor you can
> still use the old interface (i.e. passing a url as the second parameter
> and the options as a third parameter) so it does not break existing
> behavior.
>
> > What techniques would you use if you wanted to update a value in a
table
> > based on the value that has been entered in the editor?
>
> If your are using my code and you don''t care about saving the
actual
> value of the inplace editor I would do something like:
>
> new Ajax.InPlaceEditor(element, {
>         saveText_Callback: function(form, fieldval, success, failure) {
>                 Element.update(''my_table_cell'',
fieldval);
>                 success();
>         }
> });
>
> Eric
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Exactly??? I meant excellent...lol

On 5/25/06, Carlton Dickson
<carltondickson-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> That''s exactly Mr. Anderson, I will look at this tomorrow and
hopefully
> I''ll be able to put this great advice into some of my
code...thanks ever so
> much :)
>
>
> On 5/25/06, Eric Anderson <eric-ANzg6odk14w@public.gmane.org> wrote:
> >
> > Carlton Dickson wrote:
> > > So when you say extend this means I don''t need to alter
the source in
> > > the controls.js right?
> >
> > That is correct. Javascript''s objects can be modified after
creation so
> > I just change the initialize method (and a few other things). This
means
> >
> > you will need to put this bit of code after your Script.aculo.us code.
> >
> > > How do you go about defining an element that is editable with
your
> > code,
> > > with scriptaculous they obviously use
> > >
> > > new Ajax.InPlaceEditor(element, ''url'',
[options]);
> >
> > You can still use that but if you prefer it to not make the Ajax call
> > and instead prefer a callback you can do:
> >
> > new Ajax.InPlaceEditor(element, {
> >         saveText_Callback: function(form, fieldval, success, failure)
{
> >                 //...Implement your custom saving...
> >         }
> > });
> >
> > Basically I add an option called "saveText_Callback"
(probably not the
> > best named but I did this a while back). This function object is
> > responsible for doing whatever needs to happen to save this value. It
is
> > given an instance of the form and the field value. It is also given
the
> > "onComplete" and "onFailure" function objects so
that it can carry out
> > those events depending on the status of it''s save operation.
This allows
> > the onComplete and onFailure event handlers to still have meaning.
> >
> > The idea is that you are implementing the save yourself instead of
> > relying on the built in Ajax call. This may mean you store the value
in
> > a hidden form field, you make your own ajax call, or perhaps you
don''t
> > save at all. It''s up to you.
> >
> > Even after adding this modified version of Ajax.InPlaceEditor you can
> > still use the old interface (i.e. passing a url as the second
parameter
> > and the options as a third parameter) so it does not break existing
> > behavior.
> >
> > > What techniques would you use if you wanted to update a value in
a
> > table
> > > based on the value that has been entered in the editor?
> >
> > If your are using my code and you don''t care about saving the
actual
> > value of the inplace editor I would do something like:
> >
> > new Ajax.InPlaceEditor(element, {
> >         saveText_Callback: function(form, fieldval, success, failure)
{
> >                 Element.update(''my_table_cell'',
fieldval);
> >                 success();
> >         }
> > });
> >
> > Eric
> >
> > _______________________________________________
> > Rails-spinoffs mailing list
> > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
> >
>
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs