Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improvements on the events + readme

  • Loading branch information...
commit f820b37c9a166500cf0f5c2638c16d39c411a7a9 1 parent 7c0e819
@janv authored
View
27 README.markdown
@@ -148,6 +148,33 @@ restInPlace() on the jQuery object.
$('.my-custom-class').restInPlace()
+Events
+------
+
+A REST in Place instance triggers four different events on the element that
+it's associated with:
+
+- `activate.rest-in-place` when starting the editing of the element.
+ Triggering the event is the first thing that happens, before any processing
+ and form building takes place. That means uou can use this event to modify
+ the content of the element (for example to remove number/date formatting).
+- `success.rest-in-place` with the data retrieved from the server as an
+ extra parameter after a successful save on the server.
+ This event is triggered at the very latest moment, after the element has
+ been restored with the data from the server. This means you can use the
+ event handler to further modify the data and overwrite the displayed value
+ (useful for number/date formatting for example).
+- `failure.rest-in-place` after an error occured
+- `update.rest-in-place` immediately before sending the update to the server
+- `abort.rest-in-place` when the user aborts the editing process.
+
+Bind to these events through the jQuery event mechanisms:
+
+ $('#my-editable-element').bind('success.rest-in-place', function(event, data){
+ console.log("Yay it worked! The new value is", data.whatever);
+ });
+
+
Example
=======
View
10 lib/assets/javascripts/rest_in_place/rest_in_place.coffee.erb
@@ -15,6 +15,7 @@ class RestInPlaceEditor
# Toggle the element associated with this editor from normal to a form field
activate : ->
+ @$element.trigger('activate.rest-in-place')
@oldValue = @$element.html()
@$element.addClass('rip-active')
@$element.unbind('click', @clickHandler)
@@ -22,7 +23,7 @@ class RestInPlaceEditor
# Restore the element to its default state
abort : ->
- @$element.trigger('restinplace.abort')
+ @$element.trigger('abort.rest-in-place')
@$element
.html(@oldValue)
.removeClass('rip-active')
@@ -33,13 +34,12 @@ class RestInPlaceEditor
# parseable answer, a second request is initiated to retrieve the updated
# value via GET
update : ->
- @$element.trigger('restinplace.update')
+ @$element.trigger('update.rest-in-place')
updateRequest = @ajax
type : "post"
data : @requestData()
updateRequest.done (data) =>
- @$element.trigger('restinplace.success')
if data
@loadSuccessCallback(data)
else
@@ -49,7 +49,7 @@ class RestInPlaceEditor
if (jqXHR.status == 200 && textStatus == "parsererror")
@loadViaGET()
else
- @$element.trigger('restinplace.failure')
+ @$element.trigger('failure.rest-in-place')
@abort()
@$element.html("saving...")
@@ -152,6 +152,8 @@ class RestInPlaceEditor
@$element.html(@extractAttributeFromData(data))
@$element.click(@clickHandler)
@$element.removeClass('rip-active')
+ @$element.trigger('success.rest-in-place', data)
+
# Creates a clickhandler for the current instance of RestInPlaceEditor, that
# has its this pointer permanently bound to the editor instance.
View
9 testapp/app/views/users/show.html.erb
@@ -9,3 +9,12 @@
Name: <span class="rest-in-place" data-attribute="name"><%= @user2.name %></span><br/><br/>
Hobbies: <span class="rest-in-place" data-formtype="textarea" data-attribute="hobbies"><%= @user2.hobbies %></span>
</div>
+
+<script type="text/javascript" charset="utf-8">
+ $(function(){
+ // with fully qualified event name,
+ $('div span').bind('success.rest-in-place', function(event, data){
+ console.log("Yay it worked! The new value is", data);
+ });
+ })
+</script>
Please sign in to comment.
Something went wrong with that request. Please try again.