Question

I need to pass an entire html table content and trying to pass it as a param to the next gsp page in the ajax call

jQuery.ajax({
          type:'POST',
          data:{'table_cart': $("#table_cart").html()},
          url: '/gra/ar_request/nextpage',
          beforeSend: function() {
                   jQuery('#templateDiv').html('show spinner')
                },
          success:function(data,textStatus){jQuery('#templateDiv').html(data);},
          error:function(XMLHttpRequest,textStatus,errorThrown){}});
    return false;

when I try to retrieve the value in the next page I am getting all kinds of errors like “XML not formed properly, expecting img tag., ; missing ..etc”

I am just trying to do following to read the value on next page

var table_content = ${table_cart}

giving single quotes around the value gives error. Ineed to know how to pass the html content of a table to another gsp, is there a better way?

Details of the error on nextpage.gsp
missing ; before statement
http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js
Line 29

I am doing 
<script>
    var tbcont = ${rolecart}
</script>

I printed out the content on console from the action and it has the right content. i.e. all tags inside the table, do i need to encode the html content?
exact display of the content from the console is:

<thead>
                <tr>

                  <th scope="col" style="width: 40%">
                    <span class="column-sort">
                      <a href="#" title="Sort up" class="sort-up"></a>
                      <a href="#" title="Sort down" class="sort-down"></a>
                    </span>
                  Role
                  </th>
                  <th scope="col" style="width: 55%">
                    <span class="column-sort">
                      <a href="#" title="Sort up" class="sort-up"></a>
                      <a href="#" title="Sort down" class="sort-down"></a>
                    </span>
                 Description
                  </th>
                </tr>
              </thead>
              <tbody>

              <tr class="odd">

                    <td style="width: 40%;"><span style="color: black;">unix_server_read</span></td>
                    <td style="width: 55%;"><span style="color: black;">Role with UNIX based entitlements having read access</span
></td>
                </tr><tr style="color:black"></tr><tr style="color:black"> <td colspan="1">End Date: <input style="width:70px" nam
e="ar_enddate" value="" id="ar_enddate" type="text"><img src="images/icons/fugue/calendar-month.png" height="16" width="16"></td><
/tr><tr style="height:8px"></tr><tr class="even">

                    <td style="width: 40%;"><span style="color: black;">unix_server_write</span></td>
                    <td style="width: 55%;"><span style="color: black;">Role with UNIX based entitlements having write access</spa
n></td>
                </tr><tr style="color:black"></tr><tr style="color:black"> <td colspan="1">End Date: <input style="width:70px" nam
e="ar_enddate" value="" id="ar_enddate" type="text"><img src="images/icons/fugue/calendar-month.png" height="16" width="16"></td><
/tr><tr style="height:8px"></tr></tbody>

Answer 1

Do not pass html back to the server. Instead, extract the relevant parameters (using <g:form>) and rerender the content of the file in your AJAX call.

You can achieve this with grails by extracting the content of your table into grails-template file. This way you can render the content of the table in your AJAX call.

In your main gsp file, your table will look like:

<table>
     <g:render template="yourTableContent" model="${[..]}" />    
</table>

With a _yourTableContent.gsp file located at the same location as your gsp is located in.

In your action called from the client you can then call:

def nextpage = {
    [..]
    render(template:"yourTemplateContent", model: [...])
}