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 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.


Remy wrote:

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.


Hi Remy,


Try this out:


1) Load the jQuery library.
Note: Mobile applications do not come with jQuery like web applications.


2) Add the jQuery dependency from the Mobile Pattern.



Regards,

Benjith Sam


Benjith Sam wrote:

Remy wrote:

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.


Hi Remy,


Try this out:


1) Load the jQuery library.
Note: Mobile applications do not come with jQuery like web applications.


2) Add the jQuery dependency from the Mobile Pattern.



Regards,

Benjith Sam


Dear Benjith:


Hello, and a pleasant day.  Hope all is well.

At long last, after a long trial and error, this is the thing I've been missing.  I don't see the MobilePatterns in Manage Dependencies, but rather I see the OutSystemsUIMobile in which JQuery was unchecked.  I checked it, try this code and now it works now...

But unfortunately, a new problem arises:  When this is still not working, I have a link on each item (Client Action) that will get all the details and save it in a variable.  When this highlighting event is now working, it seems like the link is no longer working.  Now it transfers only the first record/element in a list even though I choose somewhere in the middle of the list.

Is there a workaround on this?

Image 1:  Widget tree of the list


Thank you again for the help.