Rails - do AJAX update using HTML template - ruby-on-rails

Apologies if this is asked before, but I can't find it...
I've got a page with a button bar that I need to update as the state of the page changes. The button bar is rendered with a partial.
The user can update the state with various AJAX actions on the page, and I'm doing various updates to the required elements. Mostly these are simple text strings, but the button bar is a bit more complex.
I'd have thought I should be able to do some variation on:
$('.button_bar').html( '<%= render :partial => 'buttons.html.erb' %>' );
But I'd need to somehow escape the render output for use in a string. While searching I came across render_to_string, but that just gives undefined method in my application.

I am not sure if I understand right, but
$('.button_bar').html( "<%= escape_javascript(render "buttons") %>" );

Related

Displaying flash message in portion of page that is otherwise not updated

I'm looking to display my flash messages in a portion of the page that is otherwise not always in a partial that gets updated.
In other words, I may submit a form that updates a partial via ajax. But I want to display the flash message in a portion of the page that is outside of that partial.
I could have some javascript in every single necessary js.erb file to update the flash partial, but that seems crazy. Is there a more simple way of going about this?
I don't have to necessarily use flash messages either if something custom would work better.
Thanks!
You can do it the low-tech way by using a :remote call on your form that, when executed, will inject some HTML back into your page from a partial of your choosing.
It's pretty easy to do in a .rjs view:
page['flash'].html(render(:partial => 'flash'))
You can also do it in a .js.erb view using jQuery:
$('#flash').html("<%= escape_javascript(render(:partial => 'flash')) %>");
I tend to think the .js.erb method is a lot more ugly, but we all have our preferences.

Rails 3 render partial without reloading images

I have a view 'edit.html.erb' which renders a partial.
<div id="exerciseslist"><%= render 'exerciseslist' %></div>
Inside 'edit.js.erb', I have the following line which reloads the partial each time something is updated.
$('#exerciseslist').html('<%= escape_javascript(render("exerciseslist")) %>');
The partial is a table with a bunch of items including images for each one and some buttons. All that is changing in the partial is the button. If a submit is successful, the button toggles state indicating that it has been added.
It's working fine, the problem is I don't like the way the images flash as the request happens, the items are also inside a scrollable section which looses it's state each time.
Is there a good way to just load the state of the buttons without rendering the full partial? Or is there a simple way to stop the client requesting the images each time?
I have done some reading and found pjax and backbone.js, are either of them a good way or is there a simpler rails way to do this?
Thanks,
Mike
Without seeing code, it's hard to be sure, but I think it could be done with just Rails. Instead of re-rendering the exerciseslist partial on submission, you could write an AJAX request to handle submission of the new data and on success, have the callback change the button state, rather than reload the partial.

Best techniques to ajaxify Rails app?

I'm currently ajaxifying my Rails app as follows.
JS
application.js
$("a").live("click", function() {
$.getScript(this.href);
//do something
return false;
});
Views
index.js.erb
$("#core").html("<%= escape_javascript(render 'index') %>");
index.html.erb
<%= render 'index' %>
_index.html.erb
#my partial
So when a user clicks a link, it will be intercepted and the corresponding js file will be executed, which renders a partial in a div. This means that, for each action, I will need 3 views, say index.js.erb, _index.html.erb, and index.html.erb.
This is painstaking to set up, and the index.html.erb file is somewhat useless, it just renders the partial (perhaps there's a way to render a full view from another view directly, hence eliminating the need for a partial?).
Is this the best way to do things? How do you usually imbricate Ajax with Rails?
Thanks.
Javascript MVC seems like it works well with MVC style backends. It standardizes ajax calls, controllers and views in a similar way that you are showing above:
http://javascriptmvc.com/

Submit form and clear value of text field (Rails)

I have a rails form to simply post data and using ajax, reload.
format.js{ render :update do |page|
page.reload
end}
I want to also, clear the value of a textbox inside the form because right now, the textboxes just keep the same value. If they were "hello" and the other was "world", I would click submit, it would run reload, and keep the same textbox values.
EDIT I'm using the default javascripts produced by rails. Prototype.js, application.js (etc.)
Try resetting for form like so:
page[:the_form].reset
You can also update a specific text field value:
page[:foo].value = 'Hello!'
If this is an AJAX call, I suspect the right way to clear the form is in your success callback from the ajax call. If you're using ExtJS or jQuery, this should be pretty easy to do, but without letting us know which JS library you use we can't be much more explicit.

RoR- How to use div onclick to render results in a separate area of the page?

I am learning Ruby on Rails, and I am very confused on how the controller-model-view relationship works for my application.
What I have now is a table full of comments (posts) users have made. What I want to do is let users click on a comment to see more information in a separate panel (ie, other database fields that weren't initially shown, for example the user_id of the person who posted the comment).
In my _post.html.erb, I have something like:
<div class="post" id="<%= post.post_id %>" onclick = ?? >
<p>post.text</p></div>
What should go in onclick? I need a way for the onclick to call a helper/controller method which can load more information, and then put that in another div on a page (I've tried variations of using the controller and helper to call javascript which inserts html into the site, but that seems messier than it should be). From what I understand, I should create some kind of partial _postdetails.html.erb file that handles the actual displaying of the html, but I have no idea how to specific where that partial would go in the page.
Any help would be appreciated, thanks!
You can achieve what you want either by using Rails helpers or by writing the AJAX calls yourself.
Personally I manually write all my AJAX calls using jQuery.
You can also use Prototype which ships with Rails.
That being said you can do.
In your JS file :
$("div.some-class").click(function()
{
$.ajax(
{
url:"url/to/controller/action",
type:<GET>/<POST>,
data://If you wish to sent any payload
});
});
In your controller :
def some_action
#some computation
render :update do |page|
page["id_of_div_to_be_refreshed"].replace_html :partial => "some_partial"
end
end

Resources