Forum: Ruby on Rails passing a value to a js function via button_to_function

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Bob W. (Guest)
on 2009-04-25 02:21
I've got a table of what I call resources, want to show in a jQuery
dialog a particular record when user clicks button in a row.

in the table I'm doing:

<td><%=button_to_function 'Show','showresource1()',:class =>"ui-button
ui-state-default ui-corner-all", :id => resource.id %></td>

js:

<script type="text/javascript" charset="utf-8">
  function showresource1()
  {
    jQuery("#resource_details").load(
'http://localhost:3000/resources/show/4').dialog('o...
  }
</script>

I can open the dialog and load this static URL, but am stumped re
passing resource.id from the button_to_function down to the js function.

Any help would be Much Appreciated!
7stud -. (Guest)
on 2009-04-25 04:00
Bob W. wrote:
> I've got a table of what I call resources, want to show in a jQuery
> dialog a particular record when user clicks button in a row.
>
> in the table I'm doing:
>
> <td><%=button_to_function 'Show','showresource1()',:class =>"ui-button
> ui-state-default ui-corner-all", :id => resource.id %></td>
>
> js:
>
> <script type="text/javascript" charset="utf-8">
>   function showresource1()
>   {
>     jQuery("#resource_details").load(
> 'http://localhost:3000/resources/show/4').dialog('o...
>   }
> </script>
>
> I can open the dialog and load this static URL, but am stumped re
> passing resource.id from the button_to_function down to the js function.
>
> Any help would be Much Appreciated!

My js is a little rusty, but typically when you want js to execute a
function after a user clicks on a button, you pass js a reference to the
function:

yourbutton.onclick = somefunc;

Then when the user clicks on the button, js executes the function using
the function reference it stored away.  But very importantly, js calls
the function with one argument:

yourbutton.onclick(event)

You can't change the way js will call the function.  js will always call
the function with one argument--the event object.  If you tried this:

yourbutton.onclick = somefunc(arg1, arg2);

then instead of assigning a reference to somefunc to yourbutton.onclick,
that line would cause somefunc to execute immediately, and then its
return value would be assigned to yourbutton.onclick.

With a little modification, you can get js to do what you want:

<script type="text/javascript" charset="utf-8">

  function showresource1(res_id)
  {
     jQuery("#resource_details").load(res_id).dialog('open');
  }


  function helperfunc(res_id)
  {
        return function () { showresource1(res_id); };
  }
</script>

helperfunc wraps another function around your function.  If you pass the
wrapper function to js, then when the user clicks on the button, js will
execute the wrapper function, which in turn will call your function.
That allows you to write something like this in js:

yourbutton.onclick =
helperfunc("http://localhost:3000/resources/show/4");

The causes helperfunc() to execute immediately, and helperfunc's return
value is what js will call when the user clicks on the function.
helperfunc's return value is this:

function () {
showresoursource("http://localhost:3000/resources/show/4"); }

After the user clicks on the button, js will call the wrapper function,
which in turn will call your function with the proper argument.

Because I just started learning rails, I don't know if rails provides a
direct solution for that js work around or not.  Anyway, that is
something for you to ponder until someone else posts a rails solution.
7stud -. (Guest)
on 2009-04-25 04:06
7stud -- wrote:
> The causes helperfunc() to execute immediately, and helperfunc's return
> value is what js will call when the user clicks on the function.


That should be:

That causes helperfunc() to execute immediately, and helperfunc's return
value is what gets assigned to yourbutton.onclick.  helperfunc's return
value is what js will call when the user clicks on the *button*.
This topic is locked and can not be replied to.