LinkButton with an href value is attached to a table and triggers an onclick event

I am currently working on making the buttons in our web application more user-friendly for international users. I have successfully used a sprite image and applied CSS classes to create these buttons.

The structure of the buttons is set up as follows:

<table cellpadding="0" cellspacing="0" class="pwbtn" onmouseout="this.className='pwbtn';"
    onmouseover="this.className='pwbtnh';">
    <tr>
        <td class="a1">
        </td>
        <td class="a2" onclick="CallShowBlocker()">
            <asp:linkbutton id="ButtonNext" onclientclick="PreNavigationScript();" runat="server"
                cssclass="RemoveLinkStyle"></asp:linkbutton>
        </td>
        <td class="a3">
        </td>
        <td class="spacer">
        </td>
    </tr>
</table>

Currently, the buttons work as expected, but users have to click directly on the text to trigger the event.

I would like to bind the href value of the linkbutton to the table's onclick event so that clicking anywhere within the image will activate the button.

In addition, the href value is generated by an event handler in C# and looks like this:

"javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ContWizard2$Wizard1$cFooter$ButtonNext', '', true, '', '', false, true));"

If anything is unclear or if there are additional parts of code you require, please let me know. Thank you in advance.

c#javascriptasp.nethyperlinkhref

Answer №1

Due to my current reputation level, I will respond to you here instead of in a comment. A helpful tip would be to keep your code organized by replacing the linkbutton with an image button and setting the imageurl property to display your chosen picture or icon.

Since there is little distinction between the two types of buttons, you shouldn't need to make many adjustments.

Please inform me if this information is useful to you.

-JJ

Answer №2

If you happen to come across this and are looking for a solution.

The issue was resolved by relocating the LinkButton outside of the table. I utilized the onclick attribute of the table to create a new JavaScript function that would pass the clientID of the LinkButton.

Upon clicking the button, the ID is sent to the JavaScript function, which then triggers the action of the link by using link.click(). Check out the modified code snippet below:

<asp:linkbutton id="LinkButton1" runat="server" causesvalidation="False" cssclass="RemoveLinkStyle"></asp:linkbutton>
<table cellpadding="0" cellspacing="0" class="pwbtn" onclick="CallShowBlocker(); ExecuteLink('<%=ButtonYes.ClientID %>');"
    onmouseout="this.className='pwbtn';" onmouseover="this.className='pwbtnh';">
    <tr id="trButtonYes" runat="server" visible="false">
        <td class="a1">
        </td>
        <td class="a2" onclick="CallShowBlocker()">
            <%= this.resourceManager.GetString("yes") %>
        </td>
        <td class="a3">
        </td>
        <td class="spacer">
        </td>
    </tr>
</table>

function ExecuteLink(linkID)
{ 
    var link = document.getElementById(linkID); 
    link.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

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...

javascripthtmljquerybootstrap-4fetch

The state change in React-Redux does not trigger a re-render

I successfully developed a large react-redux application with an undo feature in one component. While the state updates properly and re-renders the component along with its children, I noticed that the component's position on the page remains unchange ...

javascriptreactjsreact-redux

I am currently transferring cross-site forgery tokens through jQuery strings. However, on the subsequent page, I create a fresh token which means their original tokens will no longer align

Alright, so I've been storing the tokens in a session: Session::get('token', 'randomtokenstringhere'); Every time a form is submitted, whether successfully or not, I generate a new token and update their session token. But let&ap ...

javascriptphpjqueryajax

Utilizing Ajax for Dynamically Filling a Dropdown Menu

My journey into the world of Ajax has led me to a state of confusion and frustration. The task at hand is to populate the first box with customer data from the database, then use the customerID to retrieve all vehicleID's using the select.php script. ...

javascriptphpjqueryajax

The JSON data sent from the primary Electron process is arriving as undefined in the renderer

Currently delving into an Electron project to explore the technology. It's been a captivating and enjoyable experience so far as I work on creating a basic home controller for my IoT devices. However, I've encountered a minor issue. In my main.js ...

javascriptnode.jsjsonaxioselectron

Display a visual progress indicator during audio recording

I am currently using the MediaRecorder functionality to capture audio and I would like to display a progress bar showing the recording process. Here is the code snippet from my recorder template: <p id="countdowntimer">Current Status: Beginning in& ...

javascriptvue.jsprogress-barmediarecorder

Check to see if the moment function has been executed and if the resulting output is accurate

I have a function called moment that formats a date received from the server in milliseconds. I am attempting to write tests using Enzyme and Jest to check if the moment function has been called (1), and whether the output of the function matches the expec ...

javascriptreactjsunit-testingjestjsenzyme

Creating a structure object in a Laravel controller for implementing Vue.js autocomplete functionality

I am currently facing an issue with my autocomplete feature not displaying options correctly. To start off, I am fetching hard coded data from my controller and passing it through an axios call: searchController.php $searchResults = [ 0 => (ob ...

javascriptphplaravelvue.js

Utilize the scrollIntoView method within a jQuery function

My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scro ...

javascriptjqueryhtmlcss

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Currently, I am faced with a common challenge. I have a database object that is a standard JS object originating from a document database, and my goal is to transmit this object to the client. However, certain fields contain sensitive information that shou ...

javascriptjsontypescriptdry

Troubleshooting problem: Unable to restrict table selections - issue with Material UI table in React

I seem to be overlooking the simple solution here. Currently, I have a ternary on my table. If the length of the selected array is greater than a certain number, a table with disabled checkboxes is rendered. I also implement a different handleClick functio ...

javascriptreactjsmaterial-ui

NodeJS CORS functionality failing to function properly in the Google Chrome browser

In my nodejs script, I have implemented CORS as shown below: var express = require('express') , cors = require('cors') , app = express(); app.use(cors()); To fetch JSON data from another domain, I am using an AJAX request. While ...

javascriptajaxnode.jsgoogle-chromecors

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Looking for a way to seamlessly integrate my chatbot UI, created using HTML and CSS, with the API.AI server using the token provided by API.AI and Python SDK? Below is the HTML code snippet for reference: <!DOCTYPE html> <html> <head> ...

javascriptpythonhtmlcssdialogflow-es

How is it possible for a local variable to be utilized outside of its original scope in code?

After obtaining a game demo from a website, I came across this particular code snippet: if(nx == food.x && ny == food.y) { var tail = {x: nx, y: ny}; score++; create_food(); } else { var tail = snake_array.pop(); tail.x = nx; ...

javascriptjquery

Utilize the MaterialUI DataGrid to showcase nested object values in a visually appealing

Hey there, fellow coders! I'm currently working on fetching data from an API and displaying it in a data grid using React.js. Here's the format of the data I'm receiving from the API: {data: Array(200)} data : (200) [{…}, {…}, {…}, { ...

javascriptreactjsmaterial-ui

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

Can DotNetOpenAuth and the LinkedIn Developer Toolkit be used to retrieve a user's complete profile?

When obtaining an access token through DotNetOpenAuth, it currently only authenticates a basic user profile. using Authorization.BeginAuthorize(); Is there a way to prompt the user to authenticate against their full profile by specifying something in the ...

c#asp.netlinkedin-apidotnetopenauth

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss

Troubleshooting deserialization problems in C# and Java

Currently, I am working on a task that involves parsing through a JSON file and extracting the titles of each record from a Yahoo API. Would appreciate any guidance or tips on how to proceed with this. Here is the snippet of code I've been using: ...

c#jsonyahoo-api

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango