Link to home
Start Free TrialLog in
Avatar of Pete C
Pete CFlag for United States of America

asked on

checkbox behaviour with respect to activating the div that it resides in

Hi - I have question about checkbox behaviour.  The easiest way to describe it is to present an example.  If you click on a checkbox within gmail to highlight a mail item, it enables the checkbox but does not open the mail item.  In contrast, when a user clicks on the checkbox in my application (i.e. with a similar layout), it opens the record.  


Is there some css setting or something else that if the user clicks on a checkbox, it will not open/activate the underlying record/div.  i.e. do you any thoughts as to how gmail achieves the desired behavior?

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

You need to either post the data through a form (old school) or use javascript to listen for the click of that item and then perform the action you are looking for. If there is some data stored in your database, then that action would be to make an ajax call to your back end, retrieve the data and display it.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
when a user clicks on the checkbox in my application (i.e. with a similar layout), it opens the record.  
that means that the event handler that is attached to the checkbox is bubbling the event to the handler attached to the record

If you have for example

<tr onclick="openRecord()"><td><input type="checkbox" /></td><td>Title: <div hidden>Data to show when clicking the row</div></td></tr>

then clicking the checkbox will trigger the openRecord.

For us to help you we would need an example with relevant HTML, Script and CSS - for example using jsfiddle.net
Avatar of Pete C

ASKER

thanks, yes, your example is exactly the case.  I appreciate your thoughts.  I am just conceptually interested in how clicking on the checkbox can avoid triggering the openrecord, i.e. how it could alternatively be structured.

p.s. I doubt that I could post anything that would provide much insight beyond what you posted, but I understand if you don't have any general thoughts, thanks!
 it will not open/activate the underlying record/div.  
I think I originally didn't understand what you are asking and thought you were looking how to add the functionality but instead, you are looking at how to prevent the function from happening.

The checkbox on it's own will only get selected and unselected based on user input.  Doing things like hiding a div or open a modal/dialoge  and showing a record is done through Javascript and CSS.

Is the application something you have control over as far as updating the code?  If it is you want to look for the portion of javascript that is listening for the click of the checkbox and update whatever function is being called.




Avatar of Pete C

ASKER

thanks, that is not quite it.  The issue is that if someone clicks on the checkbox, it also activates the div.  e.g. when a user clicks on a checkbox in gmail, it only checks the box; whereas, if they click on any other part of the div, it opens the mail.  My question is what is gmail doing that causes the click on the checkbox to not result in the mail opening?  i.e. I am not sure how they are approaching it
It does not matter how specifically Google is doing this, what matters is how it works in your application. As I said, the checkbox on it's own does not do anything but show a checked or unchecked state https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox  and even then it just defaults to unchecked unless your code specifically has the checked flag like

  <input type="checkbox" id="abc" name="testing" checked>

Open in new window


In order to make the checkbox dynamic and update based on your own data, it either has to load as static html based on your server side code that generated the html or client side using javascript.

At a high level, Google is using javascript in the gmail app.  Their script listens for the checkbox click, and if there are one or more box's checked, you are presented with options on how to manage that mail like delete, report spam and others.  The same is true for when you click on the title of your email, the page changes to the actual email thread.

In my first comment, there is a link to some JS documentation that explains how it works.

If the application you are referring to is not in your control, then there is little you can do. If it is in your control, then it would be a matter of updating the Javascript that listens for the click/change of the checkbox and update that script.  There are going to be a seemingly infinite number of options for how you can visually make something work. For that reason, there is not a one option answer.

You can look for the id and name for the checkbox input (which could also be a div in disguise) and then search for the bit of javascript that has that id or name. More than likely it will be the id.


Hi,

The way it work in Gmail (desktop web) and the way you can do it
-add the select action on the checkbox only
-add the open / view message action to the message title only

This is easy to do using Datatables and checkbox plugin.
Avatar of Pete C

ASKER

thanks Scott, you do not seem to understand my question; I understand everything that you are saying and that is not the issue.  Please let others respond if they have any further insights, thanks
Avatar of Pete C

ASKER

thanks lenamtl, yes, that is my default solution if another one does not arise
You need 2 distinct trigger as the two does deperate action.
The checkbox do an action (select).
The link do a different action (open or display).
Check you actual JS and remove the display action triggered by the checkbox so it only keep the select action.
And create a new trigger  for the diplay action by clicking on the link
Avatar of Pete C

ASKER

thanks, yes, the issue is that I am trying assign the action to the entire row (which also happens to be consistent with gmail's approach).  If I have to divide it up, I can, although I prefer the other approach
Hi,

Gmail does not attach the event to the entire row (I have just tested) the checkbox and message title has different action attached to it. But it highlight the entire row when selecting.

There is a way using Datatables (or other Javascript) to select the entire row and attach one or many event to it.
Select single or multiple row
https://datatables.net/examples/api/select_single_row.html
https://datatables.net/examples/api/select_row.html

with the checkbox
https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

Select row JS http://jsfiddle.net/lenamtl/b0d8f6gv/
Avatar of Pete C

ASKER

We must be accessing different versions of gmail.  I can, for example, click to the left of the checkbox and it still opens the mail item.  That is okay though, thanks for the help : )
What I have in my desktop version Opera :
If I click to the left of the checkbox it select the row, if I click on the checkbok it select the message and if I click on the right (message title) it open the message. If I right click on the row item I have a menu with options.

Anyway you can attach any action to the row selection...
Have you tried to attach the events to the row?

Have you checked the example I posted?

What you can do is to create a JSFiddle with a static example of your code...
I read your question and the way i understand it is that the checkbox trigger the message opening so check the Javascript code attached to the checkbox and remove the code that call the open action.

Then add this action to the row selection.
Avatar of Pete C

ASKER

thanks, there is no javascript attached to the checkbox.  I did look at your example, thanks.   Michel best distilled the issue, and it seems as though there is not a readily apparent solution to that.  I need to move forward, but I will check back in, in case someone else comes up with a conceptual solution that address that.  Thanks again
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Pete C

ASKER

thanks Michel, it looks like you are on the right track.  I need to work through a few things over the next day or so, but I will let you know how this works out.  Thanks for your insights!
Avatar of Pete C

ASKER

Thanks again for the insights Michel, I was not able to get stop propagation working.  I instead ended up using the below approach:  

document.getElementById('$rowid').addEventListener('click', function(e){

// if the checkbox was not pressed
if (e.target.type != 'checkbox')
{
     [open the record]
}})