Geek asks and answers

Pre-visualize AJAX-filled view in a dry way

Several Rails views in our application are populated through AJAX, and the first rendering of their data comes from a javascript call that fires in the jQuery event $(document.ready). The views we are interested in for this essentially show a list of tabular data (e.g., mailbox, list of search results, etc.).

We want to pre-display the first page of results without having to call AJAX, but we want to be able to re-populate the view without reloading the entire page. It's not complicated, but it seems that you need to write separate bits of code in different parts of the application that do the same thing: once in a view to draw the original data set (from the initial call render) and once more in Javascript to draw new sets data (dynamically deleting the old DOM and replacing it with new HTML).

Currently, javascript clones a hidden (c style='display: none') template element (usually div), sets the value of each field and adds a new element to the DOM. This works well, but if we want to pre-populate the view before rendering, we must write another copy of the template object in the rubyfied ERB block (for example, @messages.each do |m|). If the template is changed, then the code in the ERB block must be changed to match - not very DRY .

Is there a better way? If so, what is it?

thank

Tom

+1
source share
1 answer

In your document (done), you can explain that the first AJAX call is not bound to an event handler. Or similarly, you can explicitly activate the event handler.

:

index.html.haml()

.span12
  #book-table

DRYed part, div#book-table

_table.html.haml

%table
  %tr
    %th Title
    %th Author
  - books.each do |book|
    %tr
      %td= link_to book.title, book_path(book)
      %td= book.author

JS, . , , AJAX .

index.js.erb

$('#book-table').html('<%= escape_javascript(render(partial: "table", locals: { books: @books })) %>');

:

index.html.haml(final)

:javascript
  $(document).ready (function() {
    $.get("/books.js");
  });

.span12
  #book-table

, document.ready AJAX, .js.erb div div .html.haml

+1

More articles:


All Articles