Ajax output not rendering as it should

Rails
1

I had everything rendering properly before the ajax was introduced.
Now the javascript is being rendered out to the html page.

#Here is the list that the items are to be rendered out to

    #the controller method calling on the rjs file
    def show_tasks
    @tasks = Task.find(:all, :conditions => [“category_id = ?”,
    params[:id]])
    end

    #the _task.rhtml file

  • <%= task.name %> <%= link_to "View", :controller => "task", :action=> :show, :id => task %> <%= link_to "Edit", :controller => "task", :action=> :edit, :id => task %> <%= link_to "Delete", {:controller => "task", :action=> :delete, :id=>task}, {:confirm=>"Are you sure you want to delete this task", :method=>:post } %>

    • #and finally the element that the bad output is rendered to

    try { Element.update("task_list", "
  • \n blah blah blah\n View\n Edit\n Delete\n
    • \n"); } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('Element.update(\"task_list\", \"
  • \n blah blah blah\n View\n Edit\n Delete\n
    • \n\");'); throw e }

    Any help is appreciated

    2

    Hi Chris,

    chris wrote:

    Now the javascript is being rendered out to the html page.

    #the controller method calling on the rjs file

    What does show_tasks.rjs contain? It looks like that may be where your
    problem is.

    Best regards,
    Bill

    3

    Oops forgot about that one, here it is

    ====
    page.replace_html(“task_list”, :partial => “task”, :collection=>
    @tasks)

    It also seems that the rhtml portion containing the error, was taken
    after trying to come up with a solution, which is the reason it is
    within a div tag. It should be within a ul tag

    try { -->
      try { ...

      Thanks for the help

    4

    I do have the javascript_include_tag :defaults

    As for the link_to, that is that thing that puzzles me, since the
    links that appear are hard links to a separate page, it is the hard
    links appearing that is contained within the ajax. I really don’t
    know why the javascript is rendering out there.

    here is the main page, which has a list of categories on the left
    side, then after clicking on one of them the ajax kicks in and shows
    the related tasks on the right side

    <% unless flash[:notice].nil? %>

    <%= flash[:notice] %>
    <% end %>

    Categories

    <%= link_to "Add Category", :controller => "category", :action => :create %>
      <%= render :partial => "category", :collection => @categories %>

    Tasks

    <%= link_to "Create New Task", :controller => "task", :action => :create, :id => params[:id] unless params[:id].nil? %>
    There are no tasks for this category
      ============= Once again here is the category partial that appears on the left side =============
    • <%= category.name unless category.nil? %>
      • ============= And here is the partial that shows the task details on the right side of the screen =============
    • <%= task.name %> <%= link_to "View", :controller => "task", :action=> :show, :id => task %> <%= link_to "Edit", :controller => "task", :action=> :edit, :id => task %> <%= link_to "Delete", {:controller => "task", :action=> :delete, :id=>task}, {:confirm=>"Are you sure you want to delete this task", :method=>:post }%>

      • =============

      I have even removed the link_to items, just leaving the task name, and
      I still get all the javascript rendering out to the browser.

      Thanks for you help

      5

      Hi Chris,

      chris wrote:

      #the controller method calling on the rjs file

      What does show_tasks.rjs contain? It looks like that may be where your
      problem is.

      I should have asked you for both views, not just the .rjs. My apologies
      for
      the extra turn-around. Your rjs looks fine. What appears to be
      happening
      is that rjs is sending the correct stuff to the browser, but the browser
      is
      either expecting html rather than js and so is rendering it rather than
      executing it, or the browser doesn’t know how to execute it. For case
      1,
      check the method you’re using to invoke the show_tasks method. If it’s
      a
      link, for example, the method should be link_to_remote, not link_to.
      Your
      view needs to be using something that submits using XMLHttpRequest, not
      a
      straight POST or GET. That’s how the browser knows to expect a js
      response
      that it should execute rather than simply display. If that’s already in
      place, then check your application.rhtml or controller-specific layout
      if
      applicable. It needs to have this in the section: <%=
      javascript_include_tag :defaults %>. That includes all the prototype js
      files you need for the browser to actually execute the js it receives.

      Hope that helps,
      Bill

      6

      Hi Chris,

      chris wrote:

      I should also add that the ajax is working fine when clicking on the
      category links on the left side of the screen (no postback),

      Categories

      <%= link_to "Add Category", :controller => "category", :action => :create %>

      Not sure what you mean here. If the above is what you’re referring to,
      there is no Ajax taking place via the category links. Clicking on the
      “Add
      Category” link sends a straight Http GET to the server. The server is
      sending back html which, because it sent a request using Http, the
      browser
      is rendering correctly.

      it is just the task items on the left side of the screen
      that then render out javascript that is the problem.

      <%= render :partial => "category", :collection => @categories %>

      =============
      In both cases you’re using straight links to invoke controller methods
      which
      causes the browser to expect an html response. The difference between
      the
      situation above and this one is that in the one above you’re sending
      back
      html and in this one you’re sending back js. So…

      1. Assuming that you’re category object is getting generated by
        enumerating
        a instance variable, I think if you replace the <a…> with
        <%= link_to_remote(category.name, :url =>{:action => ‘show_tasks’, ::id
        =>
        category}) %>
        your problem will be fixed.
      2. Spend the $9.95 to pick up Cody F.'s RJS tutorial (in PDF) from
        O’Reilly. It’ll put you on the right track.

      Best regards,
      Bill

      7

      I should also add that the ajax is working fine when clicking on the
      category links on the left side of the screen (no postback), it is
      just the task items on the left side of the screen that then render
      out javascript that is the problem. The html containing the rendered
      ajax was using an addon in firefox to obtain the html contained within
      the DOM, but not actually rendered out to the page. (that is kind of a
      key point, not sure how I left it out before)

      8

      I bought the book, and as you mentioned the better way to do it was
      using the link_to_remote method. All is working now nicely.

      Thanks for the help.