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