0

I have had some trouble finding a solution to this. Basically, I have an embedded ruby each loop whose body is a partial being rendered for a certain sub group of a model. For instance:

<li id="thing">
  <% items.each do |i| %>
    <%= render :partial => 'item', :locals => {:i => i} %>
  <% end %>
</li>

I was wondering if there was a way with jQuery, AJAX, or even just rails (I'm sure that each one has a implementable solution for me, and I'm interested in all of them) to refresh that list of items. The reason I would want to be able to do this is, currently, I have implemented the functionality to allow a now 'item' to be created or an existing 'item' be updated, again, without having to reload the page (the form comes up in a certain container on a button click in both cases), and I would like upon submission for the list to automatically be updated with the new information or new 'item.' Would it be a better approach to try and refresh the entire list? Or is there a way to append the newly created/updated object to the list of partials (as a partial) clientside?

I tried the following statement, but I can't seem to avoid getting the "undefined method" error on render.

$("#activeTab").append("<%= escape_javascript(render :partial => 'item', :locals => {:i => Item.order(:created_at).last}) %>");

I figured this would be a good solution because once the page was navigated away and came back to, the list would be loaded again. This is just to append to the static list while you are still on the page.

Jake Smith
  • 2,332
  • 1
  • 30
  • 68
  • Can you include roughly what HTML that ruby code would result in? Also, is that list, the form and the form processing logic all on the same page? – Peter Herdenborg Mar 23 '13 at 02:27
  • This view has a list of objects that are associated with the model that this view is for, so I'm grabbing this item partial from another model. The partial includes an uploaded photo or video, some metrics, etc. So nothing TOO complicated. The form, when the appropriate button is clicked, replaces the container holding the list temporarily, and upon submission, shows the list again. I just use jQuery .show() and .hide() methods in the click event handlers. The form is a rails form, so I use the syntax form_for ... Does that give a better idea? Thanks for taking the time :) – Jake Smith Mar 23 '13 at 02:34
  • I'm sorry, but it's 3:45 am here so that is still not enough info for my brain to be able to picture the situation fully. As far as I can see, we have an html page in a browser and a server capable of spitting out html and reacting to ajax requests. Sorry, maybe I somehow know too little (nothing really) about Ruby to be of any help. – Peter Herdenborg Mar 23 '13 at 02:46
  • No worries, thanks already Peter! I just know that embedded ruby in html pages gets evaluated before the page fully loads, and that another request is probably needed. I was just hoping that I could access the newly created object by appending another render statement like: `$("#activeTab").append("<%= escape_javascript(render :partial => 'item', :locals => {:i => Item.order(:created_at).last}) %>");` instead because I am not very familiar with AJAX quite yet. – Jake Smith Mar 23 '13 at 03:05

1 Answers1

0

grab whatever you are using to submit this new item ( I called it submit_button) and use jquery to reload the page.

$('#submit_button').click(function() {

          location.reload();

});

add to form_for :remote => true

mano26
  • 173
  • 1
  • 11
  • Would I reload the div immediately wrapped around the each loop? – Jake Smith Mar 23 '13 at 20:14
  • My last comment was poorly worded: would I do something like: `$(#thing).reload();`? – Jake Smith Mar 23 '13 at 22:50
  • Hey so with this approach there is an uncaught TypeError. It says the object does not have a method reload. What documentation should I be looking at for the method reload()? – Jake Smith Mar 24 '13 at 17:52
  • the error specifically says the following: `Uncaught TypeError: Object [object Object] has no method 'reload'`. The code I used was `$("#list").reload()`. Is this reload() method supposed to reevaluate the embedded ruby each loop with a call to the server? I ask because I know that embedded ruby is computed server side. – Jake Smith Mar 24 '13 at 21:25
  • $('#submit_button').click(function() { location.reload(); }); the location.reload part is going to reload the page after the click up top so if you have a submit button, on the click of that button you do the location.reload() so you need to grab your form in the first part – mano26 Mar 25 '13 at 20:00
  • After using `location.reload()`, I verified that the page did reload, however, the object was no longer being created! Here is the method: `$(".new_browser_tab").on('click', function (e) { e.preventDefault(); $(this).closest('form').attr('target', '_blank').submit(); $("#thingsSelecter").removeClass("active"); $("#thingsTab").show(); $("#newThingFormTab").hide(); $(this).closest(".normal_or_edit").children(".normal_thing").show(); $(this).closest(".edit_thing").hide(); $("#thingsSelecter").addClass("active");location.reload(); });` – Jake Smith Mar 25 '13 at 22:18
  • please refer to [this SO question](http://stackoverflow.com/questions/15755035/how-do-i-update-a-list-of-partials-rendered-with-a-collection-after-a-form-submi) to get additional info on this. I have been able to update the list of partials after the creation of the new object. – Jake Smith Apr 04 '13 at 18:55