locked
external javascript file not working in .net core 2.0 RRS feed

  • Question

  • User-973886032 posted

    Hello guys

    I have the following code which works if i insert it directly into my html page, however when i try to make an external reference it does not work

    please advsie Ehi

    When called externally, I use

    <script src="~/lib/bootstrap/dist/js/CarParts2018.js"></script>

    and when I insert into my html page, the code is

        <script>
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
    
    
        }
    </script>
    <script>
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
    </script>

    and corresponding div is

    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">Popular Searches</button>
        <button class="tablinks" onclick="openCity(event, 'Paris')">Search ALPHABETICALLY</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo')">Search by name</button>
    </div>
    
    <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>
    
    <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>
    
    <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>
    Monday, January 22, 2018 1:48 PM

Answers

  • User-973886032 posted

    I found the problem, in the f12 window in google, it complained --- Uncaught SyntaxError: Unexpected token <

    It was the script tags, removing them solved the problem

    <script></script>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 2:36 PM

All replies

  • User475983607 posted

    Your question is not clear.  I assume an external reference means another web application.  If that is the case then this code will not work as the tilde points to the relative root of the current application.  

    <script src="~/lib/bootstrap/dist/js/CarParts2018.js"></script>

    An external reference requires an absolute reference.

    Use the browser's developer tools to view the network tab and I think you should see a 404 error with the reference path.  You should be able to figure out what to do once you see the path.

    Monday, January 22, 2018 2:10 PM
  • User-973886032 posted

    when I say externally i meant to say, it was not embedded in the html rather in the wwwroot of asp.net core 2.0

    ie in the same project, in the browser developer's tool i get the error below which i dont understand

    Uncaught SyntaxError: Unexpected token <

    Monday, January 22, 2018 2:24 PM
  • User-973886032 posted

    I found the problem, in the f12 window in google, it complained --- Uncaught SyntaxError: Unexpected token <

    It was the script tags, removing them solved the problem

    <script></script>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, January 22, 2018 2:36 PM
  • User475983607 posted

    when I say externally i meant to say, it was not embedded in the html rather in the wwwroot of asp.net core 2.0

    You moved JavaScript code from a View or views and put the code in a JS file.  Now you are trying to reference the file.  

    Did you turn on the static file middleware in ASP Core?

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x

    Uncaught SyntaxError: Unexpected token <

    That is a run-time error which points to a bug in the JavaScript code.  If you are viewing the error in the console then usually you can click the error and it links you the line of code that caused the error.  Secondly, have you looked in the network tab to verify the file reference is causing a 404?

    Monday, January 22, 2018 2:37 PM
  • User-973886032 posted

    afrika

    when I say externally i meant to say, it was not embedded in the html rather in the wwwroot of asp.net core 2.0

    You moved JavaScript code from a View or views and put the code in a JS file.  Now you are trying to reference the file.  

    Did you turn on the static file middleware in ASP Core?

    https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?tabs=aspnetcore2x

    afrika

    Uncaught SyntaxError: Unexpected token <

    That is a run-time error which points to a bug in the JavaScript code.  If you are viewing the error in the console then usually you can click the error and it links you the line of code that caused the error.  Secondly, have you looked in the network tab to verify the file reference is causing a 404?

    yes I had enabled static content and solved the problem with the help of the f12 window, thank you

    Monday, January 22, 2018 2:40 PM