Wednesday, October 24, 2012

Rails 3.2.8 AJAX super-basic example

This is an updated-for-rails 3.2.8 super-simple AJAX tutorial, for people who have already followed a basic rails tutorial. I found a lot of rails AJAX tutorials but just enough has changed since 3.2.8 I wanted to show an updated version.
First, my versions of things I am using!

carmen@ubuntu:~/ws$ uname -a
Linux ubuntu 3.2.0-31-generic #50-Ubuntu SMP Fri Sep 7 16:16:45 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
carmen@ubuntu:~/ws$ ruby -v
ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]
carmen@ubuntu:~/ws$ rails -v
Rails 3.2.8

Now on to the good stuff!

rails new ponies
cd ponies
rails generate scaffold Pony name:string profession:string
rake db:migrate
rails s

Make some ponies...

http://localhost:3000/ponies/new

Update your destroy line in index.html.erb. Add :remote => true, :class => 'delete_pony' to app/views/ponies/index.html.erb. The line should now look like:

    <%= link_to 'Destroy', pony, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_pony' %> 

Create a file, destroy.js.erb, put it next to your other .erb files (under app/views/ponies). It should look like this:

$('.delete_pony').bind('ajax:success', function() {  
        $(this).closest('tr').fadeOut();
});  

Add format.js { render :layout => false } to your controller (app/controllers/ponies_controller.rb). Your destroy method should now look like this:

  # DELETE /ponies/1
  # DELETE /ponies/1.json
  def destroy
    @pony = Pony.find(params[:id])
    @pony.destroy

    respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
    end
  end

Restart your server, and click 'Delete' on some ponies (Preferably Rainbow Dash), and viola, they just fade out! In Rails 3.2.8.

