Topic: How to refactor link_to_function using jQuery

Hi all,

The following code does what I want, but I will like to move it to application.js

The problem is:
1. it does not work.
2. I do not know how to.

<%=link_to_function 'Add a note:',"jQuery('#notes').append('#{escape_javascript render(:partial => 'notes',:object =>Note.new)}')" %>

application.js

function make_note()
{
  jQuery('#notes').append('#{escape_javascript render(:partial => 'notes',:object =>Note.new)}');
}

Thanks,
-Luis.

Re: How to refactor link_to_function using jQuery

Hmmmmm,  this is a WAG (Wild Ass Guess).  In my code, whenever I do jQuery, it looks like this:

%=link_to_function 'Add a note:',"$('#notes').....

Now, it could be that jQuery('#notes') is just another more verbose syntax for the same thing,  and I've never managed do discover it (a common occurrence).

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: How to refactor link_to_function using jQuery

Well, another common occurrence, I missed the point of the very first part of the post,  that being it works,  just not when you move it to application.js

Clearly, your syntax is correct, so something else is going on.

Do you use FireFox & Firebug ?

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: How to refactor link_to_function using jQuery

Umm.. yeah it's because you are trying to output RUBY in javascript!!

look at what you are doing:

jQuery('#notes').append('#{escape_javascript render(:partial => 'notes',:object =>Note.new)}');

You are telling javascript to do something with #{} which means nothing in javascript, and you are telling to "escape_javascript" which means nothing in javascript, and you are telling it "render :partial ..." which also means nothing in javascript.

What you need to do is either have a controller action that outputs that partial and use an ajax updater to get that on the page, or you need to put that content in a hidden field and tell javascript to append #notes with the contents of the form field.

-patrick

Re: How to refactor link_to_function using jQuery

Yes I do use Firefox and Firebug.

I am guessing that, the syntax for application.js need to change to something else, but to what?

the #{} is ruby not javascript, but then again I am just guessing.

Re: How to refactor link_to_function using jQuery

application.js has to be javascript only.  No ruby allowed...  Unless you do somthing different and generate a javascript file with ruby (using js.erb) then you can mix the two together.

-patrick

Re: How to refactor link_to_function using jQuery

Thanks brad and patrick,

I think I need to learn how to use a js.erb.

Re: How to refactor link_to_function using jQuery

there are some examples using js.erb here:

http://railscasts.com/episodes/88-dynamic-select-menus
http://railscasts.com/episodes/205-unob … javascript

-patrick

Re: How to refactor link_to_function using jQuery

I am starting to get it, but I must be doing something wrong.

I just move the code to a js.erb file but it does not get loaded.

js_code.js.erb

 function make_note() {
  jQuery('#notes').append("#{escape_javascript render(:partial => 'notes',:object =>Note.new)}");
}

in my layout

<%= javascript_include_tag "js_code" %>

The html source of the page looks like this:
<script src="/javascripts/js_code.js" type="text/javascript"></script>

Do I have to do something else in the routes.rb file?

I did try

 map.connect ':controller/:action.:format'

but still I keep getting
make_note is not defined.

and
Processing ApplicationController#index (for 127.0.0.1 at 2010-06-06 13:33:21) [GET]

ActionController::RoutingError (No route matches "/javascripts/js-code.js" with {:method=>:get}):

Last edited by lmcdougall (2010-06-06 13:38:37)

Re: How to refactor link_to_function using jQuery

You missed the point of a previous post,  you're sending Ruby code to the JavaScript interpreter, it's doesn't know how to handle it.

The second thing is I think your JavaScript is wrong.

$(document).ready(function()
{
  make_note = function() {
    jQuery(.....
  }
});

But when you get that working,  it still wont work,  because when jQuery get's to the 'escape_javascript',  it won't know what to do with it,  because it's not JavaScript,  it's something that only the Ruby on Rails server would understand, not JavaScript in the browser.

You need to move that JavaScript to RJS,  read up on RJS.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: How to refactor link_to_function using jQuery

You're still using .js.erb file incorrectly. You don't format it like you would js in a application.js file, jquery is already loaded at the head of the page.

Here's a create.js.erb from something i'm doing:

$('<%= escape_javascript(render(:partial => 'project_tasks/project_task', :locals => {:f => @project_task})) %>').hide().appendTo($('<%= escape_javascript("#member_list_" + @project_task.owner_id.to_s) %>')).fadeIn('slow', function(){
  $("#new_project_task_button span").removeClass('opened');
      
  $('body').append('<div id="notice"><a href="#" class="close_notice recessed_button"><img src="/images/trans_x.png" /></a><h2>Project Action</h2><div class="content"><p><%= escape_javascript(flash.delete(:notice)) %></p></div></div>');
});

Notice that you still have to use the <%= to start ruby interpretation (your first example started with the #{, which is for interpretation inside a string, that's inside an output… bracket(correct terminology?).

Re: How to refactor link_to_function using jQuery

BradHodges wrote:

You missed the point of a previous post,  you're sending Ruby code to the JavaScript interpreter, it's doesn't know how to handle it.

The second thing is I think your JavaScript is wrong.

$(document).ready(function()
{
  make_note = function() {
    jQuery(.....
  }
});

But when you get that working,  it still wont work,  because when jQuery get's to the 'escape_javascript',  it
won't know what to do with it,  because it's not JavaScript,  it's something that only the Ruby on Rails server would understand, not JavaScript in the browser.

You need to move that JavaScript to RJS,  read up on RJS.


100% wright, thank you, agree with you
http://www.translationservicesworld.com … eters.html

Last edited by nirma1230 (2011-06-28 01:45:33)