How Can I add class using jquery form other file?

Question

Hi I have this javascript(jquery) for adding classes to my <html> and <body> tags in my view

  <script>
 $("html").addClass("new1");
 $("body").addClass("new2");
 </script>

So I want to change from view to specific js file like main.js, I create this file and copy paste my code, and I call in my view like this:

   <script src="~/Scripts/main.js"></script>

Why doesn't it work? Can anyone help me?

1)~ is te tag used for render location in .net, I'm not loading now?, I'm new in JS — Demain, Jan 28 '16 at 19:59
If the `~` is in the code client-side then the browser won't know what to do with that. Make sure ASP.NET is translating it to a proper path server-side before delivering the page to the client. — David, Jan 28 '16 at 20:00
It works, but I have want to use this js file for all my project, how can I separate this part of code form other js code?, for example, If I add another View and I call this js for another function, It change my html and body too — Demain, Jan 28 '16 at 20:10

David · Accepted Answer · 2016-01-28T20:22:22.533

2

This path doesn't mean anything to the browser:

<script src="~/Scripts/main.js"></script>

Unless the current folder literally has a sub-folder called ~, then that won't find anything. It needs to be the actual path to the file. For example:

<script src="/Scripts/main.js"></script>

or:

<script src="../Scripts/main.js"></script>

or whatever the path to that JavaScript file is from the currently loaded URL.

The JavaScript code itself doesn't do anything differently whether the script tag contains the code as content or references it from another source. It behaves the same either way.

Based on the comments below, if you're just asking how to create a function in JavaScript then that's simple. Something like this:

function addClasses() {
    $("html").addClass("new1");
    $("body").addClass("new2");
}

Then you can call that function any time you like:

addClasses();

edited Jan 28 '16 at 20:22

answered Jan 28 '16 at 20:03

David

208,112
36
198
279

It works, but I have want to use this js file for all my project, how can I separate this part of code form other js code?, for example, If I add another View and I call this js for another function, It change my html and body too – Demain Jan 28 '16 at 20:10
I have $(function () { $("html").addClass("new1"); $("body").addClass("new2"); }) – Demain Jan 28 '16 at 20:10
@Demain: You can reference this JavaScript file from any page. The code will execute the same way on any page. – David Jan 28 '16 at 20:11
Yes I know it, but I want to add more code for other views in same file and I don't want to call these first functions on my other views – Demain Jan 28 '16 at 20:13
@Demain: It's not clear what you mean. You can organize your code however you want, and invoke it whenever you want. Have you tried something that isn't working as expected? – David Jan 28 '16 at 20:15
I want to know how can I separate one function for other, for the time to call my main.js not run all scripts in my main.js – Demain Jan 28 '16 at 20:18
@Demain: So... You're asking how to create a function in JavaScript? – David Jan 28 '16 at 20:20
Yes, for this $("html").addClass("hundred"); $("body").addClass("loginbg"); and how to call in view in my html and body tag – Demain Jan 28 '16 at 20:21
@Demain: I've updated the answer with an example of creating a function. – David Jan 28 '16 at 20:22
And how can I call in my view? I try but It not work – Demain Jan 28 '16 at 20:28
1

@Demain: You'd call it from JavaScript code, just as I demonstrated at the end of the answer. In any JavaScript code block, invoke the function: `addClasses();` You can't just write the function name anywhere in the HTML and expect the browser to know what you mean. – David Jan 28 '16 at 20:30

How Can I add class using jquery form other file?

1 Answers1