Issue with detecting Javascript update to asp:HiddenField on server side in Internet Explorer, while functioning properly on Chrome

Our ASP page includes a hidden field that stores a selected value for deletion from a database:

<asp:HiddenField ID="TargetField" runat="server" />

Within the same page, there is a popup with a delete button. Clicking this button "sets" the field and triggers server code:

<asp:Button ID="ButtonDelete" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%# Eval("DataBoundGuidField") %>' />

The server code programmatically sets the "OnClick" JavaScript in the appropriate DataBound handler, like so:

var btnSelectValue = CType(e.Row.FindControl("SelectValue"), Button)
btnSelectValue .Attributes.Add("onclick", String.Format("document.getElementById('{0}').value=document.getElementById('{1}').value; return true;", SourceField.ClientID, TargetField.ClientID))

The server code also has a handler for the click event:

protected void DeleteButtonClickHandler(object sender, EventArgs e) 
{
    // This line seems to be causing an issue - it always returns string.Empty in IE9 but works in Chrome
    var selectedValue = TargetField.Value
}

I am trying to figure out why this mechanism of copying the value to an element and reading it on the server works in Chrome but not in IE9... and if there is a possible fix. Thank you in advance.

UPDATE

Upon request, here are the first few lines of rendered HTML (no METAs included):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><link href="..</head>

Here are the initial lines of the ASPX markup:

<%@ Page Language="C#" MasterPageFile="~/Masters/Menu.master" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="EditScreen_Default" title="Edit Screen" %>    
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderMain" Runat="Server">    
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

And these are the values rendered as SourceField.CliendId / TargetField.ClientId in the HTML code respectively:

<input type="hidden" name="ctl00$ContentPlaceHolderMain$GridViewRows$ctl03$SourceField" id="ctl00_ContentPlaceHolderMain_GridViewRows_ctl03_SourceField" value="8aaa7a7a-7082-4a1b-8dab-c25b0d98c263" />                  
<input type="hidden" name="ctl00$ContentPlaceHolderMain$TargetField" id="ctl00_ContentPlaceHolderMain_TargetField" />

Answer №1

Consider implementing a two-button approach for better functionality.

Utilize the existing delete button to trigger JavaScript functionality:

<asp:Button ID="ButtonDelete" runat="server" Text="Delete" OnClientClick='<%# Eval("DataBoundGuidField","javascript:RunJavaScript({0});") %>' />

Introduce a secondary button that will initiate page refresh:

<asp:Button ID="HdnDeleteButton" runat="server" Text="Delete" OnClick="DeleteButtonClickHandler" Style="display: none;" />

Use JavaScript to update a hidden field and trigger server-side processing by clicking a concealed button:

function RunJavaScript(id){   
     $('#<%=TargetField.ClientID %>').value = id;

     //Invoke the hidden delete button for server-side operation
     $('#<%=HdnDeleteButton.ClientID %>').click();    
}

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

Build error occurred due to the presence of the following error: Module parse failed with an unexpected character ''' (1:0)

I am facing an issue regarding an unexpected character in a node module file. Below is the content of my next.config.js file: /** * @type {import('next').NextConfig} */ const UglifyJsPlugin = require("uglifyjs-webpack-p ...

There is no parameterless constructor specified for this object. Ensure that the controller includes a public constructor without parameters

I have encountered an issue while working on the Pro ASP.Net Book MVC3 Framework. Here is the relevant code snippet from my Product Controller: namespace NordStore.WebUI.Controllers{ public class ProductController : Controller { private IProductReposi ...

What steps can be taken to address the issue of "Failed to compile"?

import React, { useEffect } from 'react' import { Row, Col, List } from 'antd' import Axios from 'axios' import { useState } from 'react' import SideVideo from './Sections/SideVideo' import Subscribe from & ...

What exactly is the functionality of the jQuery.on() method?

I am curious about the functionality of this function and how it operates. Does it follow these steps: Identify element(s) using their selectors Assign event-handlers to them Execute a setInterval on that selector, consistently delegating and then undeleg ...

Is there a way to remove the highlight from a non-active block?

Hey friends, I need some help with my code. Currently, when I click on a table it gets highlighted, and if I click on another table, the previous one remains highlighted along with the new one I clicked on. How can I modify the code so that when I click on ...

Tips for accessing and saving content from a JSON file on your local machine into a variable

Hello all, I'm facing an issue with my script where I have a Json store in a variable. I want to save this json data in a local file to create a standalone and user-friendly website without too many components. Currently, my script looks like this: ...

What is the best method for selecting multiple images simultaneously in react-js?

I am looking to choose multiple images state = { file: null } handleFile(e) { let file = e.target.files this.setState({ file: file }) console.log('handling file:', file) } If I use an index like this, then I can only upload a sin ...

Choosing groupings of courses

I am looking to dynamically load divs with different combinations of classes from an external file using jQuery's load function, but I am struggling with grouping them correctly. $("#somediv").load("somefile.html .class1"); // loads all divs with c ...

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

Exploring ways to access iPhone contacts using HTML5 and JavaScript

How can contacts be fetched on an iPhone with user permission using HTML5 and JavaScript? I understand that an app can access that data, but can a browser do the same? ...

tips for converting a stdclass object into an array using php and javascript

To begin, I utilize a jQuery plugin called tableToJson to extract the table values as a JSON object. Next, I convert the JSON object using JSON.stringify which results in the following output: Array ( [0] => stdClass Object ( [Kode] => 4 ...

What techniques can be employed to restrict or define imported data in React through mapping?

Starting my React journey with a single-page application, I am looking to bring in a static collection of personal information like this: { id: '1', link: 'john-doe', name: 'John Doe', title: 'Head of ...

Learn how to handle JSON requests in Node.js within a router script

Hello everyone, I've been struggling to retrieve the body of a request from Postman into my scripts. The body always comes up empty. Can anyone help me figure out the correct way to do this? I have set up the server in index.js and reading the reques ...

Add 0.25 to the current value in the text box

Recently, I've encountered an issue with a form that includes a Service Time field which we're hoping to see increase by 0.25 each time the + button is clicked. The code snippet in question is as follows: <script language=javascript> ...

Is it possible to link a css file from an ascx control during registration?

Is there a specific way to register a css code block within an ascx control? Do I simply place <head id="head" runat="server"> <style type="text/css"> .customClass { background-color: Lime; } < ...

Vue's computed property utilizing typed variables

I am trying to create a computed array of type Todo[], but I keep encountering this specific error: No overload matches this call. Overload 1 of 2, '(getter: ComputedGetter<Todo[]>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T ...

Merging a DirectoryInfo path with a FileInfo path

When given an absolute path for DirectoryInfo and a relative path for FileInfo, is there a way to combine them to create an absolute path for FileInfo? Here's an example: var absoluteDir = new DirectoryInfo(@"c:\dir"); var relativeFile = new Fi ...

Bring in JavaScript files on a global scale in Vue.js 3

Hello, I am facing an issue while trying to import jQuery and THREEJS globally into my Vue.js cli project. Whenever I attempt to import them into my .vue file (like home.vue), I encounter the following error: 'import' and 'export' ma ...

What is the process for retrieving a value from a function?

I have a method in a Business Logic Layer (BLL) class that returns a boolean status, but I also need to retrieve the value of an output parameter obtained from a stored procedure. How can this be achieved? public Boolean InsertPersonalInfo() { SqlComm ...

A glitch in showcasing the hello world example in Node.js with express

I've been diving into learning node.js and I'm eager to use the express framework. However, I hit a roadblock when trying to run a simple "hello world" example from the expressjs.com website. Instead of seeing the expected output, I encountered a ...