我目前正在尝试学习如何建立一个网站,但我遇到了一些将require.js和jquery.min.js结合起来的问题。我发现同时使用require.js和jquery.min.js会导致这些问题,因为当我删除一个时,另一个工作,反之亦然。
我也试过谷歌搜索如何解决这个问题,但我似乎无法弄明白,因为我不太懂我应该做什么,因为我不熟悉js / require。 js和jquery(我是一个没有背景的总菜鸟。)
我找到了以下内容(但我并不真正了解从哪里开始,所以一些指示会很棒):
我会发布所有相关代码以及运行当前代码时遇到的错误/警告(包括requirejs和jquery)。我的描述如下:当我使用它们时,似乎只有requirejs部分有效,而其他一切都没有。我的导航/滚动等都停止工作。
错误:
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
我得到的警告:
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)
我导入所有内容的HTML:
<!doctype html>
<html><head>
<title>Try 3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Qlik -->
<script src="../../resources/assets/external/requirejs/require.js"></script>
<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
<!-- Navigation / Scrollspy / Back to top -->
<script src="navigation/navigation.js"></script>
<!-- Remaining -->
<link rel="stylesheet" href="version3.css">
<script src="version3.js"></script>
</head>
Navigation.js(用于滚动/平滑滚动/返回顶部按钮)
$(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(用它来连接Qlik sense,一个数据可视化程序)
/*
* 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 );
}
关于require.js,这是一个我无法编辑/替换的文档等。因为如果我连接到Qlik Sense就停止工作了。我不认为此问题与Qlik Sense的连接有关,但如果需要,我可以追踪此文档。
我正在寻找一些关于如何解决这个问题的建议,以及我可以在哪里找到以外行人的术语解释它的信息。