I would like to know where I need to place jQuery code written for specific controller action. For example I have two controllers Pets and Treats. Only the Index page for Treats controller needs to have an alert. Currently I have placed the jquery code in application.js and all my pages are pulling the alert.
If you do not want some script included by default, (in your own case, the script for index page for Treats), do the following:
Create a new file inside your javascript assets folder: app/assets/javascript/treats.js
put your script code inside here
Go into your application.js file and remove the //= require_tree . line.
NOTE that this will prevent any/all of your other js files from being loaded, so you will have to require all the other needed scripts individually.
Go into the view page where you want this one script called, (in your case, the Treats index.html.erb) and use a script tag to call this specific file (more accurately, the specific function inside the file).
By doing so, the script will not be available in your whole application, but will only be available where you want it, which is where you called it.
Related
So, I've created a bog-standard Blazor Server App using dotnet new blazorserver. Opened the solution in VS and run it.
Fine.
If I add a new folder, say Components and add a new Razor Component in that folder - Component1.razor - then in my index.razor page I add a using statement to point at my Components folder and the mark up to include the component itself and run the app, the index page shows, but there is no sign of my component. Further looking at the source of the rendered HTML, I see an empty element <component1></component1>
If I move my new component to the Pages folder and rerun the app, the component renders properly.
If I create a sub-folder under Pages and move my component to there and rerun the app, the component fails to render.
Am I doing something wrong? Am I expecting too much? Should I be able to have a structure that means I don't have to have every single component in a single folder?
I think you missing the point of _Imports.razor. You can put your pages anywhere they will be found by the #page "" attribute. If you want your components to be available either put a reference to their folder via the _Imports.razor or use the #namespace attribute/directive to override the namespace from folder its is in to another that is being imported. There is nothing special happening here. The template puts a using statement in for the "Shared" folder. This is why App.razor in the root folder has access to them.
Example _Imports.razor (From a project with name/default namespace of PolymorphicApi)
...
#using PolymorphicApi
#using PolymorphicApi.Shared
If you do not want to use _Imports.razor, you may not want to make all your components available. You can use #namespace in the component. This is the same as overriding the default namespace in a .cs file.
Example :
#namespace PolymorphicApi
A component using this statement could be in any subfolder and will be available as the root namespace is already imported.
As a side note: _Imports.razor can be thought of as a chunk of razor statements that will be imported into all razor components in that folder down. You do not have to use it just for namespaces. For example you can use an #inject statement. I do this to have Localization in every component by default.
I've got a problem that JS code in my partials (Rails) that is in $(document).ready() gets executed once the partial is displayed and I continue clicking through the page.
I'm using the jquery-turbolinks gem.
If I reload the page, the JS code in partials is not executed anymore (if current view does not contain the partial).
Any ideas? I'd probably have to disable the 'page:load' event that gets added from jquery-turbolinks.
Thanks!
AFAIK to execute JS code on page reload with turbolinks you need to use $(window).bind 'page:change' instead of $(document).ready
I have a cshtml file that has the following lines on top:
#{
Layout = null;
Response.ContentType = "text/javascript";
}
When referenced directly from _Layout.cshtml in a script tag, it works fine. But I am trying to add it to a bundle, I understand that Optimization recently made it possible, if that is true, can someone show me how?
So this works fine
#Html.JsInclude(jslocation + "ui.data.cshtml?"); // normal script tag
While these give an error: Illegal character when they encounter the #, apparently the file never gets executed.
bundles.Add(new ScriptBundle("~/scripts/uidata").Include(JsFolder + "ui.data.cshtml"));
#Scripts.Render("~/scripts/uidata");
i dont know what #Html.JsInclude is doing but normally asp.net MVC engine will not render views directly. instead it demands that you call an ActionMethod which then returns a view.
so even if you try loading a view using script tag with url of the view it typically shouldnt work or if you have allowed direct access to the views folder and added .cshtml mime type to files that are sent upon a request. all the contents of the file will be send which will include all the content even if it is inside #{}
also with all this there is no use of making a bundle consisting contents of your view as a bundle is a minified copy and is cached so if you want it to be cached why just not send a script file across.
you probably are trying to inject a script dynamically. in which case send across the script directly by the controller with the appropriate content-type header
I recently started using CoffeeScript in my Rails 3.2.14 app. Currently all of our javascript code is jumbled into application.js, which also acts as our manifest file. Our plan was to extract out the stuff into controller specific code so it is easier to maintain in the future. In our application_helper.rb file, we have this helper
def css_tag_id
"#{controller.controller_name}-#{controller.action_name}"
end
We use this for page specific CSS and JavaScript. So my first step was taking code related to our PostsController and putting it in a new file posts.js.coffee. I wrap all the code in posts.js.coffee with a check using the id on the body to ensure the code only runs on views rendered by the PostsController. This all gets compiled into one big application.js file and this is fine with me. This all works perfectly.
However, an AJAX submitted form on one of the pages hits an action in the PostsController which renders select_customer.js.erb. In this template, it calls a method that is now defined in posts.js.coffee, and for some reason no longer works.
Here is a small example of all the files involved:
posts.js.coffee:
jQuery ->
if $('#posts-new').length > 0
keywordsAccordion()
keywordsAccordion = ->
$('.accordion').accordion
'active': 0,
'collapsible': true
select_customer.js.erb
keywordsAccordion();
Is CoffeeScript compiling posts.js.coffee so that it is all namespaced or something? And I need to call methods defined in it differently now from other js templates?
I realize this may be terribly confusing, but will be so grateful is someone can help me out.
Each coffeescript file is namespaced so that its functions are only available within the same file. So keywordsAccordion() is only accessible within the posts.js.coffee file.
You can attach these functions to the window object instead, making them available anywhere:
window.keywordsAccordion = ->
...
I believe you can also use #keywordsAccordion = ->, which is shorthand for this.keywordsAccordion = -> (with this referring to the global scope)
I have some static JS files I would like to include in a rails controller view, unfortunately simply placing them in the appropriate view folder gets me a 404 response. Is there a way to do this?
If you want to javascript inside your view file
<script type="text/javascript">
//code goes here
</script>
OR
If you want to load JS file then need to place them in app/assets/javascripts directory.
if you have a file your-js-file.js then place it under app/assets/javascripts directory
and add the below line in your application.js
//= require your-js-file
It will be loaded automatically by Rails