79 comments:

  1. simple Yet great..
    I have been following many outdated version and wasted so much time.
    And this is just what I am looking for.
    Thanks again.

    ReplyDelete
  2. Great. thanks!

    Can you extend this to including ajax adding and editing some ponies?

    ReplyDelete
  3. Great! I was able to delete pony using this example.

    ReplyDelete
  4. Just wanted to say thanks for this really simple and easy tutorial, helped me no end in grasping how to complete an Ajax request.

    ReplyDelete
  5. i am trying to put a post methof on to a form but i am not able to , any help ??

    ReplyDelete
  6. Thanks so much for this! I was wracking my brain trying to come up with a simple way to do it and ended up refreshing the whole table with a partial, etc. This is soooo much better.

    ReplyDelete
  7. I do have one question though, is it possible to render the notices with this system? For html I have:

    format.html { redirect_to session[:return_to], notice: 'Label was deleted successfully.' }

    So I tried:
    format.js { render layout: false, notice: 'Label was deleted successfully.' }

    But it doesn't work.

    ReplyDelete
  8. Hey, that's awesome!!!
    I tried it here and it worked, but I have a doubt...if I have more than two ponies both will have the class "delete_pony", but as the function

    "$ ('. delete_pony'). bind ('ajax: success', function () {
             $ (this). closest ('tr'). fadeOut ();
    }); "

    knows what is the "delete_pony" class that i chosen to be deleted?

    :X!

    Tks again!

    ReplyDelete
  9. very useful stuff for who are new to ajax with rails. Thanks so much

    ReplyDelete
  10. Wonderful Thank's a lot Carmen Norah Gray Dean

    ReplyDelete
  11. Given so much information in it. its very useful .perfect explanation about ajax .Thanks for your valuable information. dot net training and placement in chennai | dot net training institute in velachery

    ReplyDelete
  12. It is really a great work and the way in which u r sharing the knowledge is excellent.Thanks for helping me to understand basic concepts. As a beginner in Dot Net programming your post help me a lot.Thanks for your informative article.
    dot net training and placement in chennai | dot net training institute in velachery

    ReplyDelete
  13. This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful.

    rpa Training in Chennai

    rpa Training in bangalore

    rpa Training in pune

    blueprism Training in Chennai

    blueprism Training in bangalore

    blueprism Training in pune

    iot-training-in-chennai

    ReplyDelete
  14. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune
    Data Science training in kalyan nagar
    Data Science training in OMR
    selenium training in chennai

    ReplyDelete
  15. Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for developing their skill to get good career.

    java training in chennai | java training in USA

    selenium training in chennai

    ReplyDelete
  16. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

    Devops training in sholinganallur

    ReplyDelete
  17. I love the blog. Great post. It is very true, people must learn how to learn before they can learn. lol i know it sounds funny but its very true. . .
    Blueprism training in Pune

    Blueprism training in Chennai

    ReplyDelete
  18. Some us know all relating to the compelling medium you present powerful steps on this blog and therefore strongly encourage contribution from other ones on this subject while our own child is truly discovering a great deal. Have fun with the remaining portion of the year.
    iosh course in chennai

    ReplyDelete

  19. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    Java Training in Chennai | Best Java Training in Chennai
    C C++ Training in Chennai | Best C C++ Training in Chennai

    ReplyDelete
  20. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us. Do check Cloud Computing Courses in Chennai |
    Cloud Computing Training in Chennai Get trained by an expert who will enrich you with the latest updates.
    Blue Prism Training in Chennai
    German Classes in Chennai
    Data Science Course in Chennai
    Devops Training in Chennai
    Cloud Computing Training in Porur
    Cloud Computing Training in Adyar


    ReplyDelete
  21. This blog is full of innovative ideas and i really like your informations.please add more details in future.
    Selenium Training in Chennai
    Python Training in Chennai
    Python Training in Velachery

    ReplyDelete
  22. Nice and very useful blog. A great and very informative post, Keep up the good work!


    Data Science Courses Bangalore

    ReplyDelete
  23. Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
    date analytics certification training courses
    data science courses training

    ReplyDelete
  24. I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy.
    data science course malaysia

    ReplyDelete
  25. It is perfect time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I want to read more things about it!




    DATA SCIENCE COURSE MALAYSIA

    ReplyDelete
  26. This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this,
    Data science Courses banglore

    ReplyDelete
  27. I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article.digital marketing

    ReplyDelete
  28. Thanks for Sharing This Article.It is very so much valuable content. I hope these Commenting lists will help to my website
    best angular js online training
    angular js online training
    top angular js online training

    ReplyDelete
  29. I curious more interest in some of them hope you will give more information on this topics in your next articles.

    digital marketing course

    ReplyDelete
  30. This Was An Amazing ! I Haven't Seen This Type of Blog Ever ! Thankyou For Sharing, data science traning

    ReplyDelete
  31. thanks for sharing nice information....
    more : https://www.kellytechno.com/Hyderabad/Course/Machine-Learning-Training-In-Hyderabad

    ReplyDelete
  32. Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
    "Simple Linear Regression
    Correlation vs Covariance
    "

    ReplyDelete
  33. A good blog always comes-up with new and exciting information and while reading I have feel that this blog is really have all those quality that qualify a blog to be a one.
    data science courses

    ReplyDelete
  34. wonderful article. I would like to thank you for the efforts you had made for writing this awesome article. This article resolved my all queries. data science courses

    ReplyDelete
  35. Detectives privados Madrid Asociados es un despacho de investigación privada en Madrid con gran experiencia. Contacta con los mejores detectives privados en Madrid para todo tipo de investigaciones privadas.

    detectives privados madrid
    agencia detectives Madrid

    Thank you..

    ReplyDelete
  36. very well explained .I would like to thank you for the efforts you had made for writing this awesome article. This article inspired me to read more. keep it up.salesforce training in chennai

    software testing training in chennai

    robotic process automation rpa training in chennai

    blockchain training in chennai

    devops training in chennai

    ReplyDelete
  37. Nice and very useful blog. A great and very informative post, Keep up the good work!
    DevOps Training in Chennai

    DevOps Course in Chennai


    ReplyDelete
  38. Excellent blog thanks for sharing the valuable information..it becomes easy to read and easily understand the information.
    Useful article which was very helpful. also interesting and contains good information.

    Java Training in Chennai

    Java Course in Chennai

    ReplyDelete
  39. This is an awesome motivating article.I am practically satisfied with your great work.You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to perusing your next post
    data scientist certification

    ReplyDelete
  40. very interesting post.this is my first time visit here.i found so many interesting stuff in your blog especially its discussion..thanks for the post!
    data scientist training and placement

    ReplyDelete
  41. Really an awesome blog and informative blog and useful for many people. Thanks for sharing this blog with us. If you want data science course, then check out the following link.
    Data Science Certification in Hyderabad

    ReplyDelete
  42. I think I have never seen such blogs ever before that has complete things with all details which I want. So kindly update this ever for us.
    cyber security course in malaysia

    ReplyDelete
  43. I would like to thank you for the efforts you have made in writing this article. I am hoping for the same best work from you in the future as well. In fact your creative writing abilities have inspired me to start my own Blog Engine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.
    best data science training in hyderabad

    ReplyDelete
  44. Hi buddies, it is a great written piece entirely defined, continue the good work constantly.
    cyber security course malaysia

    ReplyDelete

  45. Digi Uprise offers an excellent online course that can take three months to complete and will cover everything from marketing basics to the strategy of content. It's perfect for anyone looking to establish an foundation in
    Digital Marketing Course in Delhi and start getting an internship quickly. This takes a more mentor-led approach to learning full-stack digital marketing expertise by working on real-world projects. It is a good choice for those wanting to step up their learning an notch and get to know professionals in the industry on a monthly basis through regular video sessions. It's more practical rather than the standard video tutorials which could lead to greater confidence and more success.

    ReplyDelete
  46. This updated Rails 3.2.8 AJAX tutorial is a lifesaver for those navigating changes in Rails versions. It's concise, clear, and provides step-by-step guidance. Thanks for sharing this valuable resource!
    Data Analytics Courses in Nashik

    ReplyDelete
  47. Thank you for sharing your expertise and contributing to the Rails community. Your post serves as an excellent guide for developers looking to harness the power of AJAX in their Rails projects. Keep sharing related posts.
    Data Analytics Courses In Chennai

    ReplyDelete
  48. good blog
    Data Analytics Courses In Vadodara

    ReplyDelete
  49. I'm looking forward to exploring your unique perspective and insights on all things tech, and perhaps even uncover some hidden gems in the realm of 'Other Stuff.
    Digital marketing courses in illinois

    ReplyDelete
  50. Thanks for providing incredible and informative tutorial on Rails 3.2.8 AJAX.it made my concepts very clear.
    data analyst courses in limerick

    ReplyDelete
  51. Thanks for that nifty little tutorial. It was extremely useful.

    Investment banking analyst jobs

    ReplyDelete
  52. Ultimately, this is an awesome experience for the readers. Anyways, thanks a lot and keep sharing.
    Data analytics framework

    ReplyDelete