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:

http://datatables.net/examples/api/row_details.html

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 jQuery.post('<%= 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!
Trish

Do you want me to do all the research first and have the answers or do it 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 css class for the returned image you want to toggle set to display: none and modify the ui control to toggle the css class?

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
with.
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 <tr></tr> 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
obvious.

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|

page["#my_id"].after(escape_javascript(render :partial=>"field_details"))
end

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 </tr> 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!
Trish

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
fine.

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,
Trish

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 and on as long as the tr had a unique tag in the output you could reference.

.data-row {

blah…

}

.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 initial thought…

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

what’s the partial field details code look like?

did you see this:

http://datatables.net/examples/api/row_details.html

neat plugin BTW.

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:

<tr>
<table cellpadding="5" cellspacing="0" border="0" style="padding-left:
50px;">
<tr><td>Risk Description:</td><td></td></tr>
<tr><td>Link to source:</td><td>Could provide a link here</td></tr>
<tr><td>Extra info:</td><td>And any further details here (images etc)</

</tr>

</table>
</tr>

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:
"<table>\n<tr>\n<td></td>\n</tr>\n</table>". It was returning it as:
"<table>
<tr>
<td></td>
</tr>
</table>"

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

Thanks again for all of your help,
Trish

Okay...
After looking into this further... it doesn't appear to be working as
expected....

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
happening.

As I stated before, my partial looks like this...

<tr id="id_details">
<table cellpadding="5" cellspacing="0" border="0" style="padding-
left:
50px;">
<tr><td>Risk Description:</td><td></td></tr>
<tr><td>Link to source:</td><td>Could provide a link here</td></tr>
<tr><td>Extra info:</td><td>And any further details here (images
etc)</

</tr>

</table>
</tr>

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

<tr>, my original row … </tr>
<tr><td>Risk Description:</td><td></td></tr>
<tr><td>Link to source:</td><td>Could provide a link here</td></tr>
<tr><td>Extra info:</td><td>And any further details here (images
etc)</

</tr>

The outer <tr> and <table> 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;
\"><tr><td>Risk Description:</td><td></td></tr><tr><td>Link to
source:</td><td>Could provide a link here</td></tr><tr><td>Extra
info:</td><td>And any further details here (images etc)</td></tr></

</tr>");

This still includes the outer <tr> and <table> tags.

To make matters more complicated, when I tried to 'simplify' my
string, and hard coded the html (instead of pulling from a partial) to
this:
"<tr><table></table></tr>"

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:
$("#2").after("<tr><table></table></tr>")

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

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
happening.

As I stated before, my partial looks like this...

<tr id="id_details">
<table cellpadding="5" cellspacing="0" border="0" style="padding-
left: 50px;">

...

</table>
</tr>

Sorry, haven't been following this thread but that just jumped out at me:
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 easier
to read and maintain, among other things...

FWIW,

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,
Trish

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.