Rails preventing ajax view duplication
You could theoretically overload the show action to only return the partial if request.xhr?. So if it's an ajax request, only render that button partial. But that's inelegant.

Alternatively, you can simply keep the default show action, send the entire page back, and just pluck out the button element (similar to how Turbolinks work). It'll keep the controller RESTful and keep the update-magic in the JS only. The trade-off is that you'll be rendering stuff that you won't actually use for anything. However, you can avoid some of it by disabling layout rendering for XHR requests (which is somewhat less kludgy than just rendering a partial; at least you're still rendering the show template).

However, having the publish button's state just defined by its color doesn't sounds like a very clear UI to me. Does a (presumably) green button mean "not published; clicking will publish" or "already published; clicking will unpublish"? I'd much prefer the button actually having a verb on it like "Publish" or "Unpublish" (or whatever you'd call it), so it's clear what the button will do.

Regardless, using the btn-sucess class gives you the desired look, but it's semantically meaningless. The class name doesn't really describe the current state or the action the button will take.

Picking the "re-render the show template"-option above will give you a chance to re-render the entire post with a published class. Then you can have a CSS rule like:

#post.published #publish-button {
  // set color etc.
}


Not as simple as using the generic btn-success class, but to me it makes more sense to track the state for the post as a whole, rather than a single button.

I imagine something like this for the view

&lt;article id="post_123" data-url="..." class="&lt;%= 'published' if @article.published? %&gt;"&gt;
  &lt;div id="editor"&gt;...&lt;/div&gt;
  &lt;a id="publish-button" href="#" class="..."&gt;
    ...
  &lt;/a&gt;
&lt;/article&gt;


That'll mean that the element with the update URL is the same element that should be replaced by whatever is being sent back from the ajax-request. The JS only really needs to know that rule: Update the element with the data-url attribute. It doesn't need to know the specifics of re-styling individual elements.

Even if you don't go that route, toggling a published class in both view and JS is at least more readable/straight-forward that toggling a semantically unrelated class like btn-success.