Unable to load JavaScript within ASP.NET framework

I'm looking to experiment with a basic JavaScript function within an ASP.NET environment.

Movies/Index.cshtml

<!-- Including my custom local JavaScript file -->
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>

<input type="button" id="getPeople" value="Get People"/>
<ul id="people_list"/>

Views/Shared/_Layout.cshtml

<script src="~/Scripts/jquery-2.2.3.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/JavaScript.js" type="text/javascript"></script>

/Scripts/JavaScript.js

$(document).ready(function () 
{

});

$('#getPeople').click(function () 
{
    alert("getPeople");
}

Even though I click the button, the alert notification does not display. What could be causing this issue?

Answer №1

Make sure the click handler for '#getPeople' is placed within the $(document).ready function.

$(document).ready(function () 
{
    $('#getPeople').click(function () 
    {
        alert("getPeople");
    });
});

Answer №2

Ensure the following steps are taken:

  • Import jQuery before importing /Scripts/JavaScript.js
  • Add the click handler inside the document's ready event.

If unsure, check the output of your composed page using tools like Developer tools in the browser.

$(document).ready(function () {
    $('#getPeople').click(function () {
        alert("getPeople");
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to collect information from multiple AJAX requests?

In addition to synchronous AJAX calls, what is the most effective approach for handling a situation like this? var A = getDataFromServerWithAJAXCall(whatever); var B = getDataFromServerWithAJAXCallThatDependsOnPreviousData(A); var C = getMoreDataFromServe ...

Running the Npm start command encounters an error

My terminal is showing the following error message: Q:\clone\node-cloudinary-instagram\node_modules\express\lib\router\route.js:202 throw new Error(msg); Error: Route.get() requires a callback function but go ...

Explore a Variety of Albums with our Bootstrap LightBox Gallery

I'd like to incorporate this code into my gallery website, but I'm encountering a couple of issues. Firstly, when one album's slides finish, I want it to loop back to the first image. Additionally, there seems to be an intermittent problem w ...

Firebase is providing inconsistent data types in JSON responses

Our team is facing an issue while trying to fetch data from FireBase in the form of a 2D array. Despite setting everything up in the same manner, we are encountering different data types in the JSON response. Data provided: [ {"0":24, "1& ...

Encoding a multidimensional associative array into JSON using PHP

Having used php's json_encode() function frequently in the past, I am puzzled by the current issue... Note: Error checking has been omitted for clarity. //PHP <?php session_start(); require 'global/query.php'; $sql = "SELECT sfl,statio ...

The AJAX function is taking an incredibly long time to load

I'm having trouble pinpointing the performance issue with the AJAX function I've created. The purpose of this function is to scan a QR code and either add the product to the cart or open the product based on a checkbox selection. Here is the AJA ...

What is preventing me from "importing" react-dom.js?

Implementing ReactDOM into my Jest tests has been a bit of a challenge. Let's take a look at the code snippet below. const React = require('../src/js/vendor/react/build/react.js'); const ReactDOM = require('../src/js/vendor/react/build ...

Apply a specific class using JavaScript/jQuery when a user selects a specific timezone from the user interface

Currently, I am coding in HTML with the code below extracted from this website link. The listings under timezone ET are all correct as they align with the accurate dates; however, for other timezones (PT, MT, CT, AT, NT) some shows seem to be on incorrect ...

Is the sudden disconnection from Chrome after a WebSocket handshake related to a domain mismatch or is it possibly a bug in Chrome?

I created my own WebSocket server using Python, but I encountered an issue where Chrome 4.0.249.78 dev (36714) always disconnects after the handshake process. Wanting to rule out any issues with my code, I tested it using the WebSocket server from , only t ...

Struggle arising from the clash between a customized image service and the built-in image element

Dealing with a custom Angular service called Image, I realized that using this name poses a problem as it clashes with Javascript's native Image element constructor, also named Image. This conflict arises when attempting to utilize both the custom Im ...

Perform an addition operation on two numerical values within an AJAX function

Hello, I am a beginner in ajax and I am attempting to sum two numbers within an ajax function. Here is the code snippet that I am using: $("#next_btn").click(function(){ Display_Load(); var page = this.title; var subtract = 1; $("#content" ...

What are the steps to incorporate swipe functionality into my component?

I've created a carousel using React-slideshow-image, but the issue is that it doesn't support swiping on mobile devices. I would like to implement swipe functionality myself, but I'm not sure how to go about it. Can anyone provide guidance ...

Using SVG in a Vue standalone script without the need for a build step is easy with the

When I attempt to utilize Vue as a standalone script in an HTML file, my inline svg icons are rendered as solid filled squares instead of their intended shapes. This issue persists when using both Vue 2 and Vue 3 as standalone scripts. Although there are ...

Observing the state of a variable within a directive using a service from a different module

I currently have two modules named "core" and "ui". The "ui" module has a dependency on the "core" module. Below is the code for my core.js file: var core = angular.module('core', [ 'ngRoute' ]); // Services core.service('httpI ...

What is the method for selecting the "save as" option while downloading a file?

Imagine a scenario where you click on a link like this: <a href="1.txt">Download</a> After clicking the link, a save as window will appear. Is it feasible to utilize JavaScript in order to simulate button clicks within that window? Alternativ ...

The height of the div element is automatically adjusted to zero

I am dealing with a simple layout where I have a main div that floats to the left. Within this main div, I nest other divs using the clear both style. Below is a simplified version of my setup: <div id="wrapper" class="floatLeft"> <div id="ma ...

Supply a JSON parameter as a variable into the .load() function

When a button is clicked, I am attempting to load a page using the .load() method with a POST request. The URL parameters are generated and displayed as JSON formatted in the button attribute btn-url. Problem: The parameter is not being passed to the .loa ...

Refreshing a Particular JavaScript File in Electron Upon Request

Lately, I've been working on an Electron app that involves storing data in a javascript file. The data needs to be decrypted when the user logs in and displayed, then encrypted again when the user logs out. While logged in, users can add new data to t ...

Utilize Google Drive and scripts to incorporate map images into a React application

I'm currently working on setting up an album feature on my react website for a friend, and I would like the images in the album to be linked to a Google Drive so that he can easily upload new images whenever he wants. After successfully inserting the ...

Troubleshooting problems with dataTransfer and the file input type in JavaScript

Working on a project, I'm currently exploring the idea of implementing a JavaScript drag-and-drop feature. Typically, when using drag and drop, one would pass the event.dataTransfer.files to an ajax call for uploading the file to an external PHP file ...