rendering view via jQuery

rubyonrails-talk
1

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

2

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.

3

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?

4

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

5

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

6

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]”

7

what’s the partial field details code look like?

8

did you see this:

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

neat plugin BTW.

9

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

10

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.

11

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,

12

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

13

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.