在html页面中组合require.js和jquery.min.js的问题

时间:2018-06-03 12:37:47

标签: javascript jquery html requirejs

我目前正在尝试学习如何建立一个网站,但我遇到了一些将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的连接有关,但如果需要,我可以追踪此文档。

我正在寻找一些关于如何解决这个问题的建议,以及我可以在哪里找到以外行人的术语解释它的信息。

0 个答案:

没有答案