Troubleshooting issues with RadGrid Insert/Update button Submit behavior caused by JavaScript OnClientClick event on a web

I am encountering an issue with a RadGrid Insert/Edit Form template where the Submit/Update button breaks upon adding a JavaScript call to it. The submit behavior works fine without any references to JavaScript, but as soon as I include an OnClientClick function, the button stops working as expected. Below is the ASP code for the button:

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Save" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' OnClientClick="return CheckWeight()" />

And here is the corresponding JavaScript function:

function CheckWeight() {
                var currentGoalWeightTotal = $("[id$='CurrentGoalWeightTotal']").val();
                var weightInput = $("[name$='AG_Weight']").val();

                if (parseInt(weightInput) + parseInt(currentGoalWeightTotal) > 100) {
                    alert("Please make sure that your goal weight total does not exceed 100.");
                    return false;
                }                    
            }

While the OnClientClick event does trigger, the Submit functionality of the button is disrupted, preventing data insertion or update in the RadGrid. Any assistance on resolving this issue would be greatly appreciated.

Answer №1

After some investigating, I have successfully resolved the issue. It appears that the breakage was triggered by an update to Telerik's Rad controls.

I made modifications to the ASP code as follows:

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Save" : "Update" %>' runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' OnClientClick="if (!CheckWeight()) { return false;}" UseSubmitBehavior="false" />

I also updated the JavaScript function like so:

function CheckWeight() {
                var currentGoalWeightTotal = $("[id$='CurrentGoalWeightTotal']").val();
                var weightInput = $("[name$='AG_Weight']").val();

                if (parseInt(weightInput) + parseInt(currentGoalWeightTotal) > 100) {
                    alert("Please make sure that your goal weight total does not exceed 100.");
                    return false;
                } else {
                    return true;
                }
            }

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

Creating a jQuery accordion: A step-by-step guide

I'm currently working on building a dynamic accordion using jQuery where only one element can be open at a time. When a new element is opened, the previous one should close. I've managed to make it open and hide the button when opening it, but I ...

What is the reason behind including protected methods for Random in the MSDN documentation?

Exploring the MSDN .Net Framework Class Library has been quite enlightening for me lately. Take, for instance, when delving into the documentation of the System.Random class, one comes across details about the Protected Random.Class Methods. I wonder how ...

Issue: the size of the requested entity is too large

Encountering an error message while using express: Error: request entity too large at module.exports (/Users/michaeljames/Documents/Projects/Proj/mean/node_modules/express/node_modules/connect/node_modules/raw-body/index.js:16:15) at json (/Users/ ...

Synchronous function with asynchronous call

I'm currently working on asynchronously populating my cache. static ConcurrentDictionary<string, string[]> data = new ConcurrentDictionary<string, string[]>(); public static async Task<string[]> GetStuffAsync(string key) { retu ...

AngularJS table cell binding using a common function

Currently, I am utilizing AngularJS to develop a table using ng-repeat. One of the columns looks like this: <tr ng-repeat="x in A"><td>{{calNoMonth(x)}}</td></tr> Unfortunately, during testing, I noticed that every time I make a c ...

What is the best way to implement React.memo or useMemo and ensure semantic guarantees?

According to the documentation provided for useMemo: While useMemo can improve performance, it should not be solely relied upon for semantic guarantees. React may choose to recalculate previously memoized values in the future, such as to free up memo ...

What is the process for modifying JSON attributes with JavaScript?

One JSON data set is provided below: [{ ID: '0001591', name: 'EDUARDO DE BARROS THOMÉ', class: 'EM1A', 'phone Pai': '(11) 999822922', 'email Pai': '<a href="/cdn-cgi/l/em ...

Leverage Express JS to prevent unauthorized requests from the Client Side

Exploring the functionalities of the Express router: const express = require("express"); const router = express.Router(); const DUMMY_PLACES = [ { id: "p1", title: "Empire State Building", description: "One of the most famous sky scrapers i ...

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Using HTML: <input class="m-ctrl-medium date-picker" size="16" type="text" id='lateETD1' name="dateRecv" value=""/> Not working with script: var ETD = $("#ETD"); ETD.html("<input class='m-ctrl-medium date-picker' id='la ...

An error has occurred in Angular5 and Three.js: 'Scene1' property is undefined

Running into an issue with my angular5 website integrated with Three.js. I keep getting an error message that says: Cannot read property 'Scene1' of undefined when trying to add an object to the Scene. Any suggestions on how to properly define th ...

The method is triggered multiple times

Why does calling a method in my controller result in the object.name being logged multiple times? (function(){ var app = angular.module('portfolio', ['ngRoute' ]); app.controller('ReferenceController', function(){ ...

Retrieve Gravatar image using JSON data

I am currently working on extracting data to show a user's Gravatar image. The JSON I have is as follows: . On line 34, there is 'uGava' which represents their gravatar URL. Ideally, it should be combined with / + uGava. Currently, I have ...

Guide for communicating with parent attribute directive from child component in Angular 7

I am aiming to create a custom directive that can listen for a DOM event within its scope, and handle that event. The catch is that the DOM event will be triggered in a third-party component that I do not have control over. In Angular, I have defined the ...

Should I keep my Mobx stores in a dedicated file or include them directly in the React component?

There are a couple of ways to define observable properties and actions in MobX. One way is to include them directly in the component like this: // App.js class App extends Component { @observable a = 'something' @action change() { this. ...

Transferring Data from Controller to HTML in AngularJS Version 1

Recently, I started working with angularjs on a new project that involves three main HTML files. The first file is index.html, which contains the ng-view directive. The second file is home.html, where various products are displayed from a database. Each pr ...

What is the method to target buttons using ID instead of index values?

I need advice on how to change the background-color of buttons using their IDs instead of index for better maintenance. Do you have any suggestions? Take a look at the code snippet below or run it from this jsfiddle: https://jsfiddle.net/p6kuf0zv/4/ // ...

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...

Enhance your JQuery UI autocomplete feature by including images and multiple fields for a more interactive user experience

I am looking to incorporate Autocomplete functionality that will showcase names and avatars similar to the Facebook autocomplete feature. In a recent post Jquery UI autocomplete - images IN the results overlay, not outside like the demo and in the provide ...

The browser appears to be interpreting the JavaScript file as HTML, resulting in the error message "Uncaught SyntaxError: Unexpected token '<'"

Referencing a similar unresolved question here: Browser seems to read react JS file as HTML, not JSX I am currently working on a project that is developed with Next.js, React, and Typescript. However, I am facing an issue while trying to integrate a Java ...

Tips for showcasing XML data in an ASP.Net gridview:

Hello experts! I am completely new to XML. However, a web application is gathering data in XML format and I need to display it (and allow for editing) in an ASP.Net GridView. Your assistance would be greatly appreciated. <?xml version="1.0"?> < ...