locked
Javascript as separate file not working RRS feed

  • Question

  • User-1767698477 posted

    I cut my 1200+ lines of javascript which was working fine out of my aspx page and put it into a separate javascript file. I set a reference to the file

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <title>Mortgage Application | General Information</title>
    <script type="text/javascript" src="../../Scripts/JavaScript.js"></script>

    So why is that the file doesn't work. I can see as a look at the file in my vs that some things are underwrlined in green. They weren't underwlined in green when they were on my aspx page. Why are they underlined now?

    For example,

    function Getcommadecimal(amount) {
    return Number(amount).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    The word return in underlined in green.

    And here :


    function loandiscount() {
    console.log("Start the math1 function");  <---this semicolon is green
    var txtloanamt = document.getElementById('<%=txtloanamount.ClientID%>').value <-- and here the %= is highlighed green.

    Why does this happen in an exteral javascript file when it is fine in my aspx page? How do I fix this? 

    It takes about 3 whole minutes just to save the aspx page. It is 5500 lines. Was over 6800 with javascript included. The javascript is only getting bigger.

    Monday, August 3, 2020 5:43 AM

Answers

  • User753101303 posted

    I meant that <%=%> makes ASP.NET to write this value so that the id is "injected" into the JavaScript code. JavaScript itself doesn't know about this syntax. If using "view source" in your browser you'll see that that document.getElementById('<%=txtloanamount.ClientID%>') is turned into something such as document.getElementById('panel$txtloanamount') ie the final JavaScript code just includes the actual value rendered from the server side  by ASP.NET. Since you fixed this problem by passing the current control to your method which seems fine.

    Now to fix the next problem you have first to understand which problem you have. Have you tried a tool such as F12 Console in the browser to see if you have a JavaScript error. See https://www.w3schools.com/js/js_debugging.asp or https://developers.google.com/web/tools/chrome-devtools/javascript (you have the same in most if not all browsers).

    It make take some time at first but once used to this you'll see it is usually much quicker to use this kind of tools and see which problem you have to then just fix what you found rather than  trying to guess what's wrong from the code for example.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 4, 2020 8:08 AM

All replies

  • User753101303 posted

    Hi,

    '<%=txtloanamount.ClientID%>' is an ASPX rendering expression that won't work inside a standalone JavaScript file.

    So you'll likely need to change this to a parameter to your JavaScript function so that you'll be able to pass this identifier to your  JavaScript code wihtout having to render the id directly into your  js code.

    Edit: for example you'll have a function myFunction(myId) {...;document.getElementById(myId); etc...;} and then you can feed this parameter when calling the js function rather than injecting this directly into the function body.

    Monday, August 3, 2020 9:00 AM
  • User-1767698477 posted

    Hi Patrice,

    Thanks for responding.  I'm a newbie at javascript. I don't really understand your example. I went into my javascript file and removed all the script tags.  <script ..></script> and I also removed the <%= amd %>.  I referenced the javascript file with

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

    just right under the title tax in the head section.

    I started debugging the site, logged in and went to the page and it didn't work. It just created a page refresh. I would expect it to work just perfectly and it doesn't.... It works when pasted in to the .aspx with the above items included.

    You say feed the parameter. I'm using onkeyup="function()" currently to access each function. Is this were onkeyup="functionname(this) comes into play?

    Tuesday, August 4, 2020 3:47 AM
  • User-1330468790 posted

    Hi sking,

     

    First of all, you have to understand that the js scripts in .aspx is not the totally same as that in separate js file. 

    The aspx stands for Active Server Pages which is used by web server running Microsoft's ASP.NET server-side application framework. It tells the browser which elements, including text,image, javascript and other resources, to fetch from the server. In another words, .aspx is used for generating the response html.

     That's the reason why you should remove the tags <%= and %> in your case since these tags will be treated as a part of the code and run with the framework.

     

    There are two points you could try to make the js code working again.

    1. Set the break point/ console.log() inside the js function so that you could find where the codes stop.
    2. Pass the parameter like onkeyup="functionname(this)", then you will be able to track the target from this element.
    3. Assign the target element with properties/attributes. You will be able to find the target element via query.

     

    Hope this can help you.

    Best regards,

    Sean

    Tuesday, August 4, 2020 7:21 AM
  • User753101303 posted

    I meant that <%=%> makes ASP.NET to write this value so that the id is "injected" into the JavaScript code. JavaScript itself doesn't know about this syntax. If using "view source" in your browser you'll see that that document.getElementById('<%=txtloanamount.ClientID%>') is turned into something such as document.getElementById('panel$txtloanamount') ie the final JavaScript code just includes the actual value rendered from the server side  by ASP.NET. Since you fixed this problem by passing the current control to your method which seems fine.

    Now to fix the next problem you have first to understand which problem you have. Have you tried a tool such as F12 Console in the browser to see if you have a JavaScript error. See https://www.w3schools.com/js/js_debugging.asp or https://developers.google.com/web/tools/chrome-devtools/javascript (you have the same in most if not all browsers).

    It make take some time at first but once used to this you'll see it is usually much quicker to use this kind of tools and see which problem you have to then just fix what you found rather than  trying to guess what's wrong from the code for example.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 4, 2020 8:08 AM