Hi, guys,
I''m in the midst of moving an app from rails 2.3.8 to rails 3.0.9.
Sadly, rails 3 no longer has javascript generators and I''m now forced
to do more javascript.
For my project, I have selected jQuery as the javascript framework for
my rails 3.0.9 app.
What I have done to have my app''s deletion link (for each item)
trigger an alert box when the deletion process is completed:
1) installed jquery-rails gem, deleted the public/javascript/rails.js
file
2) added the line, "gem ''jquery-rails'', ''>=
0.2.6''" to my Gemfile, ran
"rails generate jquery:install"
3) set up the controller action, destroy to respond by giving a json
object when it''s being called by ajax
# DELETE /parts/1
# DELETE /parts/1.xml
def destroy
@part = Part.find(params[:id])
@part.destroy
respond_to do |format|
format.html { redirect_to(parts_url) }
format.xml { head :ok }
format.js {
render :json => {:name => ''John''}
}
end
end
4) added the following to application.js
// Place your application-specific JavaScript functions and classes
here
// This file is automatically included by
javascript_include_tag :defaults
$(document).ready(function () {
function(e, data, textStatus, jqXHR){
alert(data.name + '' has been deleted'');
$(''a[data-method="delete"]'').css("color",
"red");
});
})
5) the view, app/views/parts/index.html.erb has deletion links for
each part item:
<% if @parts != nil %>
<table border="0" id="table-lined">
<tr>
<th>Id</th>
<th>Title</th>
<th>Brand new?</th>
<th colspan="5">Manage</th>
</tr>
<% @parts.each do |part| %>
<tr>
<td>
<%= part.id %>
</td>
<td><%= link_to(part.title, part) %> </td>
<td><%= link_to ''Preview'', part
%></td>
<td><%= link_to ''Update'',
edit_part_path(part) %></td>
<td>
<% link_to ''Delete'',
part_path(part.id),
''data-method'' =>
''delete'',
''data-confirm'' => ''Are you
sure?'',
''data-remote'' =>
''true'',
''class'' =>
''delete_part''
%>
</td>
</tr>
<% end %>
</table>
<hr>
<% end %>
When I run "script/rails server"
===================Pre: I turn on Firebug on Firefox
1) I clicked on the "delete" link on an entry. Confirm dialog box pops
up. I click "yes"
2) I looked at the "Net" tab and I see the DELETE request. Clicked on
the DELETE tab
3) Looked at the header and json sub tabs and I see the expected data
that I defined to return from the destroy action in the parts
controller (above)
What am I missing?
The json data gets returned but somehow, jquery is not intercepting
it :(
Is the ajax callback that I put in application.js errorneous/
incomplete?
Any good references (that work) with rails 3 UJS (ajax)?
My references were:
1)
http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/comment-page-1/#comment-377817
2) http://rails3stuff.posterous.com/#!/59899595
3) http://docs.jquery.com/Ajax_Events
4) http://railscasts.com/episodes/205-unobtrusive-javascript
5 )
http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-in-rails-3/#comment-38259
6) http://chrissloan.info/blog/rails_3_jquery_ujs/
7) http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-in-rails3/
What I have also tried:
------------------------
Even tried defining app/views/parts/destroy.js.erb - with a simple,
alert('' Calling destroy.js.erb '') - Does not work :(
Please.
Thank you
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
1) I do this:
<% javascript_include_tag(
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js",
"jquery.rails.js"
)
%>
No gem needed. You can read here about the advantages of using a google
link:
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
Note that railscast #205 Unobtrusive Javascript also uses a google link
rather than a gem.
2) Following railscast #205 Unobtrusive Javascript, I put this file:
https://github.com/rails/jquery-ujs/tree/master/src
in the same directory as the default rails.js file, and I named it
jquery.rails.js. Note how in 1) I link to jquery.rails.js. That way
you don''t need to delete the prototype file.
3) In rails 3, you use respond_to/respond_with
class SomeController < Application Controller
respond_to :html, :xml, :js
def some_action
respond_with(@user)
end
See here:
http://stackoverflow.com/questions/3876891/how-do-i-specify-layout-false-in-rails-respond-with
4 & 5) It''s my understanding that having
data-remote="true" in an html
element causes an ajax request to be sent to the specified action.
After the action executes, the *default* is for rails to render a page
called action_name.js.erb, which sends the js on the page back to the
browser, and then the browser executes the js. However, you told rails
not to preform the default:
render :json => {:name => ''John''}
So rails sends that text back to the browser--rather than the js in
action_name.js.erb. I can think of two solutions:
1) json is the same format as a js object. So you can just put your
json in your js in action_name.js.erb
2) You can write this in your controller:
@name = "John"
and then use @name in action_name.js.erb.
In other words, you are currently wanting to send two responses in
response to one ajax request: the json and the js in some_action.js.erb.
Rails is sending back one response.
--
Posted via http://www.ruby-forum.com/.
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
Hello, 7stud thanks for that :) Looks like a lot of GOOD info. I will give it a go and revert :) On 7 September 2011 01:52, 7stud -- <lists-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:> 1) I do this: > > <%> javascript_include_tag( > "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", > "jquery.rails.js" > ) > %> > > No gem needed. You can read here about the advantages of using a google > link: > > http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ > > Note that railscast #205 Unobtrusive Javascript also uses a google link > rather than a gem. > > > 2) Following railscast #205 Unobtrusive Javascript, I put this file: > > https://github.com/rails/jquery-ujs/tree/master/src > > in the same directory as the default rails.js file, and I named it > jquery.rails.js. Note how in 1) I link to jquery.rails.js. That way > you don''t need to delete the prototype file. > > > 3) In rails 3, you use respond_to/respond_with > > > class SomeController < Application Controller > > respond_to :html, :xml, :js > > def some_action > respond_with(@user) > end > > > See here: > > > http://stackoverflow.com/questions/3876891/how-do-i-specify-layout-false-in-rails-respond-with > > > 4 & 5) It''s my understanding that having data-remote="true" in an html > element causes an ajax request to be sent to the specified action. > After the action executes, the *default* is for rails to render a page > called action_name.js.erb, which sends the js on the page back to the > browser, and then the browser executes the js. However, you told rails > not to preform the default: > > render :json => {:name => ''John''} > > So rails sends that text back to the browser--rather than the js in > action_name.js.erb. I can think of two solutions: > > 1) json is the same format as a js object. So you can just put your > json in your js in action_name.js.erb > > 2) You can write this in your controller: > > @name = "John" > > and then use @name in action_name.js.erb. > > In other words, you are currently wanting to send two responses in > response to one ajax request: the json and the js in some_action.js.erb. > Rails is sending back one response. > > -- > Posted via http://www.ruby-forum.com/. > > -- > You received this message because you are subscribed to the Google Groups > "Ruby on Rails: Talk" group. > To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org > To unsubscribe from this group, send email to > rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org > For more options, visit this group at > http://groups.google.com/group/rubyonrails-talk?hl=en. > >-- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
Hello, 7stud,
I followed your recommendations and I managed to get good results.
When I define the return data and then not put any "render" in the
controller action, it works.
------------------------------------ parts_controller.rb extract starts
----------------------------------------
# DELETE /parts/1
# DELETE /parts/1.xml
def destroy
@part = Part.find(params[:id])
@part.destroy
respond_to do |format|
format.html { redirect_to(parts_url) }
format.xml { head :ok }
format.js {
@name = ''John Malko''
}
end
end
------------------------------------ parts_controller.rb extract ends
----------------------------------------
----------------------------------- application.js extract starts
---------------------
$(document).ready(function () {
$(''a[data-method="delete"]'').live(''ajax:success'',
function(event, data, textStatus, jqXHR){
alert(data.name + '' has been deleted'');
});
})
----------------------------------- application.js extract ends
---------------------
Questions:
----------------
In my case (i''m not definining <action>.js.erb) as all I wanted
was to have
the deleted entries fade out (I defined some javascript in application.js),
1) for js format, can I safely assume that @name gets sent out in the
response as :json since the request was a xhr request?
2) When @name has been defined in the format.js block, can I assume that the
data just gets sent in the response and it is therefore up to any javascript
to pick it up?
Thank you
On 7 September 2011 01:52, 7stud --
<lists-fsXkhYbjdPsEEoCn2XhGlw@public.gmane.org> wrote:
> 1) I do this:
>
> <%> javascript_include_tag(
>
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js",
> "jquery.rails.js"
> )
> %>
>
> No gem needed. You can read here about the advantages of using a google
> link:
>
> http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
>
> Note that railscast #205 Unobtrusive Javascript also uses a google link
> rather than a gem.
>
>
> 2) Following railscast #205 Unobtrusive Javascript, I put this file:
>
> https://github.com/rails/jquery-ujs/tree/master/src
>
> in the same directory as the default rails.js file, and I named it
> jquery.rails.js. Note how in 1) I link to jquery.rails.js. That way
> you don''t need to delete the prototype file.
>
>
> 3) In rails 3, you use respond_to/respond_with
>
>
> class SomeController < Application Controller
>
> respond_to :html, :xml, :js
>
> def some_action
> respond_with(@user)
> end
>
>
> See here:
>
>
>
http://stackoverflow.com/questions/3876891/how-do-i-specify-layout-false-in-rails-respond-with
>
>
> 4 & 5) It''s my understanding that having
data-remote="true" in an html
> element causes an ajax request to be sent to the specified action.
> After the action executes, the *default* is for rails to render a page
> called action_name.js.erb, which sends the js on the page back to the
> browser, and then the browser executes the js. However, you told rails
> not to preform the default:
>
> render :json => {:name => ''John''}
>
> So rails sends that text back to the browser--rather than the js in
> action_name.js.erb. I can think of two solutions:
>
> 1) json is the same format as a js object. So you can just put your
> json in your js in action_name.js.erb
>
> 2) You can write this in your controller:
>
> @name = "John"
>
> and then use @name in action_name.js.erb.
>
> In other words, you are currently wanting to send two responses in
> response to one ajax request: the json and the js in some_action.js.erb.
> Rails is sending back one response.
>
> --
> Posted via http://www.ruby-forum.com/.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To unsubscribe from this group, send email to
>
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> For more options, visit this group at
> http://groups.google.com/group/rubyonrails-talk?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
Gordon Yeong wrote in post #1020881:> Hello, 7stud, > I followed your recommendations and I managed to get good results. > > When I define the return data and then not put any "render" in the > controller action, it works. > > ------------------------------------ parts_controller.rb extract starts > ---------------------------------------- > # DELETE /parts/1 > # DELETE /parts/1.xml > def destroy > @part = Part.find(params[:id]) > @part.destroy > > respond_to do |format| > format.html { redirect_to(parts_url) } > format.xml { head :ok } > format.js { > @name = ''John Malko'' > } > end > end > ------------------------------------ parts_controller.rb extract ends > ---------------------------------------- > > > ----------------------------------- application.js extract starts > --------------------- > $(document).ready(function () { > $(''a[data-method="delete"]'').live(''ajax:success'', > function(event, data, textStatus, jqXHR){ > alert(data.name + '' has been deleted''); > }); > }) > ----------------------------------- application.js extract ends > --------------------- >Where does your the syntax for the event name ''ajax:success'' come from? In prototype you can use the event name ''dom:loaded'', although I can''t find much information about where that name comes from either, but in any case that is prototype--not jQuery.> Questions: > ---------------- > > In my case (i''m not definining <action>.js.erb) as all I wanted was to > have > the deleted entries fade out (I defined some javascript in > application.js), > 1) for js format, can I safely assume that @name gets sent out in the > response as :json since the request was a xhr request? >No. json format has nothing in particular to do with ajax.> 2) When @name has been defined in the format.js block, can I assume that > the > data just gets sent in the response >No. Defining a variable and assigning it a value doesn''t send anything to the browser. Instead, rails will attempt to render the page ''action_name.js.erb'', and of course on that page any @ variables created in the action will be available.> and it is therefore up to any > javascript > to pick it up? > > Thank you-- Posted via http://www.ruby-forum.com/. -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
> Where does your the syntax for the event name ''ajax:success'' come from? > In prototype you can use the event name ''dom:loaded'', although I can''t > find much information about where that name comes from either, but in > any case that is prototype--not jQuery.I picked it up from http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-in-rails3/ -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
hi, guys, Havent'' touch the source code for a week. For some weird reason, when my destroy method has run, my ajax:success js action does not run (ie. an alert box with a message, ''Entry with has been deleted''). On the browser (assume firefox with firebug), how do we find out if ajax:success was triggered? thanks KM -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
public/javascript/application.js
------------------------------------
$(''.delete_part'')
.live("ajax:success", function() {
alert(" Part is deleted" );
}
);
controllers/parts_controller.erb
------------------------------------
def destroy
@part = Part.find(params[:id])
@part.destroy
respond_to do |format|
format.html { redirect_to(parts_url) }
format.xml { head :ok }
end
end
views/parts/index.html.erb
------------------------------------
<% if @parts != nil %>
<table border="0" id="table-lined">
<tr>
<th>Id</th>
<th>Title</th>
<th>Brand new?</th>
<th colspan="5">Manage</th>
</tr>
<% @parts.each do |part| %>
<tr>
<td>
<%= part.id %>
</td>
<td><%= link_to(part.title, part) %> </td>
<td><%= link_to ''Preview'', part
%></td>
<td><%= link_to ''Update'',
edit_part_path(part) %></td>
<td>
<% link_to ''Delete'',
part_path(part.id),
:method => :delete,
''data-confirm'' => ''Are you
sure?'',
''data-remote'' =>
''true'',
''class'' =>
''delete_part''
%>
</td>
</tr>
<% end %>
</table>
<hr>
<% end %>
<%= link_to ''New Part'', new_part_path %>
each <A> link generated is:
<tr>
<td>
2
</td>
<td><a href="/parts/2">fddfdfdfdfdffd</a>
</td>
<td><a href="/parts/2">Preview</a></td>
<td><a href="/parts/2/edit">Update</a></td>
<td>
<a href="/parts/2" class="delete_part"
data-confirm="Are you sure?"
data-method="delete" data-remote="true"
rel="nofollow">Delete</a>
</td>
</tr>
When I clicked on the "Delete" link, the
''ajax:success'' method
doesn''t run. If it did, the alert box with the message of
''Part is
deleted'' does not show up at all.
1) how do I detect on the browser (firefox with firebug) that
ajax:success has run?
2) what am I missing? I refered to
http://stackoverflow.com/questions/5774569/simple-example-of-rails-3-ujs-using-ajax-to-make-a-remote-call-and-rendering-t
also but it didn''t work :(
thanks :)
KM
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
I figured it out!
Left out the "$(document).ready(function(){ ... });" lines
in application.js.erb.
If anyone gets stuck like this, think of the line above.
Hope it helps :)
Gordon
On Sep 17, 9:48 pm, "K.M."
<anexi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> public/javascript/application.js
> ------------------------------------
>
> $(''.delete_part'')
> .live("ajax:success", function() {
> alert(" Part is deleted" );
> }
> );
>
> controllers/parts_controller.erb
> ------------------------------------
> def destroy
> @part = Part.find(params[:id])
> @part.destroy
> respond_to do |format|
> format.html { redirect_to(parts_url) }
> format.xml { head :ok }
>
> end
> end
>
> views/parts/index.html.erb
> ------------------------------------
>
> <% if @parts != nil %>
> <table border="0" id="table-lined">
> <tr>
> <th>Id</th>
> <th>Title</th>
> <th>Brand new?</th>
> <th colspan="5">Manage</th>
> </tr>
>
> <% @parts.each do |part| %>
> <tr>
> <td>
> <%= part.id %>
> </td>
> <td><%= link_to(part.title, part) %> </td>
> <td><%= link_to ''Preview'', part
%></td>
> <td><%= link_to ''Update'',
edit_part_path(part) %></td>
> <td>
> <%> link_to ''Delete'',
> part_path(part.id),
> :method => :delete,
> ''data-confirm'' => ''Are
you sure?'',
> ''data-remote'' =>
''true'',
> ''class'' =>
''delete_part''
> %>
> </td>
> </tr>
> <% end %>
> </table>
> <hr>
> <% end %>
>
> <%= link_to ''New Part'', new_part_path %>
>
> each <A> link generated is:
>
> <tr>
> <td>
> 2
> </td>
> <td><a
href="/parts/2">fddfdfdfdfdffd</a> </td>
> <td><a
href="/parts/2">Preview</a></td>
> <td><a
href="/parts/2/edit">Update</a></td>
> <td>
> <a href="/parts/2"
class="delete_part" data-confirm="Are you sure?"
> data-method="delete" data-remote="true"
rel="nofollow">Delete</a>
> </td>
> </tr>
>
> When I clicked on the "Delete" link, the
''ajax:success'' method
> doesn''t run. If it did, the alert box with the message of
''Part is
> deleted'' does not show up at all.
>
> 1) how do I detect on the browser (firefox with firebug) that
> ajax:success has run?
> 2) what am I missing? I refered
tohttp://stackoverflow.com/questions/5774569/simple-example-of-rails-3-...
> also but it didn''t work :(
>
> thanks :)
>
> KM
--
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.