# Ajax output not rendering as it should

**URL:** <https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939>\
**Category:** Rails\
**Created:** [April 3, 2007, 5:51am UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939 "2007-04-03T05:51:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 3, 2007, 5:51am UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/1 "2007-04-03T05:51:15Z")

</div>

I had everything rendering properly before the ajax was introduced.  
Now the javascript is being rendered out to the html page.

#Here is the list that the items are to be rendered out to

#the controller method calling on the rjs file  
def show\_tasks  
@tasks = Task.find(:all, :conditions =\> [“category\_id = ?”,  
params[:id]])  
end

#the \_task.rhtml file

- \<%= task.name %\> \<%= link\_to "View", :controller =\> "task", :action=\> :show, :id =\> task %\> \<%= link\_to "Edit", :controller =\> "task", :action=\> :edit, :id =\> task %\> \<%= link\_to "Delete", {:controller =\> "task", :action=\> :delete, :id=\>task}, {:confirm=\>"Are you sure you want to delete this task", :method=\>:post } %\>

#and finally the element that the bad output is rendered to

try { Element.update("task\_list", "- \n blah blah blah\n View\n Edit\n Delete\n
\n"); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"task\_list\", \"- \n blah blah blah\n View\n Edit\n Delete\n
\n\");'); throw e }

Any help is appreciated

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 3, 2007, 1:41pm UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/2 "2007-04-03T13:41:19Z")

</div>

Hi Chris,

chris wrote:

> Now the javascript is being rendered out to the html page.
> 
> #the controller method calling on the rjs file

What does show\_tasks.rjs contain? It looks like that may be where your  
problem is.

Best regards,  
Bill

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 4, 2007, 6:36am UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/3 "2007-04-04T06:36:41Z")

</div>

Oops forgot about that one, here it is

# ==== page.replace\_html(“task\_list”, :partial =\> “task”, :collection=\> @tasks)

It also seems that the rhtml portion containing the error, was taken  
after trying to come up with a solution, which is the reason it is  
within a div tag. It should be within a ul tag

try { --\> 
try { ...

Thanks for the help

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 4, 2007, 2:54pm UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/4 "2007-04-04T14:54:04Z")

</div>

I do have the javascript\_include\_tag :defaults

As for the link\_to, that is that thing that puzzles me, since the  
links that appear are hard links to a separate page, it is the hard  
links appearing that is contained within the ajax. I really don’t  
know why the javascript is rendering out there.

# here is the main page, which has a list of categories on the left side, then after clicking on one of them the ajax kicks in and shows the related tasks on the right side

\<% unless flash[:notice].nil? %\>

 \<%= flash[:notice] %\> 
\<% end %\>

## Categories
 \<%= link\_to "Add Category", :controller =\> "category", :action =\> :create %\> 
 \<%= render :partial =\> "category", :collection =\> @categories %\> 

## Tasks
 \<%= link\_to "Create New Task", :controller =\> "task", :action =\> :create, :id =\> params[:id] unless params[:id].nil? %\> 
 There are no tasks for this category 

============= Once again here is the category partial that appears on the left side =============- \<%= category.name unless category.nil? %\>
============= And here is the partial that shows the task details on the right side of the screen =============- \<%= task.name %\> \<%= link\_to "View", :controller =\> "task", :action=\> :show, :id =\> task %\> \<%= link\_to "Edit", :controller =\> "task", :action=\> :edit, :id =\> task %\> \<%= link\_to "Delete", {:controller =\> "task", :action=\> :delete, :id=\>task}, {:confirm=\>"Are you sure you want to delete this task", :method=\>:post }%\>

=============

I have even removed the link\_to items, just leaving the task name, and  
I still get all the javascript rendering out to the browser.

Thanks for you help

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 4, 2007, 1:30pm UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/5 "2007-04-04T13:30:19Z")

</div>

Hi Chris,

chris wrote:

> > > #the controller method calling on the rjs file
> > 
> > What does show\_tasks.rjs contain? It looks like that may be where your  
> > problem is.

I should have asked you for both views, not just the .rjs. My apologies  
for  
the extra turn-around. Your rjs looks fine. What appears to be  
happening  
is that rjs is sending the correct stuff to the browser, but the browser  
is  
either expecting html rather than js and so is rendering it rather than  
executing it, or the browser doesn’t know how to execute it. For case  
1,  
check the method you’re using to invoke the show\_tasks method. If it’s  
a  
link, for example, the method should be link\_to\_remote, not link\_to.  
Your  
view needs to be using something that submits using XMLHttpRequest, not  
a  
straight POST or GET. That’s how the browser knows to expect a js  
response  
that it should execute rather than simply display. If that’s already in  
place, then check your application.rhtml or controller-specific layout  
if  
applicable. It needs to have this in the section: \<%=  
javascript\_include\_tag :defaults %\>. That includes all the prototype js  
files you need for the browser to actually execute the js it receives.

Hope that helps,  
Bill

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 4, 2007, 4:10pm UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/6 "2007-04-04T16:10:14Z")

</div>

Hi Chris,

chris wrote:

> I should also add that the ajax is working fine when clicking on the  
> category links on the left side of the screen (no postback),

> > ## Categories
> > \<%= link\_to "Add Category", :controller =\> "category", :action =\> :create %\>

Not sure what you mean here. If the above is what you’re referring to,  
there is no Ajax taking place via the category links. Clicking on the  
“Add  
Category” link sends a straight Http GET to the server. The server is  
sending back html which, because it sent a request using Http, the  
browser  
is rendering correctly.

> it is just the task items on the left side of the screen  
> that then render out javascript that is the problem.

> > ```
> > <%= render :partial => "category", :collection => @categories %>
> > 
> > ```

> > =============  
> > In both cases you’re using straight links to invoke controller methods  
> > which  
> > causes the browser to expect an html response. The difference between  
> > the  
> > situation above and this one is that in the one above you’re sending  
> > back  
> > html and in this one you’re sending back js. So…

1. Assuming that you’re category object is getting generated by  
enumerating  
a instance variable, I think if you replace the \<a…\> with  
\<%= link\_to\_remote(category.name, :url =\>{:action =\> ‘show\_tasks’, ::id  
=\>  
category}) %\>  
your problem will be fixed.
2. Spend the $9.95 to pick up Cody F.'s RJS tutorial (in PDF) from  
O’Reilly. It’ll put you on the right track.

Best regards,  
Bill

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 4, 2007, 3:13pm UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/7 "2007-04-04T15:13:56Z")

</div>

I should also add that the ajax is working fine when clicking on the  
category links on the left side of the screen (no postback), it is  
just the task items on the left side of the screen that then render  
out javascript that is the problem. The html containing the rendered  
ajax was using an addon in firefox to obtain the html contained within  
the DOM, but not actually rendered out to the page. (that is kind of a  
key point, not sure how I left it out before)

---

<div class="post-metadata">

**Author:** ![chrisolsen](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/c6cbf5/32.png) [@chrisolsen](https://www.ruby-forum.com/u/chrisolsen)\
**Post date:** [April 7, 2007, 4:14am UTC](https://www.ruby-forum.com/t/ajax-output-not-rendering-as-it-should/90939/8 "2007-04-07T04:14:47Z")

</div>

I bought the book, and as you mentioned the better way to do it was  
using the link\_to\_remote method. All is working now nicely.

Thanks for the help.