How to make a row in a list look "selected" (mobile)

How to make a row in a list look "selected" (mobile)

  

Hi


I need to change CSS of a clicked list item. To have the effect of selection. (an alternative would be to use a dropdown, but I don´t want to)

I have the code here (https://jsfiddle.net/x144mnsp/). In this fiddle works ok, but in outsystems, I need to click twice evertytime to highlight.

In outsystems, the code of javascript is inside a javascript of a client action (onclick event in list item)


I copy the idea from https://www.outsystems.com/forums/discussion/8698/how-to-make-a-row-in-a-list-look-selected/


Any help?


Thanks


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 http://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: http://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