表格为空时,烧瓶模式不起作用

时间:2019-11-03 19:25:46

标签: javascript python html css flask

我正在尝试使这种模式起作用。我有一个简单的Flask Web应用程序,带有SQLite数据库和一些JavaScript代码,用于使用模式向表中添加新行。

一切正常,只要桌上不再有任何行。如果表为空,则无法再打开模式。如果至少有一行,则该模式可以正常工作并向右打开。

我已在此处上传代码:https://jsfiddle.net/bq4seprt

我尝试调试错误并收到以下错误消息:

// we don't need jQuery to write this but since it's there...
$(document).onload(function onload() {
  // bind the event from the whole page targeting all .btn-link elements 
  $(document).on('click', '.btn-link', function onClick(e) {
    e.stopPropagation(); // stop the event so you don't change page
    // you don't need jQuery for AJAX, just use fetch:
    fetch(e.target.href, { method: 'DELETE' }); 
  });
});

在线:

Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.btn.<computed>.onclick

1 个答案:

答案 0 :(得分:0)

您的代码中没有什么要注意的

您不需要条件语句{% for row in rows %}来为添加的每个项目创建新的模式。有了{% for row in rows %}条件,当表为空时,没有模态类可供选择,因此模态为空。

您需要做的是删除当前模态的条件语句,从表单中获取数据,然后将新数据添加到sqlite中。您可以使用关闭按钮将模式显示设置为无,然后使用模式按钮将显示更改为阻止。您正在使用flask,所以我假设您已经具有从表单获取数据并将其添加到sqlite数据库的代码。您需要使用javascript来显示和隐藏模态

对于仅在代码中仅存在一次的类,您也不需要querySelectorAll,而是使用querySelector