Rendering view via jQuery

Okay, so I am very new to this jQuery stuff, and it seems like I’m
just going round and round on this… so I’m hoping someone can help.

I have a table that will have a image on each row that when click, it
adds a row with more details below the current row. The details will
all be pulled from rails.

I am using the DataTables plugin for jQuery for my table and am basing
my code off of this example:

The example adds the row without going to the server, so I have
modified fnFormatDetails to hit the server.

my modified code is this:

function fnFormatDetails ( oTable, nTr )
return‘<%= url_for :action=>“field_details” %>’, {},
null, ‘html’);

I have also tried multiple variations of this, and can’t get anything
to work.

I am hitting my action just fine, and it is parsing the view (as seen
with log statements), but when the row displays on the screen, I see:

[object XMLHttpRequest]

instead of the text. I have also tried just a plain
render(:text=>“some text”, :layout=>“false”) in my action, and have
the same results.

All the documentation I see makes me believe that the $.post method
should be returning html.

I have viewed this with FireBug, and it sees the response as the text
I gave.

As a side note, I chose to use the $.post method instead of the $.get
method because $.get was returning a 304 error. I get the 200 code
for $.post.

Also, I have tried this with both jQuery 1.4 and the jQuery instance
provided with the plugin.

Thanks in advance!

Do you want me to do all the research first and have the answers or do
out loud like we did last time?

I think the question might be better suited for the plugin developers.

Why hit the server again rather than have the initial response have the
class for the returned image you want to toggle set to display: none and
modify the ui control to toggle the css class?

On Thu, Aug 5, 2010 at 7:21 PM, Angel Robert M. <

Okay… so after a bit more digging… I realized the javascript error
I was getting from my rendered template occurred because of the line
breaks in the template (not really sure why… but an easy fix). I
did a gsub on all line breaks, and that seems to insert my row just

I still have plenty of formatting to do, but I hope this was my last
major hurdle. If you do have any more input on this issue (or
thoughts on why I ran into my problems), please let me know. I would
love to figure out what was going on,.

Thanks for your help,

It’s not the image that I’m concerned about coming from the server…
it’s the data I want to present in the new row that will come from the
server. If I didn’t need to find my object on click of the button, it
wouldn’t be an issue, but I need to find the object referenced in the
row so I can dynamically create the data.

Also, I do not believe this pertains to the plugin itself, the issue
occurs when I use the $.post function that is included with jQuery.
Even when I try an alert on the calls results, I get the [object
XMLHttpRequest] returned.

Here’s what I have so far that seems to at least present some HTML on
the screen (still haven’t determined why it didn’t work with my
earlier method)

The original code called this:
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), ‘details’ );

oTable represents my table and nTr represents the row I’m working
fnFormatDetails ina function that in the original case creates static
html… but this is where I was trying to hit the server with the
$.post call. This fnOpen function came with the DataTables plugin and
it appends a below the referenced row with the content
coming from fnFormatDetails.

This would return my new row, but the content would be "[object
XMLHttpRequest] " instead of the view content.

I exhausted Google on this… I couldn’t even find anything similar to
my issue. Which makes me thing I’m missing something small and

However… since I could not get this working… I opted to append the
row in my action. So, instead of calling the oTable.fnOpen function,
I just call $.post to my action. In the action, I write something
like this…
render :update do |page|


This appends my row beautifully, except the html returned seems to be
over-escaped by the escape_javascript method. For example, my html
close tags return as “</td>”, so the tags never end up closing. But
if I don’t escape it, I get a javascript error saying “r is null”. I
believe it is failing on one of my tags.

I appreciate any guidance you can give me on this. I have been trying
to solve this sorting issue for days, now, with various methods… and
just when I feel like I’m close, I run into a wall.

Thank you so much for your help!

On Aug 5, 9:33 pm, Angel Robert M. [email protected]

I admire your persistence. Don’t give up.

Is jQ loaded when you view the output source?

The extra data could be a row, as well as an image, you could toggle off
on as long as the tr had a unique tag in the output you could reference.
.data-row {

.data-row-hidden {
hidden blah…

$(’.data-row’).click(’.data-row-hidden’).toggle(’.data-row’); //it’s not
toggle it’s css something to switch…

SORT You can see me! I've been hiding BOO!

I have to cut and paste your reply into a text editor and go over it
line by
line to get it. Do you come with a debugger?

I think you need to instantiate a new object to hold your data is my

What did you google? I googled “[object XMLHttpRequest]”

what’s the partial field details code look like?

On Thu, Aug 5, 2010 at 9:58 PM, Angel Robert M. <

did you see this: plugin BTW.

On Thu, Aug 5, 2010 at 10:28 PM, Angel Robert M. <

Thank you for your replies. I verified that jQ is loaded in my
header. And it’s funny that you mention that example, since that is
what I have been modeling after (I actually referenced that link in my
original post :slight_smile: ).

Anyway, here’s what my partial looks like:

Risk Description:
Link to source: Could provide a link here
Extra info: And any further details here (images etc)

It’s very plain right now… I plan to add dynamic data, next… but I
wanted to get it to display, first :).

I believe my issues with the line breaks is that when the text
returned with line breaks… javascript could not interpret it
properly since it was seeing multiple lines instead of a string like:

”. It was returning it as:


But I’m not totally sure… if that was the issue.

Thanks again for all of your help,
On Aug 6, 2:12 am, Angel Robert M. [email protected]

On Fri, Aug 6, 2010 at 5:57 AM, Trish [email protected] wrote:

When the new row renders, part of the code from my partial
disappears. I know it sounds crazy… and I have no clue what’s

As I stated before, my partial looks like this…

Sorry, haven’t been following this thread but that just jumped out at
that’s totally invalid HTML. A TABLE can’t be a child of a TR – would
have to be a TD or TH.

Invalid markup pretty much guarantees you JS problems; make sure
your initial page validates and go from there.

Your markup, by the way, is extremely old-school; you’d be better off
pulling all that archaic inline styling out into a stylesheet – much
to read and maintain, among other things…


Hassan S. ------------------------ [email protected]
twitter: @hassan

Thank you so much. I just realized that myself. I can’t believe I
missed that simple mistake. I was so busy looking for something
major, I overlooked a simple bug.

How embarrassing.

Thanks for your help,

On Aug 6, 9:06 am, Hassan S. [email protected]

After looking into this further… it doesn’t appear to be working as

When the new row renders, part of the code from my partial
disappears. I know it sounds crazy… and I have no clue what’s

As I stated before, my partial looks like this…

Risk Description:
Link to source: Could provide a link here
Extra info: And any further details here (images etc)

But when I view source… this is what I see:

,,, my original row ... Risk Description: Link to source: Could provide a link here Extra info: And any further details here (images etc)

The outer

and tags do not display.

With FireBug, I viewed the response coming from the server, and it
show’s this:
$("#2").after("<tr id=“2_details”><table cellpadding=“5”
cellspacing=“0” border=“0” style="padding-left:50px;


This still includes the outer

Risk Description:
Link to
Could provide a link here
And any further details here (images etc)

To make matters more complicated, when I tried to ‘simplify’ my
string, and hard coded the html (instead of pulling from a partial) to

I get the original javascript error that I thought was caused by the
line breaks:
RJS error:
TypeError: r is null

The javascript coming across is shown to be this:


I’m going crazy trying to do something that seems so simple, but the
unexpected keeps getting in my way.

Oh… and as far as the old-school markup goes… I was just using the
code for the example I was working off of… just to see if I could
make things work. The partial will be completely different when I’m
done with it.