How to use JQuery in Service Portal Widgets?

[User477307]

I am trying to create a simple responsive Nav Bar for Service Portal. I tried a Of-the-Shelf code available on the internet. pasted in my widget but the the JQuery part of it doesn't seem to be working. The entire functionality is broken and not working as expected.

I tried creating dependencies as well with JS include type URL and adding the CDN link in that field.

Can someone please answer this once for all I feel like lot of the FIRE-POWER for UI, which we find on the internet goes unutilized because of ServiceNow not able to work with external Libraries. 

Please let me know how solve this.

Below is the Code:

HTML

<nav>
  <div class="container">
    <ul>
      <li><a href="#">Home</a></li>
      <li> <a href="#">Categories </a>
        <ul>
          <li><a href="#">Category One</a></li>
          <li><a href="#">Category Two</a></li>
          <li><a href="#">Category Three</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.6.1.slim.js"
        integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk="
        crossorigin="anonymous"></script>
<script>
  $('nav li').hover(
    function() {
      $('ul', this).stop().slideDown(200);
    },
    function() {
      $('ul', this).stop().slideUp(200);
    }
  );
</script>

CSS

nav { background: #2ba0db; }

nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 14px;
  transition: 0.3s linear;
}

nav ul li:hover { background: #126d9b; }

nav ul li ul {
  border-bottom: 5px solid #2ba0db;
  display: none;
  position: absolute;
  width: 250px;
}

nav ul li ul li {
  border-top: 1px solid #444;
  display: block;
}
nav ul li ul li:first-child { border-top: none; }
nav ul li ul li a {
  background: #373737;
  display: block;
  padding: 10px 14px;
}
nav ul li ul li a:hover { background: #126d9b; }

CLIENT SCRIPT

//Client Script
api.controller=function() {
	/* widget controller */
	var c = this;
	$(document).ready(function(){
		responsive_menu = $('.navbar_ul');
		$('#menu-acces').on('click', function(e) {
			e.preventDefault();
			responsive_menu.slideToggle();
		});
		$(window).resize(function(){
			var obtener_ancho = $(this).width(); 
			if(obtener_ancho > 480 && responsive_menu.is(':hidden')) {
				responsive_menu.removeAttr('style');
			}
		}); 
		$('nav li').on('click', function(e) {                
			var obtener_ancho = $(window).width();
			if(obtener_ancho < 480 ) {
				responsive_menu.slideToggle(); 
			}
		});
	});
};

Widget Dependencies.

RESULTS:

Reality

Expected:

Would be great if some one can help.

Thanks.

[Mohith Devatte]

Hello @User477307 ,

Can you try these below steps ?

1)In the widget dependency that you have created remove the JS URL that you gave 

2)Copy  the JS URL and hit it in a new tab and your will get the entire JS code in that URL 

3)Go to UI scripts and create a new one by pasting all the JS code that you found in your JS URL.

4) Then come to the Widget dependency and select the source  as UI script and tag your UI script over there 

Hope this helps 

Mark my answer correct if this helps you 

Thanks

[Tuan Vu]

Hi @User477307 , jquery is already included in the service portal. You can use it by using the global variable jQuery.
For ex:

jQuery('document').ready(function() {

//do something

})

[User477307]

Hi @Tuan Vu it's not working still..

[Tuan Vu]

Can you log the jQuery variable in the client controller and take a screenshot?
console.log(jQuery);