locked
hello world level question RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1457412228 posted

    I am trying the following, and then setting a breakpoint on the "var menuItem ... line.  Visual studio tells me that the code will never be run.

    I checked, and as best I can tell, js is being loaded, along with jquery in the _Layout page.  

    I also pasted a jquery document ready (copied it from an online school) and it also failed to execute.

    What am I doing wrong?

    <script>

        $(window).on("load", function () {
               var menuItem = document.getElementById('idPersonal');
        } 
     

    </script>

    Wednesday, March 20, 2019 4:31 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    The Razor Pages syntax is incorrect.  You must add a scripts section which places the scripts at the bottom of the page (layout).

    @section scripts {
    <script language="javascript">
        $(document).ready(function () {
				console.log("ready!");
				alert("HellO");
        });
    </script>
}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 2:53 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    talldaniel

    But the breakpoint is still not being hit.  It says "No executable code of the debuggers target type ..."

    Right, JS code runs in the browser not on the server where C# runs. 

    Use Dev tools to debug on the browser.  Anyway, see support for the browser you are using to set a breakpoint.

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 3:35 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User753101303 posted

    Hi,

    The jquery library is loaded correctly (you could use F12 Network to see if your js file loads fine) ? You don't have an error message on F12 Console in your browser?

    Wednesday, March 20, 2019 9:07 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User839733648 posted

    Hi talldaniel,

    I also pasted a jquery document ready (copied it from an online school) and it also failed to execute.

    The effect of $(window).on("load", function (){}) and document ready is similar, it is not suggested to use both of it.

    As PatriceSc has said, my suggestion is that you could use F12 developer tools to check if there is any information or error on the console tab.

    According to that, maybe you could find the key point of your issue and solve it.

    Or you could share your detailed codes and the information on the console tab so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Wednesday, March 20, 2019 9:59 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1457412228 posted

    I created a new Visual Studio Core Razor project from the templates that visual studio provides in the "New" website, and added one of the javascript commands to the index page.  It does not execute.

    I changed it to an alert so that even if the debugger was the issue, but no alert was raised.

    It appears that out of the box, Microsoft has set it so that someone has to "do something" to enable Javascript  (Besides the enable javascript debugging which I already checked.)  when creating a razor core project and what ever that something is, it is difficult to find using a search engine.

    THe error in the Chrome Javascript console is 

    "Uncaught Reference Error:  $ is not defined.

    Wednesday, March 20, 2019 2:22 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    talldaniel

    I created a new Visual Studio Core Razor project from the templates that visual studio provides in the "New" website, and added one of the javascript commands to the index page.  It does not execute.

    Can you share your code?

    talldaniel

    It appears that out of the box, Microsoft has set it so that someone has to "do something" to enable Javascript  (Besides the enable javascript debugging which I already checked.)  when creating a razor core project and what ever that something is, it is difficult to find using a search engine.

    Not true.  JavaScript is loaded into the browser when the page loads.  JavaScript has little to do with Razor Pages other than the Razor page might contain JavaScript source code and JavaScript source code references.  Keep in mind only browsers can disable JavaScript.

    Wednesday, March 20, 2019 2:34 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    THe error in the Chrome Javascript console is 

    "Uncaught Reference Error:  $ is not defined.

    The error means the code is trying to reference jQuery ($) but jQuery is not loaded.

    Wednesday, March 20, 2019 2:40 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1457412228 posted

    Here is the code for a new project.  My javascript alert is added to it.  It has the error that $ is not defined.

    thanks!

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">WebApplication1</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <partial name="_LoginPartial" />
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - WebApplication1 - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>
<script language="javascript">
        $(document).ready(function () {
            console.log("ready!");
            alert("HellO");
        }); 

</script>

    Wednesday, March 20, 2019 2:40 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    The Razor Pages syntax is incorrect.  You must add a scripts section which places the scripts at the bottom of the page (layout).

    @section scripts {
    <script language="javascript">
        $(document).ready(function () {
				console.log("ready!");
				alert("HellO");
        });
    </script>
}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 2:53 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1457412228 posted

    Thank you!  That makes the alert work.

    But the breakpoint is still not being hit.  It says "No executable code of the debuggers target type ..."

    Wednesday, March 20, 2019 3:04 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    Thank you!  

    No problem...  This highlights why sharing code that reproduces the issue is important on a forum.

    Wednesday, March 20, 2019 3:15 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    talldaniel

    But the breakpoint is still not being hit.  It says "No executable code of the debuggers target type ..."

    Right, JS code runs in the browser not on the server where C# runs. 

    Use Dev tools to debug on the browser.  Anyway, see support for the browser you are using to set a breakpoint.

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 20, 2019 3:35 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1457412228 posted

    Thanks again.

     I appreciate the help, I would have never guessed that debugging would be so primitive.

    Wednesday, March 20, 2019 4:05 PM