(rails) trying to add AJAX, but the ajax is returning an enormous try { .. } catch { .. } block

Question

I am putting some ajax into a rails project. I am trying to refresh a div with the contents of a partial.

page.replace_html("chemicals",  :partial => "chemicals", :object => @chemicals)

However, this returns a huge try/catch block, instead of re-rendering the partial correctly. any idea what's going on?

the error is:

 try {Element.update("chemicals", "<table>\n  <tr>\n    <th> name</th>\n    <th>Cas</th>\n    <th>Amount</th>\n    <th>Units</th>\n    <th>Vendor</th>\n\t<th>Vendor email</th>\n\t<th>Vendor website</th>\n\t<th>Vendor phone</th>\n  </tr>\n\n\n\n  <tr>\n    <td>HCl</td>\n    <td><a href=\"http://chempedia.com/registry_numbers/\"&gt;&lt;/a&gt;&lt;/td&gt;\n    <td>10</td>\n    <td>mL</td>\n    <td>Sigma-Aldrich</td>\n\t\n\t<td></td>\n\t<td>http://www.sigmaaldrich.com/sigma-aldrich/home.html&lt;/td&gt;\n\t&lt;td&gt;800-325-3010&lt;/td&gt;\n\t\n    <td><a href=\"/chemicals/28\">Show</a></td>\n    <td><a href=\"/chemicals/28/edit\">Edit</a></td>\n    <td><a href=\"/chemicals/28\" onclick=\"if (confirm('Are you sure?')) { var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'dQYsh4Kz2kIX92HT0Ove43rO+qdz+/y5aozZIcdMWeg='); f.appendChild(s);f.submit(); };return false;\">Destroy</a></td>\n  </tr>\n\n</table>");
} catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"chemicals\", \"<table>\\n  <tr>\\n    <th> name</th>\\n    <th>Cas</th>\\n    <th>Amount</th>\\n    <th>Units</th>\\n    <th>Vendor</th>\\n\\t<th>Vendor email</th>\\n\\t<th>Vendor website</th>\\n\\t<th>Vendor phone</th>\\n  </tr>\\n\\n\\n\\n  <tr>\\n    <td>HCl</td>\\n    <td><a href=\\\"http://chempedia.com/registry_numbers/\\\"&gt;&lt;/a&gt;&lt;/td&gt;\\n    <td>10</td>\\n    <td>mL</td>\\n    <td>Sigma-Aldrich</td>\\n\\t\\n\\t<td></td>\\n\\t<td>http://www.sigmaaldrich.com/sigma-aldrich/home.html&lt;/td&gt;\\n\\t&lt;td&gt;800-325-3010&lt;/td&gt;\\n\\t\\n    <td><a href=\\\"/chemicals/28\\\">Show</a></td>\\n    <td><a href=\\\"/chemicals/28/edit\\\">Edit</a></td>\\n    <td><a href=\\\"/chemicals/28\\\" onclick=\\\"if (confirm(\'Are you sure?\')) { var f = document.createElement(\'form\'); f.style.display = \'none\'; this.parentNode.appendChild(f); f.method = \'POST\'; f.action = this.href;var m = document.createElement(\'input\'); m.setAttribute(\'type\', \'hidden\'); m.setAttribute(\'name\', \'_method\'); m.setAttribute(\'value\', \'delete\'); f.appendChild(m);var s = document.createElement(\'input\'); s.setAttribute(\'type\', \'hidden\'); s.setAttribute(\'name\', \'authenticity_token\'); s.setAttribute(\'value\', \'dQYsh4Kz2kIX92HT0Ove43rO+qdz+/y5aozZIcdMWeg=\'); f.appendChild(s);f.submit(); };return false;\\\">Destroy</a></td>\\n  </tr>\\n\\n</table>\");'); throw e }

and when i say returns a try/catch block, that's what's being displayed on the browser.

edit:

part of the problem might be that instead of redirecting to localhost:3000/controller that I started in and pressed the delete button, i'm being redirect to localhost:3000/controller/id, where id is the id of the object i deleted. any idea what's going on here?

also, it is correctly deleting the object. it just won't go back to the right page. here is the line for the 'delete' link i'm clicking on, and the controller for 'delete'.

<td><%= link_to 'Destroy', chemical, :confirm => 'Are you sure?', :method => :delete  %></td>

and

# DELETE /chemicals/1
  # DELETE /chemicals/1.xml
  def destroy
    @chemical = Chemical.find(params[:id])
    @chemical.destroy
    @chemicals = Chemical.all
    respond_to do |format|
      #format.html { redirect_to(chemicals_url) }
      #format.xml  { head :ok }
      format.js
    end
  end

(i made chemicals with script/generate scaffold chemicals)

Answer 1

Although javascript is used to handle POST/PUT/DELETE requests, requests triggered by link_to still expect html and render the response as if it received html.

Instead you should use link_to_remote which knows to execute whatever it receives assuming it got Javascript. This will do what you're expecting it to do:

<%= link_to_remote 'Destroy', :url => {:id => chemical.id, :action => :destroy}, 
      :confirm => 'Are you sure?', :method => :delete  %></td>

P.S. The javascript returned to the browser will not be wrapped in that giant try block in production mode.