disallow rowOnClick function in the datatable

I am facing an issue with a t:datatable where the rowOnClick event is being triggered. The problem arises when there is an icon in a column that, when clicked, opens a popup. This action also triggers the rowOnClick event, which I don't want. For this particular icon, I do not want the rowOnClick event to be activated.

Is there a way to override or overrule the rowOnClick event for specific columns in a datatable?

<t:dataTable rowClasses="row1,row2" id="typelist" value="#{vehicle.vehicleTypeList}" rowOnClick="selectType(#{vehicle_types.id},#{vehicle_types.reference})">

...
...
...

  <t:column id="carinformation" >
    <h:outputLink styleClass="listicons" value="#" onclick="popup=window.open('vehicle/detail.xhtml?vehicleid=#{vehicle_types.id}','vehciledetails','width=800,height=500,resizable=yes,scrollbars=yes');popup.focus();return false;" >
      <img src="images/information.gif" title="${msg.vehicle_information}"/>
    </h:outputLink>
  </t:column>   
</t:dataTable>
javascriptjsfdatatable

Answer №1

Elements in the DOM can be nested within one another, and interestingly, the parent element's event handler still functions when clicking on its child.

This phenomenon is known as event bubbling.

To prevent this from happening, you can include event.stopPropagation(); in the onclick function of your image link like so:

<h:outputLink onclick="event.stopPropagation(); popup=window.open('vehicle/detail.xhtml?vehicleid=#{vehicle_types.id}','vehciledetails','width=800,height=500,resizable=yes,scrollbars=yes');popup.focus();return false;" >
  <img src="images/information.gif" title="${msg.vehicle_information}"/>
</h:outputLink>

For more information:

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 steps should I take to retrieve a value from a Headless-UI component?

I have integrated a Listbox component from Headless-UI in my React project. The Listbox is contained within its own React component, which I then include in a settings form. How can I extract the selected value from the Listbox component and save it to th ...

javascriptreactjsnext.jsreact-stateheadless-ui

Leverage Redis to facilitate memory sharing among node.js instances in RxJS

We are currently developing a project that involves creating an event processor using RxJS. The system relies on specific rules where input is collected from various sources and output is generated based on the frequency of inputs exceeding a certain thres ...

javascriptnode.jsrxjs5

Displaying an image with a JavaScript variable is a common task in web

I have a Javascript code snippet below where the image name "samson decosta" is stored in a MySQL database. I am retrieving this image and trying to display it as a background_image in a div. document.getElementById("image_chk").style.backgroundImage="url ...

javascripthtmlmysqlcss

What is the method to activate a select event on a particular row using Google visualizations?

Currently, there is a single table where clicking on a row should simulate the same action on another GV table. The code for the listener is as follows: $(".mytable tbody tr td").click(function() { var colIndex = $(this).parent().children().index($(th ...

javascriptjquerygoogle-visualization

Removing an Element in a List Using Jquery

In my JQuery, there is a list named additionalInfo which gets populated using the function below: $('#append').on('click', function () { //validate the area first before proceeding to add information var text = $('#new-email&a ...

javascriptjqueryhtmlcss

Choose the initial offspring from a shared category and assign a specific class identifier

I am trying to figure out how to apply the "active" class to the first tab-pane within each tab-content section in my HTML code. Here is an example of what I'm working with: <div class="tab-content"> <div class='tab-pane'>< ...

javascriptjqueryhtmldom

Building a custom DSL expression parser and rule engine

In the process of developing an app, I have included a unique feature that involves embedding expressions/rules within a configuration yaml file. For instance, users will be able to reference a variable defined in the yaml file using ${variables.name == &a ...

javascriptjavapythondslrule-engine

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Do we need to handle promise resolution after sending a response to the client?

After sending the response to the client, I have a requirement to execute an asynchronous function. res.json({}); someAsyncFunction(); //this function does not require await Is it considered problematic to call this function without awaiting its promise? ...

javascriptnode.jsexpress

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

I've come across an issue with a three.js scene within an Angular custom directive in the view. At the top, there's a navigation bar for switching between views (pretty standard so far). I set up a simple scene with a cube and basic camera rotati ...

javascriptangularjsthree.jscoordinatesraycasting

Does SameSite=Lax grant permission for GET requests from third-party sources?

After exploring the MDN documentation on SameSite=Lax, I have come to understand the following: In modern browsers, cookies can be sent along with GET requests initiated by a third-party website or during top-level navigations. This is the default behav ...

javascripthttpsecuritycookiessamesite

Having trouble with a basic select tag and options not functioning properly in Chrome browser

I encountered an issue where I am unable to expand a simple select tag in Chrome. <select id="filterCategory" class=""> <option>1</option> <option>2</option> <option>3</option> <option>4</option ...

javascripthtmlcssgoogle-chrome

Tips for resolving the error "Cannot access the title property of undefined" when utilizing NextJS prerendering

I am preparing this page in advance for a specific post within my Next.js application: import Head from 'next/head'; import Link from 'next/link'; import client from '../../lib/apollo/client' import POSTS_WITH_SLUGS from &apos ...

javascriptreactjsnext.jsserver-side-rendering

Trouble installing NPM packages from Artifactory on Windows 10

Problem Description: I am utilizing Artifactory for my NPM packages. When attempting to install them on "Windows - 7", everything is functioning correctly. However, on "Windows - 10" an error is being displayed and the packages are not installing. Error M ...

javascriptreactjswindowsnpmnode-modules

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

After spending hours trying to figure this out, I've come to the realization that I am a complete beginner with little to no knowledge of what I'm doing... The issue I'm facing is related to some JavaScript code being triggered by a button ...

javascriptphp

Filling out a form within a webpage fetched through a DOMParser

Creating automation software in JavaScript using TamperMonkey. The script performs several AJAX requests that retrieve HTML to be parsed with a DOMParser. Is there a way to submit these forms without opening the newly retrieved HTML on the main page? ...

javascriptajaxdomtampermonkey

jQuery - patience is required until all elements have completely faded away

I am facing a unique challenge: I need to trigger an action after two specific elements have been faded out simultaneously. The code snippet for this task is as follows: $("#publish-left, #publish-right, #print-run").fadeOut(function(){ //do something ...

javascriptjqueryhtml

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

javascriptjquerycss

The lack of synchronization between the updated state in one function and its counterpart is causing discrepancies, resulting in the incorrect information being sent to the API

Whenever I press the following button: <Button onClick={(e) => { addToCard(item); handleprisma(); }} > add to cart </Button> This function is meant to add the item to my shopping cart: const addToCard = (item) => { co ...

javascriptreactjsnext.js