Discover something !

Changed the code a little bit. Almost working. The first click does nothing, but the next ones work normal.

$(function(){
 $('div[id*=ListItem2]').on('click' , function (evt){
     evt.stopPropagation();
 if($(this).hasClass('selected')){    
                 $(".selected").removeClass('selected');
             }else{
                $(".selected").removeClass('selected');
                 $(this).addClass('selected');
            }
    });
});

It is bubbling up. How can I prevent this?

Thanks

Hi Luan,

Here's how I managed to achieve this: 

1. Put a Container in the List widged wrapping all of its contents and set its class to "listClick".
2. In the screen's "OnReady" event, add a javascript node with the following code:
   
   $(document).ready(function(){
       $('.listClick').click(function(evt){
           evt.stopPropagation();
           $('.listClick').removeClass('background');
           $(this).toggleClass('background');
       });
   });
   
   The "background" class should contain the CSS you wish to use to highlight the item. The "removeClass" statement resets all rows so that only one at a time appears selected. If you don't need that behavior, just remove that line.

Thanks for response.

But didn´t work. File attached with your example, but doesnt work.

What am I doing wrong?

You forgot to attach the file.

sorry, here it goes

well i dont know why the attach is not working.

here is a link https://www.filedropper.com/testlistclick

OKAY!

After some tries, it worked.

I change the event to OnRender, instead of OnReady. And the it worked!

My code or your code, both works.

Thanks Aurelio Santos!

Here is the link if anyone is interested: https://s000.tinyupload.com/index.php?file_id=24930675562372334381

Hi Luan,

I was playing around with this a bit more and found that both of our methods were unreliable. They'd work the first time the screen was loaded, but if I navigated to a different screen and then went back, they'd stop working. So I found a better way of doing it: create an action to handle the screen's "On Render" event and then use this code inside a JavaScript element:

$('.listClick').click(function(evt) {
    evt.stopPropagation();
    $('.listClick').removeClass('background');
    $(this).addClass('background');
});

Very nice! I have another question.

Since this script is kiiling the propagation. I´m not able to run any screen action inside a row of list, to get the Id of the row, I mean the Entity Identifier. (because the list is dynamic)

Is there a way to call an action inside this click function, but that get the Identifier of the row?

For example, I want to be able exclude a row (and from database), but only the row with the .selected CSS.

Glad I fix it.

I don´t know if it´s the best way to do it, but worked.

I needed to create another container with a CSS hidden button, which has onclick event with a client action. So doing this the event is called from javascript.

And fix the action OnRender to:

$('#listaProc').on('click', '.listClick', function(e){
        e.stopPropagation();
        $(this).parent().find('.listClick2 button[id*=botaohidden1]').click();
        $('.listClick').removeClass('selected');
        $(this).toggleClass('selected');
    });
   
    if ($('#listaProc .listClick').hasClass('selected')){
     return false;  
    } else {
        $('.listClick').first().addClass('selected');
    }

I just don´t like the IF statement in this code. Is someone knows how to implement better I would appreciate. Thanks

This is an old thread but i just came across it...

I think the solution fot this is just some pure css like this:

.list-items:active {
    background-color: #f2f2f2; /* or any color you want*/
}

For me its working in both Android and iOS

Dear all:

Hello, and a pleasant day.

This is the code I've been looking for, but unfortunately, it (still) does not work.  It complains (on my part) that: 

$ is not defined

And when I changed the dollar sign to the word jQuery, as mentioned here: https://www.outsystems.com/forums/discussion/34351/is-not-defined-referenceerror-is-not-defined/

Then it gives the same error, but this time, it is:

jQuery is not defined

May I ask your assistance on how to do this?

Thank you.