Update div with Prototype

rubyonrails-talk
1

I want to update a div on my page with prototype (new Ajax.Updater ('my_div', 'page.html')). What I do is:

. . <% = csrf_meta_tag%> <% = javascript_include_tag: defaults%> . . <% = yield%> . .

<% = link_to "Link", page_path,: remote => true%>

Without the :remote => true the div is updated but it does nothing.

Anybody can help me? Thanks.

2

I might be blind, but I can't see a <div> tag anywhere. I think your snippet should also contain controller code to be able to see what might be going on.

3

Hello Guest,

This is my full code, I want to update "datos", without the :remote => true the div is updated but the full page, and it does nothing.

application.html.erb

<!DOCTYPE html> <html>   <head>     <title><%= title %></title>     <%= csrf_meta_tag %>     <%= render 'layouts/stylesheets' %>     <%= javascript_include_tag :defaults %>   </head>

  <body>     <div class="container">         <%= render 'layouts/header' %>         <div class ="datos" id="datos" >             <%= yield %>         </div>         <%= render 'layouts/footer' %>     </div>   </body> </html>

_header.html.erb

<header>     div class="menu_activado">         <% = link_to "Link", about_path,: remote => true%>     </div><!-- fin sub_cabecera --> </header>

routes.rb

SampleApp::Application.routes.draw do   match '/about', :to => 'pages#about'   root :to => 'pages#home' end

application_controller.rb

class ApplicationController < ActionController::Base   protect_from_forgery   include SessionsHelper end

pages_controller.rb

class PagesController < ApplicationController   def home     @title = "Home"   end   def about     @title = "About"   end end

application_helper.rb

module ApplicationHelper     base_title = "Example"     if @title.nil?       base_title     else       "#{base_title} | #{@title}"     end   end end

Thank you.

4

Hi,

I have not used Rails 3 yet and I see by your link_to helper that's what you are using. Sorry if I can't be of much help, but I'll try to point out what I see here that _could_ be wrong.

    div class="menu_activado">         <% = link_to "Link", about_path,: remote => true%>     </div><!-- fin sub_cabecera -->

I am assuming the first div is missing the opening '<' because of a mistake while copying the code?

A quick look at the Rails 3 API does not show how to indicate that you want to update an HTML element's contents. Compare the link above with the following, based on Rails 2.3.5:

<%= link_to_remote 'Get Time',   :update => 'current_time',   :url => {:action => 'get_time' },   :complete => visual_effect(:hightlight_shake, :current_time) %> <div id="current_time"></div>

Notice the :update line? It indicates what HTML element to update with the contents returned by the server. I can't see in the Rails 3 API how to do that. Maybe it's explained somewhere else but not in the link_to helper docs, as far as I could see.

&lt;div class=&quot;container&quot;&gt;
    &lt;%= render &#39;layouts/header&#39; %&gt;
    &lt;div class =&quot;datos&quot; id=&quot;datos&quot; &gt;
        &lt;%= yield %&gt;
    &lt;/div&gt;
    &lt;%= render &#39;layouts/footer&#39; %&gt;
&lt;/div&gt;

I am not sure you really want to replace the contents of 'datos'. That would replace the contents of the whole page except for the header and the footer.

class PagesController < ApplicationController def about @title = "About" end end

From the link_to_remote Rails 2.3.8 API: "Returns a link to a remote action defined by options[:url] (using the url_for format) that’s called in the background using XMLHttpRequest. The result of that request can then be inserted into a DOM object whose id can be specified with options[:update]. Usually, the result would be a partial prepared by the controller with render :partial."

The last sentence is the important one. Your 'about' action does not render anything, it only assigns a value to a variable. The returned value of your action will be the string 'About' and that should be what you get in 'datos' after the code executes, supposing that the div gets updated.

5

The title variable is to change the title when the page is refreshed.

What you're doing with link_to_remote is what I want it. The problem is that Rails 3 does not work the "remote => true" in the "link_.to" and is supposed to be the equivalent of link_to_remote in Rails 2. And if I remove the option of remote: true, refreshes the entire page and not the HTML element that I want, in this case datos div.

Thank you.

6

The title variable is to change the title when the page is refreshed.

I believe you are a little lost about how the whole thing works. At first you said you wanted to change the contents of 'datos' but now you say you want to change the contents of the tag <title>. I'll assume from now on it is the later.

  <head>     <title><%= title %></title>   </head>

I think there is a typo in your code. Shouldn't it be <%= @title %>?. Besides that, I have never tried to replace the contents of an element in the <header> section so I'm not sure it will work. I'd appreciate if you let me know when you get your code working.

For your code to work you would have to give an id to the element you want to replace, as in:

<title id="title"><%= @title %></title>

Then it might be a good idea to create a partial and render it to replace the contents of the tag <title>, although returning just a string might be OK. You would also need to tell your 'link_to' helper which HTML element to replace ('title' in this case) and as I explained before I couldn't see how to do that by looking at the API with Rails 3. Somebody else already using Rails 3 might be able to help better than me there.

7

The title variable is to change the title when the page is refreshed.

I believe you are a little lost about how the whole thing works. At first you said you wanted to change the contents of 'datos' but now you say you want to change the contents of the tag <title>. I'll assume from now on it is the later.

<head>    <title><%= title %></title> </head>

I think there is a typo in your code. Shouldn't it be <%= @title %>?. Besides that, I have never tried to replace the contents of an element in the <header> section so I'm not sure it will work. I'd appreciate if you let me know when you get your code working.

For your code to work you would have to give an id to the element you want to replace, as in:

<title id="title"><%= @title %></title>

The raw Prototype code to update the content of the title tag (without ID) is as follows:

$$('title').first().update('Foo bar baz');

Perhaps you can modify your script to make that call.

Walter

8

I want to update the div (datos), the title works well. I don't know why the option "remote => true" does not works.

A greeting. Thanks.

9

Alberto B. wrote in post #965480:

I want to update the div (datos), the title works well. I don't know why the option "remote => true" does not works.

A greeting. Thanks.

Look here: Rails 3 link_to :remote - Rails - Ruby-Forum

Cheers ace