I've got a simple spry dataset displayed on my page. I am looking to allow the
user to do a simple edit in place of a value. I use the Spry.Effect.Fade and
Spry.Utils.addClassName to hide the content and show the editable field. Once
the value has been changed in a text field, then either to save the change or
to cancel.

My cancel function is almost working correctly. I do a combination of
Spry.Effect.Fade and Spry.Utils.addClassName/Spry.Utils.removeClass name to
show/hide the original data. However, this left the original field still with
an opacity of 0. Even doing a Spry.$(tagDiv).style.opacity = 1 wouldn't force
it to be visible.

I worked around this problem by adding a dsTags.loadData(); call to the bottom
of my cancel function. On the plus side this does restore the dataset back to
its initial condition. However, this now has the side-effect of scrolling the
display back to the top of the entire page. So, if I have 100 rows and the
users cancels an edit on the 99th row, the will no longer be positioned at that
same location. :-(

Does anyone know how I should be doing this to correctly restore the cancel
the edit and yet leave the page in the same vertical location?

Secondly, I anticipate the same problem with the "Change" button. I'll submit
the edit to the server, but the dsTags.loadData() will cause the page to scroll
to the top. Do I need to manually alter the content of the spry dataset row via
some JavaScript calls after submitting the change to the server asynchronously?

Thanks,
Brad

When calling loadData on a dataset the corresponding region gets rewritten and
therefor the browser will lose position. Maybe it is a better idea to use
paging so the user doesn't have to scroll that much either.

Is there a way go update the data (delete, update or even add) without doing a
loadData to get it from the server?

I guess I could do "dual maintenance" and make the change in both the server
side and the client side in parallel if that would keep things from
refreshing...

Other sites do this kind of in place edit of a data set. I don't know if they
do it with spry or not. I'd really like to be able to accomplish such a thing.
Something like what you can do in 37signals Backpack or Basecamp would a good
mental model.

Brad

Brad,

Have a look here
http://www.linecraft.com/spry_data_u...t_in_place.php to get
an idea of editing in place.

Also have a look here
http://www.adobe.com/cfusion/webforu...id=72&catid=60
2&threadid=1409052&enterthread=y to see how to return after my question has
been answered.

Ben

Ben,

Thanks for the two suggestions. As for your second suggestion of a
dsLicensees.setCurrentRow(row.ds_RowID); after the dsLicenees.loadData().... I
had already had that line in my code. If the row that I am working on is row
20, then the setCurrentRow() call did *not* result in the table being
positioned back down at row 20. It was still scrolled to row 1 :-(

As for your edit in place functionality that you mention. It's great. It's
very similar to what I have already coded for edit in place.

If you combine what you have with the idea that the content fields that are
edited are derived from a spry dataset, then you'll get to the problem that I
have. The spry dataset functionality makes additional changes that negate the
effects of some of the code that you wrote and that I wrote such as the
display.none/inline etc.

So I'm looking for an edit in place example that works on a spry dataset.

Thanks
Brad


T

Brad,

I do have a perfect working example of what I want, with the exception of
passing the RECORD_ID to the deLicensees.Observer function.
In that function I first search for a row with the RECORD_ID of my choice, the
function returns the row.ds_RowID which I then use to set the row
dsLicensees.setCurrentRow. Works fine.

As for the edit-in-place code, I replaced the values of the Dynamic Text and
the values of the Form Fields, with the relevant SpryXMLData values and
surrounded the form with a SpryDataRegion. This also works fine.

As you can deduct, I have a perfect example of edit in place. I click on the
Dynamic Text field which is then replaced with the Form Field. I make my
change, click away from the Form Field, the database is updated, the
SpryXMLData is refreshed and the Dynamic Text field returns and my
edit-in-place is complete.

My problem is that after I have made the change, the SpryXMLData refresh
causes the first record in the list to be highlighted rather than the record
that I was working on. The deLicensees.Observer is supposed to fix this, which
it will once I can find a way of passing the RECORD_ID to the function.

Ben

PS. I did purchase Spry Data Utilities Toolbox to make it easier; but there
are other ways to update the SpryXMLData when returning from the server action.

[q]Originally posted by: Brad Balfour
I've got a simple spry dataset displayed on my page. I am looking to allow the
user to do a simple edit in place of a value. I use the Spry.Effect.Fade and
Spry.Utils.addClassName to hide the content and show the editable field. Once
the value has been changed in a text field, then either to save the change or
to cancel.

My cancel function is almost working correctly. I do a combination of
Spry.Effect.Fade and Spry.Utils.addClassName/Spry.Utils.removeClass name to
show/hide the original data. However, this left the original field still with
an opacity of 0. Even doing a Spry.$(tagDiv).style.opacity = 1 wouldn't force
it to be visible.

I worked around this problem by adding a dsTags.loadData(); call to the bottom
of my cancel function. On the plus side this does restore the dataset back to
its initial condition. However, this now has the side-effect of scrolling the
display back to the top of the entire page. So, if I have 100 rows and the
users cancels an edit on the 99th row, the will no longer be positioned at that
same location. :-(

Does anyone know how I should be doing this to correctly restore the cancel
the edit and yet leave the page in the same vertical location?

Secondly, I anticipate the same problem with the "Change" button. I'll submit
the edit to the server, but the dsTags.loadData() will cause the page to scroll
to the top. Do I need to manually alter the content of the spry dataset row via
some JavaScript calls after submitting the change to the server asynchronously?

Thanks,
Brad
[/q]
Hello Brad,

About your first issue, Did you check if the element had display:none? And if
is possible, can you provide a online url for it? Because having to do a new
LoadData() isnt the most elegant solution of fixing this issue.

You can "by pass" the scrolling by just storing the current scroll location in
a global variable and use a onPostLoad observer to reset the last used scroll
position. (I also use this technique )

And maby i got a better solution for you,
I'm currently at Adobe Max 2008 Milano, and in the time that I had to wait
between sessions I have been working on a inline editing functionality.

If you wish I could share it with you. I will be writing a huge indepth
article about it. As I see this get requested allot. And I just wanted to show,
how easy it actually is to build it.

You can contact me by sending a email to hello@3rd-Eden.com

Arnout,

Thanks for the follow up. I have now managed to either fix or workaround my
problems and have a functional solution.

The page is available at http://www.bscopes.com/organize/. However, you'll
need to do a free registration if you want to see the page. Sorry about that.

I did check for display:none. That was not the problem. The spry add and
removeClass() methods worked fine to show and hide the editable section when
combined with the css classes for display:none.

The problem was entirely due to trying to mix in a use of the Spry Fade
Effect. Fading out the div containing the edit button and text worked fine.
Fading in the editable form worked as well. What did not work was fading
things back in after someone hit the "Cancel" button on the editable div. I,
again, used the spry Fade Effect to fade out the editable and fade in the
regular text. However, after the commands ran, nothing showed up. Examining the
page in the inspectors for Firefox, IE or Safari showed that that while the div
was visibility:visible and display:block, it still had opacity:0.

I tried various hacks including setting the style.opacity=1 explicitly in
the javascript. Nothing helped. The only workaround I found as the
ds.loadData(). But this had the nasty side-effect of positioning me to the top
of the window.

In the end, I simply gave up on using Fade or Highlight in conjunction to
the in-line editing. The visual effect of the display:none and display:block
swap is not too jarring.

Thanks for the info on the scroll location. I'll try and use that the
workaround any remaining issues I have with spry putting me back to the top.

I agree that in-line editing itself isn't a big deal. However the fact that
the opacity was not correctly reset on the fade wasn't obvious at first. So
determining the root cause of my problem took a few extra days.

I'll probably start a new thread for my remaining questions and issues.

Thanks!
Brad