topic Re: Problems combining require.js and jquery.min.js in my mashup in Integration, Extension & APIs

Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Sun, 03 Jun 2018 13:35:42 GMT

Hello everyone,

I am currently trying to make a mashup with both require.js (needed by Qlik Sense) and jquery.min.js. Problem is, when I try to run it, I get an error/warning and nothing works (for example, scrollspy and smooth scrolling doesn't work). If I remove the required require.js then suddenly all my other .js files work again. Problem is, I really need/want both, because otherwise I have a nice working website without Qlik sense objects or I have a static website with only Qlik Sense objects.

Unfortunately I am quite new in the world of HTML/CSS/JS/Jquery/require.js so it's quite hard to understand some fixes people suggest. For example I found these documents:

Problem is, I don't know how to apply these solutions to my code / problem? Could any of you guru's help a noob out?

Here is all my code and the warnings/error I get in the console of google Chrome:

The error:

jquery.min.js:2 jQuery.Deferred exception: $(...).scrollspy is not a function TypeError: $(...).scrollspy is not a function at HTMLDocument.<anonymous> (http://localhost:4848/extensions/version3/navigation/navigation.js:4:13) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29375) at c (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:29677) undefined

The warning:

Uncaught TypeError: $(...).scrollspy is not a function at HTMLDocument.<anonymous> (navigation.js:4) at l (jquery.min.js:2) at c (jquery.min.js:2)

My HTML where I import everything:

<!doctype html> <html><head> <title>Try 3</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>  <script src="../../resources/assets/external/requirejs/require.js"></script> <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">  <script src="navigation/navigation.js"></script>  <link rel="stylesheet" href="version3.css"> <script src="version3.js"></script> </head>

Navigation.js (Use it for scrollspy / smooth scrolling / back to top button):

$(document).ready(function(){ // Scrollspy with animated scroll: https://www.w3schools.com/bootstrap/bootstrap_ref_js_scrollspy.asp // Add scrollspy to <body> $('body').scrollspy({target: ".navbar", offset: 75}); // Add smooth scrolling on all links inside the navbar $("#navbarSupportedContent a, .smoothScroll").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top -75// -75 to compensate for the navbar }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash -75; // -75 to compensate for the navbar }); } // End if }); // Flying in Qlikmenu based on scrollposition: // zie: http://jsfiddle.net/MkJwm/2250/ en https://www.w3schools.com/howto/howto_js_sidenav.asp // $ can vervangen worden door jQuery indien wenselijk $(window).scroll(function() { clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { if ($(this).scrollTop() > 700) { $('#qlikmenu').stop().animate({marginRight: '0px'}); } else { $('#qlikmenu').stop().animate({ marginRight: '-135px' }); }; }, 250)); }); // source: https://paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery // Check to see if the window is top if not then display button $(window).scroll(function(){ if ($(this).scrollTop() > 90) { $('.scrollToTop').fadeIn(); } else { $('.scrollToTop').fadeOut(); } }); });

Version3.js (Standard Qlik Sense mashup document):

/* * Bootstrap-based responsive mashup */ /* * Fill in host and port for Qlik engine */ var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 ); var config = { host: window.location.hostname, prefix: prefix, port: window.location.port, isSecure: window.location.protocol === "https:" }; //to avoid errors in workbench: you can remove this when you have added an app var app; require.config( { baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources" } ); require( ["js/qlik"], function ( qlik ) { var control = false; qlik.setOnError( function ( error ) { $( '#popupText' ).append( error.message + "<br>" ); if ( !control ) { control = true; $( '#popup' ).delay( 1000 ).fadeIn( 1000 ).delay( 11000 ).fadeOut( 1000 ); } } ); $( "#closePopup" ).click( function () { $( '#popup' ).hide(); } ); if ( $( 'ul#qbmlist li' ).length === 0 ) { $( '#qbmlist' ).append( "<li><a>No bookmarks available</a></li>" ); } $( "body" ).css( "overflow: hidden;" ); function AppUi ( app ) { var me = this; this.app = app; app.global.isPersonalMode( function ( reply ) { me.isPersonalMode = reply.qReturn; } ); app.getAppLayout( function ( layout ) { $( "#title" ).html( layout.qTitle ); $( "#title" ).attr( "title", "Last reload:" + layout.qLastReloadTime.replace( /T/, ' ' ).replace( /Z/, ' ' ) ); //TODO: bootstrap tooltip ?? } ); app.getList( 'SelectionObject', function ( reply ) { $( "[data-qcmd='back']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qBackCount < 1 ); $( "[data-qcmd='forward']" ).parent().toggleClass( 'disabled', reply.qSelectionObject.qForwardCount < 1 ); } ); app.getList( "BookmarkList", function ( reply ) { var str = ""; reply.qBookmarkList.qItems.forEach( function ( value ) { if ( value.qData.title ) { str += '<li><a data-id="' + value.qInfo.qId + '">' + value.qData.title + '</a></li>'; } } ); str += '<li><a data-cmd="create">Create</a></li>'; $( '#qbmlist' ).html( str ).find( 'a' ).on( 'click', function () { var id = $( this ).data( 'id' ); if ( id ) { app.bookmark.apply( id ); } else { var cmd = $( this ).data( 'cmd' ); if ( cmd === "create" ) { $( '#createBmModal' ).modal(); } } } ); } ); $( "[data-qcmd]" ).on( 'click', function () { var $element = $( this ); switch ( $element.data( 'qcmd' ) ) { //app level commands case 'clearAll': app.clearAll(); app1.clearAll(); app2.clearAll(); break; case 'back': app.back(); break; case 'forward': app.forward(); break; case 'lockAll': app.lockAll(); break; case 'unlockAll': app.unlockAll(); break; case 'createBm': var title = $( "#bmtitle" ).val(), desc = $( "#bmdesc" ).val(); app.bookmark.create( title, desc ); $( '#createBmModal' ).modal( 'hide' ); break; } } ); } //callbacks -- inserted here -- //open apps -- inserted here -- //get objects -- inserted here -- //create cubes and lists -- inserted here -- if ( app ) { new AppUi( app ); }

Would love some pointers on how to solve this problem and where I can learn more about why this doesn't work (preferably in layman terms).

Thanks in advance,

Casper

Re: Problems combining require.js and jquery.min.js in my mashup

ErikWetterberg — Mon, 04 Jun 2018 15:13:59 GMT

Hi,

The file called requirejs in a Qlik installation actually contains jQuery. Why do you need to load jQuery separately too?

Erik Wetterberg

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Tue, 05 Jun 2018 18:12:40 GMT

Hi Erik,

I tried using only requirejs, but then my scrollspy doesn't work anymore. After a lot of testing I figured out that the problem wasn't in only the conflicting requirejs and jQuery, but the combination of scrollspy and requirejs and jQuery.

The current solution is:
- move my scrollspy line from my navigation.js to the html itself;
- use both requirejs and jQuery.

If I find a more satisfactory solution I'll update this post.

Re: Problems combining require.js and jquery.min.js in my mashup

Francis_Kabinoff — Tue, 05 Jun 2018 18:20:59 GMT

So you have a confluence of problems you're going to run into here. First is that when you load scrollspy as a jquery plugin on a jquery instance you load to window before the qlik require.js file loads it's version of jquery, it won't be available since the qlik require.js file version of jquery is going to overwrite your version of jquery. you can either load scrollspy using require.js and onto the jquery instance loaded by the require file, or you can save the jquery version you load with scrollspy as something other than jquery or $ before the require file overwrites it.

Second, capability api css sets html and body height to 100%, and scrolls on the body. This stops things like scrollspy from working correctly since window.scrollY is always 0. You can try to fight this, but you may end up with the tooltips to your embedded Qlik Sense charts "floating" away as you scroll down the page.

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Tue, 05 Jun 2018 18:34:21 GMT

Hi Francis,

Weirdly enough, I thought the same as you, but it somehow all works without any problems. I am not quite sure how and I don't think this solution is ideal. I'll try to figure out why/how and I will work towards a better solution, because I prefer to understand what is happening.

About your second point, also correct, but I corrected that with some css and now I can use scrollspy and the tooltips still works like you would expect. (Took me a long time to come to this point, with lots and lots of trial and error ).

I'll let you know when I have a more elegant solution.

Casper

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 06:23:22 GMT

Hello cpomeren003‌ !

I'm having the same issue like you did you manage to find another solution to your issue ?

would be great if you can share

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Fri, 17 Aug 2018 06:42:52 GMT

Unfortunately no, the current solution is still:

- move my scrollspy line from my navigation.js to the html itself;

- use both requirejs and jQuery.

This works without any problems/errors.

Do you also still need help with this: having trouble to embbed chart in my mashup ? If so I can probably help you out.

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 07:23:37 GMT

Actually i'm not using scrollspy, only smooth-scroll

but I'm using other libraries and have a js file per library

So I don't know how to use your solution

But the issue is the same when require.js line is active , the scroll (with a bouncing arrow) and the collapse navbar is not working anymore

And when it's unactive I cannot see my embbeded qliksense charts ...

For my question in the other topic I think it's related to this issue with the js files

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Fri, 17 Aug 2018 07:28:06 GMT

Could you maybe upload your mashup? So I could take a look into fixing both problems.

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 07:30:15 GMT

May I sent a PM ?

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Fri, 17 Aug 2018 07:31:00 GMT

Yes, that's no problem. You can also delete any identifying information if you want.

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 07:37:52 GMT

I cannot send you a PM as we are not connected (can you please follow - and then unfollow if you want ?)

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Fri, 17 Aug 2018 07:38:53 GMT

Done

Re: Problems combining require.js and jquery.min.js in my mashup

ErikWetterberg — Fri, 17 Aug 2018 07:39:02 GMT

Hi,

And where is your reference to qlik requirejs file (which actually contains requirejs, jquery and more)? Best chance to get it to work is to put this first.

Erik Wetterberg

https://extendingqlik.upper88.com/

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 08:00:02 GMT

Hello Erik,

the require.js line is in the head tag of my html page

all the script tags are in the end of the body tag

Re: Problems combining require.js and jquery.min.js in my mashup

ErikWetterberg — Fri, 17 Aug 2018 08:11:33 GMT

this might be more a CSS than a js problem. Do you get any errors in the console? If not, your javascript is probably OK, but the CSS stops scrollspy from working as described by Francis in the second part of his reply.

Try disabling the CSS rules Francis mentions, but be aware that there might be side effects.

Erik Wetterberg

https://extendingqlik.upper88.com/

Re: Problems combining require.js and jquery.min.js in my mashup

s_achraphe — Fri, 17 Aug 2018 08:15:23 GMT

I get an error only when I comment the require.js line

And all my css links are in the head tag but may be there is an order to respect ?

I know that for js files the order matters but didn't bought that it could be the same for the css files

Re: Problems combining require.js and jquery.min.js in my mashup

cpomeren003 — Fri, 17 Aug 2018 12:10:12 GMT

Hi Erik,

Me and Achraphe managed to fix it by putting the require.js at the end and replacing one of the css. I am not quite sure why the require.js needs to be on the end, but it was what worked for me and also worked in this case. I think it should work as long as the require.js is after the jquery.js.

Have a nice weekend!

Casper