How to use a function which is in .js file in a aspx page

Question

1.80/5 (2 votes)

See more:

In my case i followed below link and now i have the js file in my solution but dont know how to use the function which is inside the js file as shown below

[^]
StackPath[^]
```

below is the Function i want to use which is in .js file

diff = function (before, after) {
    var ops;
    if (before === after) {
        return before;
    }

can anyone suggest me how to use .js file function in aspx page.

i tried this way

<script src="htmldiff.js"></script>
   <script type="text/javascript" >

       var original = document.getElementById("response1id")
       var changed = document.getElementById("response2id")
       let output = diff(original, changed)


   </script>

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick = "return diff(original,changed)" />

What I have tried:

i tried getting the html string values from .cs file and passed it in a variable but main problem here is how to pass these 2 strings in a function of .js file in a aspx page

Posted 11-Aug-21 23:53pm

riya reddy

Updated 12-Aug-21 2:16am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Asif 7969814 · Answer 1 · 2021-08-12T02:16:00

Solution 1

Hi,

you can use my way of passing multiple values to external js file

 <asp:HiddenField ID="HiddenField1" Value="2" runat="server" />
            <asp:HiddenField ID="HiddenField2" Value="2" runat="server" />
<asp:Button ID="Button3" runat="server" Text="Button" OnClientClick = "passvalue()" />

<script src="htmldiff.js"></script>

 <script type="text/javascript" >
     function passvalue()
     {
         //var original = document.getElementById("response1id");
        // var changed = document.getElementById("response2id");
         var original = document.getElementById("<%=HiddenField1.ClientID%>");
         var changed = document.getElementById("<%=HiddenField2.ClientID%>");
         let output = diff(original.value, changed.value);
         alert(output);
     }

 </script>

or you can use the more standard way of making global variable discussed in that Link1
Link2

I Hope this will help you

Posted 12-Aug-21 2:16am

Asif 7969814

Comments

riya reddy 13-Aug-21 4:49am

Can you please tell me if i have 2 variables to pass how to pass them .below is the example of passing 1 variable

protected void Page_Load(object sender, EventArgs e)
{

string variable = "test";
string someScript = "";
someScript = "yourmethod('" + variable +"');";
Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", someScript);
}

riya reddy 13-Aug-21 4:53am

I forgot to mention that i need to link a style sheet as well for that function , i have created a external css file . Can you please help me to link css file to that function

Asif 7969814 13-Aug-21 5:32am

Have you tried this
string variable1 = "test";
string variable2 = "test";
someScript = "yourmethod('" + variable1 +"', '" + variable2 +"');";
Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", someScript);

I suggest you use my Hidden Filled method.
I always applied css file to my page and I call css class in my function and apply it on HTML tag by Id Dynamically. but you say "you need to link style sheet as well for function . .... " please provide code example of what you have done.

this is example how you apply css onclick of button

 <h1 id="id1">My Heading 1<></h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'"Click Me!<</button>

riya reddy 14-Aug-21 5:10am

this is my aspx page trying to apply the style sheet when the button is clicked . my requirement is to compare 2 xml files and display differences . so i followed below link. butwhen i click the button i dont see anystyles applied .

https://ourcodeworld.com/articles/read/653/how-to-diff-html-compare-and-highlight-differences-and-generate-output-in-html-with-javascript

```

<link rel="stylesheet" type="text/css" href="StyleSheet1.css" /> $(function () {
$("#Button1").click(function ()
{
var original = document.getElementById("response1id");
var changed = document.getElementById("response2id");
let output = diff(original, changed);
document.getElementById("response2id").innerHTML = output;
})
})

```

Asif 7969814 14-Aug-21 12:04pm

Hi I think your need is to apply the skin in the asp net dynamically
Please use those Two Link to get sum Idea

https://stackoverflow.com/questions/17284109/asp-net-skin-file-dynamically-change-classes

https://www.codeproject.com/Articles/32847/ASP-NET-MVC-Dynamic-Themes

https://www.codeproject.com/Questions/1008135/How-to-apply-the-themes-dynamically-by-selecting-t

riya reddy 16-Aug-21 11:16am

Thanks Asif for helping me out !

this time i used css in below way but getting error " Uncaught ReferenceError: $ is not defined"

$(function () { // getting error here at this line
debugger;
$("#Button1").click(function()
{

$('#response2id').addClass('ins','del')
var original = document.getElementById("response1id");
var changed = document.getElementById("response2id");
let output = diff(original, changed);
document.getElementById("response2id").innerHTML = output;
})
})

Asif 7969814 18-Aug-21 3:56am

You are calling the function before the jQuery JavaScript is included. Reference jQuery first. or you are missing JQuery Reference Please Check.

Note Use this type of direct reference

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Then Function