mentby.com
Blog | Jobs | Help | Signup | Login

Ajax and rails 3 UJS (jquery)



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
    *******(params[:id])
    *******

    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>

    <% *******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-unob[..]
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-javas[..]
6)  http://chrissloan.info/blog/rails_3_jquery_ujs/
7)  http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-[..]

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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Tue, 06 Sep 2011 06:55:04 -0700

1) I do this:

<    javascript_include_tag(
      " http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min[..]
      "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-[..]

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-[..]

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 *******.

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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


Ruby Forum Tue, 06 Sep 2011 08:53:29 -0700

Hello, 7stud
thanks for that :) Looks like a lot of GOOD info.
I will give it a go and revert :)

--
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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Wed, 07 Sep 2011 17:48:01 -0700

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
    *******(params[:id])
    *******

    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 *******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

--
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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Thu, 08 Sep 2011 22:22:00 -0700

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.

No.  json format has nothing in particular to do with ajax.

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.

--
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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


Ruby Forum Fri, 09 Sep 2011 12:20:27 -0700

I picked it up from  http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-[..]

--
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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Mon, 12 Sep 2011 19:56:04 -0700

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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Sat, 17 Sep 2011 04:08:22 -0700

public/javascript/application.js
------------------------------------

$('.delete_part')
    .live("ajax:success", function() {
        alert(" Part is deleted" );
    }
);

controllers/parts_controller.erb
------------------------------------
  def destroy
    *******(params[:id])
    *******
    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>

    <% *******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[..]
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*******.
To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe*******.
For more options, visit this group at  http://groups.google.com/group/rubyonrails-talk?hl=en.


ct9a Sat, 17 Sep 2011 04:48:53 -0700

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

--
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*******.
To unsubscribe from this group, send email to rubyonrails-talk unsubscribegooglegroups.com.
For more options, visit this group at  http://groups.google.com/group/rubyorails-talk?hl=en.


ct9a Sat, 17 Sep 2011 04:57:01 -0700



Related Topics

Post a Comment