Error: The term 'function' is not recognized in this Javascript runtime

There seems to be an issue with my function being undefined, even though it is clearly defined below the content of the program.


    <button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">

    @*Add*@
function CmdBranchAdd_OnClick() {
    alert('Hi');
    
    @*$('#BranchEdit').modal({
        show: true,
        backdrop: false
    });

    document.getElementById('BranchEdit-BranchCode').value = "";
    document.getElementById('BranchEdit-Branch').value = "";
    document.getElementById('BranchEdit-CompanyID').value = "";*@

}

The main body of the function has been commented out for testing purposes to see if it connects properly. However, when run and pressed, a JavaScript runtime error occurs stating that the function in the button is undefined.

Edit #1: Oops, copied the wrong line of code xD Sorry about that!

<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>

Here are the loaded scripts - originally intended for calling a modal but currently set up to just display an alert, which isn't working as expected.

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


<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript">    </script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />

Edit #2: Including the entire code block to identify any potential issues. @{ ViewBag.Title = "Branch"; }

...

Answer №1

You currently have a method named

CmdBranchAdd_OnClick

However, the element is actually referring to a function called

CmdBranchEdit_OnClick

Answer №2

relocate this line

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

to the beginning of the other JavaScript files.

Additionally, you currently have two jquery.js files included. Please select the one that best fits your application and remove the other.

<script src="~/js/jquery.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>

Answer №3

Here are a few tips for you:

Consider wrapping your function like this:

$(document).ready(function(){
      function CmdBranchAdd_OnClick() {
         alert('Hi');
      }    
});

Also, as suggested by @user86745458, remove either the jquery.js or jquery-latest.min.js reference and make sure to keep your js files at the top of all other links!

Lastly, try changing the type of your button from submit to just button.

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

Unable to apply inline styles to React Component

My Carousel component is supposed to return a collection of carousel boxes, each styled with a specific property. However, I am facing an issue where the style property is not being applied to the returning divs. How can I resolve this? I noticed that whe ...

ReactJS Antd displays a faulty design on the webpage

Currently, I am utilizing Antd for a ReactJs project, however, I have noticed an issue with the rendering of components in the layout. Below is the code snippet: import React from 'react'; export default class Test extends React.Component { ...

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

Tips for effectively transmitting and managing a JSON object within an ASP.NET MVC controller

I am currently working on a project using ASP.NET MVC 4 and I'm facing an issue with sending a JSON object to a controller that is supposed to accept it. Here is the snippet of javascript and jQuery code I am using: var jsonObject = { "PlantShip ...

Looking for a way to manipulate the items in my cart by adding, removing, increasing quantity, and adjusting prices accordingly. Created by Telmo

I am currently working on enhancing telmo sampiao's shopping cart series code by adding functionality for removing items and implementing increment/decrement buttons, all while incorporating local storage to store the data. function displayCart(){ ...

The selected element does not support the addition of setSelectionRange

I have encountered an error while trying to add the "setSelectionRange" method to an input element that I selected using "getElementById". The error message states that "property 'setselectionrange' does not exist on type 'htmlelement'" ...

ASP.net is encountering difficulty locating a specific JavaScript function

Seeking assistance to comprehend the issue, I have devoted countless hours scouring Google for a resolution. Current tools in use: ASP.NET entity framework Within a view, the following code is utilized: <button type="button" id="btnGraf ...

NodeJS has a knack for replying even before the function has completed

Struggling with a NodeJS and Express API for a school project. The getAuthUserId function is not working as expected. It decodes the JWT token to retrieve the user Id from the mongoDB server. However, when calling this function in a REST call "/user/authT ...

Embracing Asynchronous Header Management in Ember.js

I am facing an issue where I need to asynchronously insert the headers into the adapter. The token function is responsible for checking if the token has expired, refreshing it via Ajax if needed, and then returning the new token. However, it appears that ...

Even though I have the image button's ID, I am unable to successfully click on it

I am facing an issue where I can't seem to click on an image button even though I know its ID: driver.findElement(By.id("its Id")).click() Unfortunately, I cannot provide the website link as it is not a public website. However, I have pasted the HTM ...

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

Using CSS to automatically adjust the width of a child div based on its content, rather than stretching it to fill the entire

I'm currently facing an issue with my CSS. Apologies for the vague title, but I'll do my best to explain it here. My problem lies within a parent wrapper div that is centered on the page. Within this wrapper, there is another child div containing ...

Create a dynamic fbx model complete with textures and animations using three.js

I have been working on showcasing "animated 3D Models" on a webpage. These models come in the form of .obj, .mtl & .fbx files, some with textures and some without. I've managed to display .obj 3D Models on the webpage successfully (with texture and mt ...

Instructions on how to navigate back one page to determine which page initiated the action

I am looking for a solution to implement a back button that takes me back one page while caching it. Currently, I am using the following code: <a id="go-back" href="javascript:history.go(-1)" type="button" class="btn btn-danger">Back</a> Howe ...

The Tiny Scrollbar jQuery plugin experiences a malfunction when the defer attribute is added to the script tags in the javascript code

After successfully setting up the jQuery plugin, Tiny Scrollbar, I encountered an issue when I attempted to defer the loading of the necessary javascript files. Here is an example of the code snippet: <script type="text/javascript" src="https://ajax.g ...

Error: Router service provider not found in Angular 2 RC5!

Having trouble with using this.router.navigate. Here is the content of my app.module.ts file: import {NgModule, NgModuleMetadataType} from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; im ...

Storing retrieved data in React without using Redux involves using either the Context API or

When using Redux, I have a common store where fetched data is stored. For example, if I navigate away from my videos page (/videos) and then return to it, the videos are still available in the videos reducer. This allows me to show the user already loaded ...

Adding dynamically generated HTML elements and binding them to an AngularJS controller is a powerful capability that

As I dive into learning angularJS, I am facing a challenge in determining the best architecture for my project. My single page app is designed in such a way that the URL must always remain unchanged; I do not want users to navigate beyond the root route. T ...

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

I just finished deploying a MEVN stack application to heroku. While everything is functioning properly locally, I am encountering a blank page and the following errors in the console post-deployment: Uncaught SyntaxError: Unexpected token '<' ...

Using SetTimeOut in THREE JS

I'm currently working on a project for my master's degree that involves creating a space invaders game using three.js. While the project is progressing well, I've encountered a problem with my aliens (THREE.Mesh object) being able to fire r ...