最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】将音频播放器bootstrap3_player整合到bootstrap4中出错:tooltip.js Uncaught TypeError No method named fixTitle

JS crifan 351浏览 0评论
折腾:
【已解决】Bootstrap+jquery中添加好看好用的音频播放器
期间,想要把:
iainhouston/bootstrap3_player: An HTML5 Audio Player Skin For Twitter Bootstrap 3
合并进当前的bootstrap4+jquery的html项目中。
已经看到人家说了,最好是bootstrap3,但是还是希望可以在我的bootstrap4中可以正常运行。
结果代码:
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css
" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <!-- <link rel="stylesheet" href="css/highlightjs_default.css"> -->
  <link rel="stylesheet" href="css/highlight_atom-one-dark.css">
  <!-- <link rel="stylesheet" href="css/highlight_monokai-sublime.css"> -->
  <link rel="stylesheet" href="css/bootstrap3_player.css">
  <link rel="stylesheet" href="css/main.css">

</head>
<div class="row col-md-8 col-md-offset-2 col-xs-12">
  <audio controls
    data-info-att="Audio: Iain Houston and Felix Gibbons."
    <source src="


" type="audio/ogg" />
    <source src="

" type="audio/mpeg" />
    <a href="

">BeBopAliens</a>
    An html5-capable browser is required to play this audio.
  </audio>
</div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- <script src="
https://code.jquery.com/jquery-3.3.1.slim.min.js
" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/highlight.js"></script>
    <script src="js/bootstrap3_player.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
出错:
tooltip.js:699 Uncaught TypeError: No method named "fixTitle"
    at HTMLButtonElement.<anonymous> (tooltip.js:699)
    at Function.each (jquery-3.3.1.js:354)
    at jQuery.fn.init.each (jquery-3.3.1.js:189)
    at jQuery.fn.init._jQueryInterface [as tooltip] (tooltip.js:684)
    at HTMLAudioElement.time.showtime (bootstrap3_player.js:222)
    at HTMLAudioElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLAudioElement.elemData.handle (jquery-3.3.1.js:4991)
(anonymous) @ tooltip.js:699
each @ jquery-3.3.1.js:354
each @ jquery-3.3.1.js:189
_jQueryInterface @ tooltip.js:684
time.showtime @ bootstrap3_player.js:222
dispatch @ jquery-3.3.1.js:5183
elemData.handle @ jquery-3.3.1.js:4991
tooltip.js:699 Uncaught TypeError: No method named “fixTitle”
jquery tooltip.js  Uncaught TypeError  No method named  fixTitle
jquery  Uncaught TypeError  No method named  fixTitle
Uncaught TypeError  No method named  fixTitle
Bootstrap tool tips not supported · Issue #233 · aurelia/templating
jQuery Tooltip script error TypeError: JQuery(…).tooltip is not a function · Issue #4719 · joomla/joomla-cms
Bootstrap: Uncaught TypeError: Object [object Object] has no method ‘popover’ – Stack Overflow
javascript – uncaught typeerror object has no method “tooltip” – Stack Overflow
去包含jquery-ui.js看看
jquery – Javascript validation with bootstrap tooltip – Stack Overflow
jquery-ui.js
jQuery UI
另外看项目中,是有:fixTitle的
这个是:
/bootstrap3_player-master/js/bootstrap3_player.js
中的调用fixTitle的地方:
感觉是:
jquery tooltip  fixTitle
难道必须用:
https://github.com/iainhouston/bootstrap3_player
说的:
* Twitter Bootstrap 3 – http://twitter.github.com/bootstrap/
Change a Tooltip’s text after initialization in Bootstrap
好像此处的:
$(time).tooltip(‘show’);
是可以正常执行的?
Tooltip don’t respect dynamically changed title attribute · Issue #14769 · twbs/bootstrap
jquery – Change Twitter Bootstrap Tooltip content on click – Stack Overflow
tooltip  fixTitle
Tooltip Widget | jQuery UI API Documentation
找不到fixTitle
Bootstrap tooltip plugin – modified to be rendered within the viewport and not runoff. Added a placement option ‘auto’ which determines the correct placement depending on viewport size. If suitable space is not available on any side of the element, then t
好像需要加上这个plugin,然后就有了:
  , fixTitle: function () {

      var $e = this.$element
      if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
        $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
      }
    }
 了。
但好像不对。bootstrap的js中本身就有才对。
去调试看看
换成:
<!-- <link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css
" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/bootstrap.css">

<!-- <script src="js/bootstrap.js"></script> -->
<script src="js/bootstrap.bundle.js"></script>
问题依旧。
才注意到这个是:tooltip.js
 
此处文件只有一个:
但是代码中的:
被Chrome中单独抽取出tooltip.js了
然后最后其中代码出错。
所以去搜:
jquery 4 tooltip
jquery 4 tooltip fixTitle
jquery – Change Bootstrap 4 tooltip template without refresh – Stack Overflow
Tooltips · Bootstrap
“Things to know when using the tooltip plugin:
* Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!”
果然是:
要么是:在bootstrap.js之前就包含了:popper.min.js
要么是:直接用包含了Popper.js的bootstrap.bundle.min.js 或 bootstrap.bundle.js
然后还有:
* Tooltips are opt-in for performance reasons, so you must initialize them yourself.
先去改包含的问题:
<script src="js/jquery-3.3.1.js"></script>
<!-- <script src="
https://code.jquery.com/jquery-3.3.1.slim.min.js
" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<!-- <script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> -->
<!-- <script src="js/bootstrap.js"></script> -->
<script src="js/bootstrap.bundle.js"></script>
结果:
错误依旧。
去参考:
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
去初始化试试
$('[data-toggle="tooltip"]').tooltip()
加到自己的main.js中的
$(document).ready(function(){
中。
再去:
static/js/bootstrap3_player.js
加上:
$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
});
问题依旧。
前面出错代码是:
        if (typeof config === 'string') {
          if (typeof data[config] === 'undefined') {
            throw new TypeError(`No method named "${config}"`)
          }
          data[config]()
bootstrap tooltip throw new TypeError(`No method named “${config}”`)
去看了看代码:
之前的show,都是_proto的属性值
但是没有:
_proto.fixTitle
但是注意到了有:
_proto._fixTitle
是不是去把:
fixTitle
都改为:
_fixTitle
就可以了?
去试试
终于没有错误了:
【总结】
此处,估计是bootstrap的js,在之前版本中,对于tooltip的属性中,是有fixTitle的
但是到了bootstrap 4后,改为了_fixTitle
导致报错,找不到。
去把此处的:
static/js/bootstrap3_player.js
中的fixTitle都改为:_fixTitle
//$(player_box).find('.glyphicon-refresh').parent().tooltip('fixTitle');
$(player_box).find('.glyphicon-refresh').parent().tooltip('_fixTitle');


//$(time).tooltip('fixTitle');
$(time).tooltip('_fixTitle’);
//$(time).tooltip('fixTitle');
$(time).tooltip('_fixTitle');
即可。
另外要注意,引用tooltip的话,要么是:
  • 要么是:在bootstrap.js之前就包含了:popper.min.js
  • 要么是:直接用包含了Popper.js的bootstrap.bundle.min.js 或 bootstrap.bundle.js

转载请注明:在路上 » 【已解决】将音频播放器bootstrap3_player整合到bootstrap4中出错:tooltip.js Uncaught TypeError No method named fixTitle

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.137 seconds, using 20.70MB memory