Service Portal Dependencies

[Kourtney3]

I'm including a UI Script (jQuery) in Service Portal Dependency JS Includes and attached it to one of my widgets in the Service Portal. The script is working correctly but I'm not able to find elements by ID or class name using the following...

• $('#chat-btn').addClass('hidden');

Do I need to do something differently to find an element by ID since this is inside a Service Portal Dependency?

Thank you

[Jon Barnes]

your syntax looks right, but I can't confirm if there is an element with the id "chat-btn". Also, I believe you get Jquery for free so you shouldn't need to include it as a special dependency.

open up your developer console in your browser and run that same JS to see if it finds anything:

$('#chat-btn')

Is chat-btn the id of an element or is it a CSS class? if it is a CSS class, find it with $('.chat-btn'), if an ID, find it with $('#chat-btn')

Also, it may be possible that you are running the jquery before the angular is finished rendering. If that element is rendered dynamically, then it may not be there yet.

If that is the case, you will need to listen to an angular event to determine the dom is ready. Also, if you want to hide an element, and you have access to the widget that renders the element in the first place, you can put an ng-if on that element with some conditions to hide or show that element.

If you don't have access to the widget that renders that element, then jquery is probably a good workaround to hide it.

[Kourtney3]

Hi Jonathan,

Yes the button ID is correct in the dev console.

The UI Script included as a dependency in the widget has the following. It looks for a true or false value which is working (this is the end of the script). There is a a lot of time calculation going on before it or I would have included this directly in the widgets client script. How would I go about adding a "listener" to the widget or here to make sure the DOM is ready?

function querySupport(){
         var check = isSupportAvail(); // Is chat available (return true/false)

         if (check) {
                   // Chat is available
                   $('#chat-button').removeClass('hidden');
         } else {
                   // Chat is closed
                   $('#chat-button').addClass('hidden');
         }
}

Thank you!

[Kourtney3]

Jonathan, I did notice that if i just include the script directly in the HTML of the widget it works! However, I'm not sure that's the correct way to do it. Any suggestions would be appreciated. Thanks

[Jon Barnes]

I wouldn't drop it in the HTML section if you can avoid it. Difficult to say why you are having the issue without checking the code. I would recommend dropping some console.log() messages throughout that code to see where it is falling over when you do it as a dependency or if it is even getting to that function.

Have you used Chrome's developer tools much? You can write data to the console to check how things are progressing.