$ is not defined ReferenceError: $ is not defined

$ is not defined ReferenceError: $ is not defined

  

Hi I am getting the following error while using jQuery ($). 


Logger.js:374 [2018-02-26T11:28:05.817Z]: $ is not defined
ReferenceError: $ is not defined
    at https://dileepverma.outsystemscloud.com/Mockups/scripts/Mockups.Common.WorkflowSelections.mvc.js?d9ZkBuBPX2NALFu4LetZCw:483:1
    at Controller.e.safeExecuteJSNode (https://dileepverma.outsystemscloud.com/Mockups/scripts/OutSystems.js?TgkYxm38WdiNZwCb45Sl2w:9:17311)
    at Controller._onRender$Action (https://dileepverma.outsystemscloud.com/Mockups/scripts/Mockups.Common.WorkflowSelections.mvc.js?d9ZkBuBPX2NALFu4LetZCw:382:12)
    at https://dileepverma.outsystemscloud.com/Mockups/scripts/OutSystems.js?TgkYxm38WdiNZwCb45Sl2w:9:26045


Thanks

Dileep

Hi Dileep, try using jQuery instead of $. Make also sure that you have the jQuery script, that is available in the MobilePatterns module of the SilkUI Mobile Patterns application, as a required script in the web block / screen where you are trying to use jQuery.

Pedro Rodrigues wrote:

Hi Dileep, try using jQuery instead of $.

Hi Pedro,

I am using this code...

$(document).ready(function(){
    $('.listClick').click(function(evt){
        evt.stopPropagation();
        $('.listClick').removeClass('background-light-blue');
        $(this).toggleClass('background-light-blue');
    });
});


Can you please do let me know how to use jquery rather than $


Thanks

Dileep


Hi Dileep, just replace all $ occurrences by jQuery (literally jQuery :) ). I also edited my first post to let you know that you have to make sure that the jquery script has been loaded in your module before your code needs to run. Check the edited post.

Hope this works for you.  

Hi Dileep,

Don't seem to remember this happening in Web. So...

Are you trying to do JavaScript in Mobile?
In mobile, JQUery is not loaded automatically as in Web.

You should avoid using JQuery in mobile, or you will have to load it in yout application, but I don't recommend: https://success.outsystems.com/Documentation/10/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_App_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library

Cheers.

EDIT: Ooooor use the one provided in Mobile Patterns as instructed by Pedro :)

Eduardo Jauch wrote:

Hi Dileep,

Don't seem to remember this happening in Web. So...

Are you trying to do JavaScript in Mobile?
In mobile, JQUery is not loaded automatically as in Web.

You should avoid using JQuery in mobile, or you will have to load it in yout application, but I don't recommend: https://success.outsystems.com/Documentation/10/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_App_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library

Cheers.

EDIT: Ooooor use the one provided in Mobile Patterns as instructed by Pedro :)

Well, Hi Eduardo, Actually the requirement is that When I clicked any Listitem from List view , I just want to change the CSS (make it highlighted with custom CSS class) of that item only, using custom highlighted CSS.

Please do let me know how to get that done.

many thanks


Dileep.


Hi Dileep,

From the top of my head, I don't remember the code in JavaScript (instead of JQuery) to bound an event and later add remove classes from the ClassLIst property of the element, so that you CSS works.

But a fast search in google will help you with that. :)

If you want to go faster and has little knowledge in JavaScript, than I recommend using Pedro's approach (at least to see if performance is not affected anyway).

Cheers.

Pedro,

Nice solution, and a much better one! :)
Very "OutSystems". Hope someday Web will also use React, allowing this kind of solution.
(I need to dig more deeply into Mobile).

Cheers! :)

Hi Eduardo, thanks :) cheers!