Let's say I have a partial template 'render_box' which is being called dynamically based on key {widget} in multiple places -
e.g
{"widget":"box"}
{>"render_{widget}":. /}
and I want to trigger jQuery event each time this 'render_box' finishes.
can I just include SCRIPT tag in the partial? I have read that this is not good practice due to performance. any ideas?
Related
I'm trying to get the hang of the whole asset pipeline thing, and read the guide and several tutorials about them. But one thing that doesn't become quite clear is wether I should view my javascript asset files as a library or a place to put code that is actually run i.e. $(document).ready. Because by default all the javascript files are included, and it would be weird to have several $(document).ready's in there, not to mention that you don't want the $(document).ready function for every page to be run in the first place. What would be the way to go at this? Use my asset files as a library and put actual calls in my views (ugly)? Or is there a better way to do this?
I too ran into this issue. In a large project you can have somebody put code into document ready to, for example, add a click function to each li within a div with class container.
Now we could all argue that the above code would be too generic and of course may affect li tags in other parts of the application, but the bigger the project, the more likely it is that you will run into a conflict like this leading to unexpected behaviour.
I for one am uncomfortable with a whole bunch of document ready functions running for each and every page loaded. My solution is not necessarily the perfect one, but it's one that I have taken up and will share with you.
In the body tag of each page I add data elements signifying the controller and the action. I then have one document ready script that looks for a class named after the controller with the name Ready appended e.g. HomeReady. It will then call a method on this class (presuming it exists) named after the action. So in your asset coffee file you could write:
class #HomeReady
#index: ->
alert("Hello")
#show: ->
alert("Goodbye")
This allows control right down to the action level. When I came across your question I decided to package this solution into a gem as I have already used it in several projects. You can find it at: https://github.com/intrica/rails_document_ready
If you absolutely don't want a certain piece of initialization code to be run unless the current page is a specific controller/action, then you can try adding an empty element on the page with an id built from that info like "posts_index" using these two helpers:
"#{controller_name}_#{action_name}"
Then in your javascript you can wrap the code inside an if statement that checks for the existence of an element with the appropriate id.
edit: Here's an example of the js partial that I mentioned in the comments.
show.html.haml
= render 'map'
map.html.erb (I normally use haml but it's easier to write js in erb)
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
...
</script>
It's probably not as clean as it could be and it doesn't get the benefits of being part of the asset pipeline but I don't mind because it's only something that gets included on a specific page.
This question comes out making use of the HTML helpers in ASP.NET MVC and jQuery. For example, if I define an extension method like the following:
<:% Html.DatePickerFor(x => x.StartDate) %>
I would want it to make use of the jQuery DatePicker. However, this either means I need to manually add to the header the invocation of the DatePicker method (in which case there is no point to the DatePickerFor method), or clutter up the HTML with a whole bunch of script tags that are invoked upon document.ready.
One thought I had was the idea that instead of add the appropriate jQuery UI behavior to a HTML element via Javascript, you could do it via additional attributes, such as the following:
<input id="foo" css="widget-ui-datepicker" widget-alt-field="#fooalt" />
jQuery could then just looks for all elements with the right css class and collect together all the widget-* values and use them to build the "options" that is used to invoke the datepicker method in the first place.
This is the type of idea that could go directly into the widget factory. What are people's thoughts on this?
I typically have this line in my master page:
$(".datepicker").datepicker();
and then just stick the datepicker class on any textbox that I want to use it on.
but it would be a timesaver to have an extension method instead of always writing new { #class: "datepicker" }
I like it.
So in my Rails application, I'm trying to set up Javascript testing on certain views.
Right now, I'm doing this by having a conditional in each view..
<% if AppConfig['js_testing'] %>
<script>
...
</script>
<% end %>
If I have it on each page, there's a lot of code duplication. Is there a way manage everything from the application layout?
There's a few places you can put this that will help reduce duplication. The main layout is an ideal candidate. Another possibility is a helper method that's a lot easier to introduce.
You could also define a conditional javascript_tag helper method that will only introduce the JavaScript if your trigger is set. Usually this is along the lines of:
def javascript_testing_tag(content)
AppConfig['js_testing'] ? javascript_tag(content) : ''
end
Then it's a pretty straightforward exercise to wrap all your test scripts with that conditional. It will make it easier to refactor things later should the logical trigger for this behavior change.
The optimal implementation depends on what kind of scripting content you're introducing. If it's tied closely to the JavaScript that may be on a particular view, you may be stuck doing this.
An alternative is to simply tag each page and have a testing JavaScript harness that will trigger specific behavior depending on the structure of the document. For example, if there's an element div#user_list you might run testUserList().
It is then trivial to simply not include the testing JavaScript file in non-testing environments.
I've got a question regarding ASP.Net MVC.
I'm using an Ajax.ActionLink to load a PartialView.
In this partial view is a javascript function I'd like to get called.
However I can't figure out how to make this happen.
I've tried using AjaxOptions { OnSuccess="functionInPartialView" } when I set the Ajax.ActionLink but for some reason it can't see the Javascript.
EDIT: The PartialView is a mix of JavaScript and Html
I would suggest to use jQuery ($.get/$.ajax). It evaluates the $(function(){}) when you load the partial, so your scripts there fire. And I personally find jQuery easier and cleaner to use.
Add the javascript code in the view that will contain the parcialview, and next use the ajaxOptions { OnSuccess="functionInView" } when you set the Ajax.ActionLink.
If it's only javascript in your partial view, then you should be using a JavaScript Action result, as in this post
Otherwise, the issue is that ajax merely loading content into a div doesn't mean that it executes. In your ajax callback, you need to find the javascript content and eval it, so that your page is aware of the function definition.
I know that's a high level description, but I don't have any samples of doing this. If you post some of the code, maybe someone can suggest a cleaner way of doing this so that you have better access to the script.
You can try Multipartials , you can use them to update multiple views and even run scripts from partials, im not sure about the exact specifics as its been a while, but you can have a look at it and see if it can accomplish what you are looking for
what is the best way to implement some action that should be executed each time a request is made?
My aim is to export some variables layout-wide, so the layout could render some fields like "You are logged in as ${userName}, Server time is ${serverTime}".
I know I can inline code in the gsp, but there should be some better way to execute some operations on each request.
Thanks in advance.
I've just found an answer here: Accessing the model from a layout view in Grails
Filters is the way to execute some global action.
You could use layouts and SiteMesh to do that automagically, but in my project, I've stopped using that, because it also has some drawbacks (like <body onload="foobar()"> no longer working...). I propose you create a template just for this info line and render it wherever appropriate.