I'm trying to add a custom javascript file so I can reference it from a razor page.
I placed this file in the wwwroot/js folder
However, the file is not available client side, and when I check the sources using developer tools in the browser I can only see site.js.
I tried setting the properties of the js file to copy always, but this has no effect.
(site.js has 'do not copy' as standard)
I'm also refreshing the browser with ctrl+R.
What am I missing?
The js site.js is added in _layout.cshtml so that
you can see it in developer tools.If you want to see 'test.js' in developer tools,you need to add
<script src="~/js/jfc/test.js"></script>
to the view which you want to use it or add it to _layout.cshtml.
result:
Update:
You can see the following code in _layout.cshtml:
#await RenderSectionAsync("Scripts", required: false)
And if you want to add js to your view,you can add it to
#section scripts{
<script>
...
</script>
}
Here is an official doc about layout.
Related
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)
Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.
Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';
I am trying to hide/show elements in a view using following code:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});
However, I am keep getting
Microsoft JScript runtime error: '$' is undefined
What might be the issue and how do I fix it?
This thread is pretty old, but I think an answer in the thread would be nice. I agree with the previous two answers - it's likely because jQuery wasn't loaded. You can load it this way (usually toward the top of the file):
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
(or whatever the current version of jQuery is).
Hope it helps.
It sounds like jQuery hasn't been loaded yet.
did you make sure download the jquery javascript file and link in to your html/aspx page before attempting to use jquery scripting?
you need to:
download the jquery code/file from:
http://jquery.com/
copy the file (jquery-1.8.3.min.js) you just downloaded somewhere into your web project directory/folder
then insert the link to this file into html/aspx page:
now try to run webpage
references:
www.youtube.com/watch?v=Bf9Gs-09uzQ
www.ajaxtutorials.com/javascript/introduction-to-jquery-learn-jquery-from-scratch-in-asp-net-4-0/
$ is defined by default when you load jquery. I would try and use jquery() to see if somehow $ is being unloaded etc. You can also load up firebug and hit the page. It should show up as a global variable/function. NOTE: You can also setup jquery to not setup the short hand "$".
since it looks like your trying to target classes and ID's - try this
$('.buttonClass #IDhere').click(function (){
$('.theDivYouWantToShowClass #IDhere').toggle();
});
This is a definite case of jQuery module not being loaded. In my case, common.js had a jQuery related script
$( document ).ready(function() {
var divSessionWarning = $("#idivWarn");
divSesWarning.load(divSesWarning.data("src"));
});
This was called in header.jsp. Swapping the sequence of loading the jQuery followed by the common.js resolved the issue.
<script language="javascript" type="text/javascript" src="/JAVASCRIPT/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/JAVASCRIPT/mod/common.js"></script>
Hope this helps.
If jQuery is called then make sure jQuery is loaded before the stylesheet as its likely that calls it
I have one MVC view page in which I show different links and I am using ThickBox to show a different page when ever one of these links is clicked. In these pages, I am using jQuery functions to do some changes, but I am not able to resolve the jquery file path on the view pages. I need to give absolute path something like "http://test.com/js/jquery.js". But is there any way to make it relative?
I also tried getting the host url and using <%=%> and <%# %> but none is working.
Any help?
Thanks
Ashwani
This is when you run the MVC app from visual studio? If so set you're MVC application's virtual path to start at "/" instead of the default that is probably your project name.
This can be done by right-clicking on the MVC project in the solution explorer > Click Properties > Click the Web tab > Type "/" (without the quotes) in the Virtual path textbox. Then use Andrew Florko's suggestion of leading it with a slash <script src="/js/jquery.js"> </script>
alt text http://img707.imageshack.us/img707/3765/virtualpath.jpg
What about trying something like:
<script src="<%=Url.Content("~/js/jquery.js")%>" type="text/javascript"></script>
Maybe you should try
<script src="/js/jquery.js" ...
instead of intellisence-generated path with ".."
<script src="../../js/jquery.js" ...
Can anyone know the link for loading jquery-ui-1.7.2.custom.min from j query site like
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>.
what are all the .js files needed for jquery tab.
You may use google api to load jquery:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
You need to make sure that you include the tabs script with your custom build. To do this go to http://jqueryui.com/download and tick the 'tabs' checkbox.
This will out put a zip file containing images, css and js files.
Next, attach the custom jQuery UI file, aswell as the jQuery file and the relevant CSS files.
Then visit http://jqueryui.com/demos/tabs/ and check out the source for that demo (click 'view source'). It'll give you the mark up needed to create the tabs.