Flask-Moment(moment.js) 鼠标停留不显示时间弹窗「已经解决」

momentjs
flask-moment

#1

moment 时间 js 鼠标停留后无显示时间:
moment%E6%97%A0%E6%95%88

html:

<td data-toggle=“tooltip” data-placement=“top”
data-timestamp="{{ note.timestamp.strftime(’%Y-%m-%dT%H:%M:%SZ’) }}"
data-delay=“500”>
{{ moment(note.timestamp).fromNow(refresh=True) }}</td>
<td>

js 代码:

$(function () {
    function render_time() {
        return moment($(this).data('timestamp')).format('lll')
    }
    $('[data-toggle="tooltip"]').tooltip(
        {title: render_time}
    );
});

#2

你的问题和 Flask-Bootstrap(实际应为 Bootstrap-Flask)无关,仅需要关注 Flask-Moment(Moment.js)的那部分代码。同时也未必是「网络资源无效的问题」。

请先自行通过下列途径调试,确定你真正面临的问题是什么:

  • 打开浏览器「开发者工具」
  • 查看 Console 面板有没有错误输出
  • 查看 Network 面板对应的资源请求的响应状态

另外,建议参考论坛说明里的编辑器使用一节为代码正确设置语法高亮。同时删掉无关的内容和图片,并调整标题。


#3

先说声抱歉,没有对问题描述清除!
我的本意是:

  1. 我按照书本上的说明,引用的是 bootstra-falsk 的 css 和 js 本地资源,但是导航条没有正常显示;
    但是我直接使用 bootstrap 网站上(3.37)哪个基本网页模板就没有问题
    模板中如下引用:
    {% block styles %}
    {{ bootstrap.load_css() }}
    {% endblock %}
  1. moment.js 没有下载到本地,但是鼠标移动到时间上不显示具体时间。模板中如下引用

    {% block scripts %}
    {{ bootstrap.load_js() }}
    {{ moment.include_moment() }}
    {{ moment.include_jquery() }}
    {{ moment.locale(‘zh-cn’) }}
    {% endblock %}

但是我直接使用 bootstrap 网站上(3.37)哪个基本网页模板就没有问题
编辑器 pycharm,没有提示任何错误
上传的图片是 表单和 导航条及时间显示 的效果


#4

第一个问题我解决了,是我的错误!没有使用 boot-flask 自带的 base.html 模板
第二个问题:我需要下载 moment.js 到本地的 static 文件夹么?


#5

我想你搞混了一些东西:

  • 书里面的项目用的扩展是 Bootstrap-Flask,不是 Flask-Bootstrap。前者使用 Bootstrap 4,后者使用 Bootstrap 3;前者提供了 bootstrap.load_css()bootstrap.load_js() 方法,但没有内置基模板,后者内置了基模板。
  • 开发者工具是浏览器内置的功能,不是编辑器(PyCharm)。打开你的程序页面,然后在 Windows / Linux 下按 Ctrl+Shift+I,macOS 下按 Cmd+Opt+I

另外,对于你的第二个问题,{{ moment.include_moment() }} 默认会从 CDN 获取资源,如果你觉得慢,也可以选择下载资源到本地。但是你的时间已经显示出来了,说明资源没有问题。

但是弹窗不显示,说明你的 JavaScript 代码有问题。你需要在浏览器开发者工具的控制台查看错误输出。在此之前,你需要先确定你使用的是 Bootstrap-Flask 还是 Flask-Bootstrap(回想一下你安装时输入的命令 pipenv install xxx),你的弹窗代码是基于 Bootstrap 4 的,所以需要使用前者才能生效。

如果浏览器开发者工具控制台(Console)没有错误输出,那么你可以给出完整的模板内容(包括基模板),我看看是否存在问题。


#6

顺便说一下,代码块标记是使用三个反引号,见下图:


#7

非常感谢你的回复,新手问题浪费您时间了!
看了你的回复之后,我也解决了问题,谢谢!


#8

不客气。什么问题导致的?建议把解决方法补充在这里,也许会帮到其他遇到相同问题的人。


#9

第一个问题:

确实如您说的一样,我搞混了 bootstrap-flask 和 flask-bootstrap (各自的 bootstrap 版本不同)
这个问题我专门查阅了 bootstrap4 的文档,其实很简单(看下文档就知道了)

第二个问题:

我没有按照你的 js 写,我改成了下面的代码,好像也行:

 <span data-toggle="tooltip" title="{{ note.complated_time }}">                  
   $(document).ready(function () {
       $('[data-toggle="tooltip"]').tooltip(
           {title: moment.format('lll') }
       );
   });

总结下:

其实好多问题都是因为粗心或者说没有经验造成的

**截图:


#10

看起来很有趣,加油~


#11

这个页面真好看,色彩的搭配和页面的布局给人耳目一新的感觉,我看完书中的例子运行一下就翻过去了,从没有想过在上面加点东西可以做到像你上面那么有趣:grinning: