I have a page where I want to do an AJAX call and possibly render a partial every 30 seconds or so. Now, I know how to do this with jquery AJAX, doing an AJAX call and passing in the path, but it doesn't seem like the Rails way.
I say this because the result is that the main view does not show you the entire structure of the page. When you render a partial, you at least see the partial's positioning inside the document, if you render a partial via AJAX, you have to read the javascript code to know that it's there.
Is there a more unobtrusive (for lack of a better word) way to do this?
When I need to do something like this, and want the partial block to be positioned, I include a container div that I then render the AJAX call into. That was I can position the partial prior to it actually being rendered.
Related
Being relatively new to MVC I have been struggling for the past several weeks getting my layout to work.
I have managed to get myself really twisted into knots. So instead of trying to explain and unravel my mess perhaps instead someone could explain how I would accomplish the following at a high level.
_Layout this would have all the css js etc. It would also have basic structure.
Of course HTML tags not allowed in code block....each render is in a div.
#RenderPartial(Header)</div>
#RenderBody()</div>
#RenderPartial(Footer)</div>
RenderBody is Index.cshtml and it would be broken into three pieces
#
#Html.Partial(NavMenu, model)</div>
#Html.Partial(SubNavMenu, model)</div>
#Html.Partial(MainContent, model)</div>
I have this basic layout and it looks fine until you click one of the menu items.
The menu items render as:
<a class="k-link" href="/stuffroute">Stuff</a>
That route goes to a controller that returns a view and that navigates away from the above arrangement in Index.cshtml. So I end up with the header, footer, and subdash nav....
So the question is...
How do I route / orchestrate my layout to not lose the differing pieces?
Partials don't do anything for you here. You're essentially asking about how to create SPA (single page application), although in this case your application will have other pages, it's just that the index view will act like a SPA.
That requires JavaScript, specifically AJAX, to make requests to endpoints that will return HTML fragments you can use to replace portions of the DOM with. For example, clicking "Stuff 1" causes an AJAX request to be made to the URL that routes to FooController.GetSubNav([stuff identifier]). That action then would use what was passed to it to retrieve the correct sub-nav and return a partial view that renders that sub-nav. Your AJAX callback will then take this response, select a portion of the DOM (specifically the parent of the sub-nav) and insert the new HTML as its innerHTML.
If you're going to be doing a lot of this, you'll want to make use of some client-side MVC-style JavaScript library, like Angular for example. These make it trivial to wire everything up.
In a Rails 3.2 app I have a javascript function that is triggered by the presence of a DOM element with class "trigger". (this function adds UI elements).
This works perfectly, except in partials that are rendered by ajax calls.
For example in an index view, when the page is initially rendered the function is correctly called and the UI elements rendered.
If the user then filters or paginates or otherwise interacts with the index via ajax, the function is not called and the UI elements are not applied when the partial is re-rendered via the ajax call.
So, how can I make javascript aware of elements that are rendered via ajax calls?
I think you should use jQuery.on() method.
eg
$("#content").on("click", "input[type='checkbox']", function(event){
// do some stuff
});
Seems this question has been asked before, but I was not using the correct search terms.
In case anyone else stumbles across this, the answer is...
Adding $('.switch')['bootstrapSwitch'](); to the end of your some_action.js.erb file should do the trick....
And the full question is
bootstrap-switch functionality does not load when I re-render a partial with "respond_do"
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.
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.
I have a Rails controller with a form, and I want that when I post this form, a table on this page is updated via AJAX. I know a way, using partials to achieve this, but is that any way to do this without partials? And without putting code for my view inside my controller too.
Thanks
You can make a .js.erb file as the view, and from the form call the action from link_to_remote. That will translate into an ajax call to the action, that will then execute the js from the view. Inside that js.erb file you can do whatever you like. Although it will be hard to render part of the table server side if the code isn't broken out into a partial.