link_to_function

I require some information, displayed at the top of a page, to change
onclick.

The information is in the following form:

<h1>Name<br /><span>Job role</span></h1>
Description... <%= link_to "read more", :controller => "controller",
:action => "show", :id => id %>
<p><span>telephone number</span></p>

There is an image to correspond with this. The image is not a problem; I
have gotten this image to change on click with 'link_to_function'.

The information above, excluding the image of course, also needs to
change on click.

What is the best method of doing this?

Hey there,

Is that information already loaded in the page you are currently on?
If so, couldn't the function just swap out the content?

If not, and the more correct way of doing this, would be to hit some
sort of restful resource with link_to_remote and have it return
javascript to update the page with the retrieved information.

For example, slightly dated:
http://onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html

- Chris

Hi,

I require some information, displayed at the top of a page, to change
onclick.

The information is in the following form:

<h1>Name<br /><span>Job role</span></h1>
Description... <%= link_to "read more", :controller => "controller",
:action => "show", :id => id %>
<p><span>telephone number</span></p>

There is an image to correspond with this. The image is not a problem; I
have gotten this image to change on click with 'link_to_function'.

The information above, excluding the image of course, also needs to
change on click.

If you know at the time of rendering the initial display what
information needs to be displayed when the link is clicked, then you
should probably render both sets of info inside two <div>s: one with
style="display:block" and the other with style="display:none". Then
your link_to_function can simply toggle the display settings.

If you don't, then I'd recommend using a link_to_remote instead and
hitting the server to remove the first <div> and render the second
using an RJS template.

HTH,
Bill

Bill Walton wrote:

Hi,

There is an image to correspond with this. The image is not a problem; I
have gotten this image to change on click with 'link_to_function'.

The information above, excluding the image of course, also needs to
change on click.

If you know at the time of rendering the initial display what
information needs to be displayed when the link is clicked, then you
should probably render both sets of info inside two <div>s: one with
style="display:block" and the other with style="display:none". Then
your link_to_function can simply toggle the display settings.

I know what information needs to be displayed when the user clicks the
tab with the name on it. There are 4 tabs and therefore 4 pieces of
information that all use the same class. I'm trying to use a toggle
feature but it doesn't seem to be working.

Hi,

Bill Walton wrote:

Hi,

If you know at the time of rendering the initial display what
information needs to be displayed when the link is clicked, then you
should probably render both sets of info inside two <div>s: one with
style="display:block" and the other with style="display:none". �Then
your link_to_function can simply toggle the display settings.

I know what information needs to be displayed when the user clicks the
tab with the name on it. There are 4 tabs and therefore 4 pieces of
information that all use the same class. I'm trying to use a toggle
feature but it doesn't seem to be working.

'not working' isn't much to go on in terms of providing additional
help. Post some code; both the html.erb and the js function and maybe
we can say more.

Indeed it's not. See below, the functions used:

<SCRIPT language="javascript">
function changeImage(pictureLocation)
  {
    $('member_image').src = pictureLocation;
  }
function toggleInformation(name)
  {
    var element = document.getElementById(name);
    if (element.style.display != 'block' || element.style.display ==
'none')
    {
      element.style.display = 'block';
    }
    else
    {
      element.style.display = 'none';
    }
  }
</SCRIPT>

The call to these functions is below:

<div class="home_tabs">
  <%= link_to_function "Name 1",
"changeImage('/images/name_1_large.jpg'); toggleInformation(name_1);",
{:style => "width: 64px;"} %>
  <%= link_to_function "Name 2",
"changeImage('/images/name_2_large.jpg'); toggleInformation(name_2);",
{:style => "width: 57px;"} %>
  <%= link_to_function "Name 3",
"changeImage('/images/name_3_large.jpg'); toggleInformation(name_3);",
{:style => "width: 56px;"} %>
  <%= link_to_function "Name 4",
"changeImage('/images/name_4_large.jpg'); toggleInformation(name_4);",
{:style => "width: 71px;"} %>
</div>

The divs are below:

  <div class="home_intro" id="name_1" style="display:block">
    <h1>Full Name 1<br /><span>Job Role 1</span></h1>
    Information here... <%= link_to "read more", :controller =>
"staffs", :action => "show", :id => 4 %>
    <p><span>Telephone Number</span></p>
  </div>

The divs above are repeated for each of the staff members (4 in total),
I set the style of the other 3 as "display:none".