tengke 发表于 2024-1-15 11:35:39

弹出问题

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="btn412"novalidate>
    {% for f in form %}
      <div class="form-group">
            {{ f.label }} : {{ f }}
      <span class="error-msg" style="color:red; postition:absolute;"></span>
      </div>
    {% endfor %}
      </div>
      <div class="modal-footer">
      <button id="etids" type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
</div>
</div>

<script>
         $(function () {
      console.log("aja2 function called");
                      bb();
                delete1();
    })
      function bb() {
            $(".btn-edit1").click(function() {
                var uid =$(this).attr("uid")
                $.ajax({
                  url: "/ajaview",
                  type: "get",
                  data :{
                        uid: uid
                  },
                  dataType: "JSON",
                  success:function (res){
                        if(res.status){
                            $.each(res.data,function (name,value){
                              $("#id_" + name).val(value);
                            })
$('#myModal').modal('show');
    console.log(res);
                        }else{
                            alert(res.error);
                        }

                  }
                })
            });
      }
$(function () {
    $("#etids").click(function() {
      console.log("123");
    });
});

idmyMmyodal 编辑按钮可以弹出 也可以显示原来的数据内容
id etids 在myMmyodal里面 点击提交按钮 在控制台没有输出123 这个是为什么呢 我js 和 css已经配置好了

不二如是 发表于 2024-1-15 11:35:40

3 个问题：


事件处理器绑定时机：

在文档加载时，鱼油通过 $(function() { ... }) 绑定了对 "#etids" 元素的点击事件处理器。如果在此时元素还未加载到 DOM 中，该绑定将无效。

确保在 DOM 元素加载完毕后再绑定事件处理器。


动态内容和事件委托：

如果 "#etids" 是动态添加到 DOM 中的（例如，通过 AJAX 加载的模态框内容），直接绑定事件可能不会起作用。在这种情况下，鱼油应该使用事件委托，将事件处理器绑定到一个静态的父元素上，然后指定 "#etids" 作为选择器：

$(document).on("click", "#etids", function() {
    console.log("123");
});

表单提交的默认行为：

"#etids" 是一个提交按钮，位于一个表单元素内。点击该按钮可能会触发表单的提交事件，并导致页面刷新或跳转，从而阻止 console.log("123") 的执行。

为了防止这种情况，鱼油可以阻止表单的默认提交行为：

$("#btn412").submit(function(event) {
    event.preventDefault();
    console.log("123");
});

FishC 发表于 2024-1-15 11:36:06

首先，确保您的JavaScript和CSS文件已正确引入页面。

其次，根据您提供的代码，我发现以下问题：

1. 在第一个`$(function(){})`函数中，您调用了两个函数`bb()`和`delete1()`，但是在提供的代码中并没有包含`delete1()`函数的定义。请确保您有定义该函数，或者删除无法使用的函数调用。

2. 在第二个`$(function(){})`函数中，您绑定了`#etids`的点击事件，并打印了一条信息到控制台。如果控制台没有输出`123`，可能是因为点击事件没有触发。请检查一下`#etids`元素是否存在于页面中，并且是否有其他地方也绑定了点击事件导致冲突。可以尝试注释掉其他绑定点击事件的代码，然后再次测试。

另外，请确保您的`bb()`函数和`$("#etids")`点击事件绑定的元素都位于页面加载完成之后才执行的代码块中，否则可能找不到对应的元素。

最后，请注意检查浏览器的开发者工具中的错误日志，以便查看是否有其他的错误导致这些功能不起作用。

祝您成功解决问题！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

tengke 发表于 2024-1-16 16:44:33

FishC 发表于 2024-1-15 11:36
首先，确保您的JavaScript和CSS文件已正确引入页面。

其次，根据您提供的代码，我发现以下问题：


{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCommerce template By Adobe Dreamweaver</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
{#    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">#}
    <link rel="stylesheet" href="{% static 'css/eCommerceStyle.css' %}">
{#    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>#}

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>

    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
{#   <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>#}
      <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="mainWrapper">
<header>
    <!-- This is the header content. It contains Logo and links -->
<!-- <img src="logoImage.png" alt="sample logo"> -->
      <!-- Company Logo text -->
{#                <div id="headerLinks"><a href="#" title="Login/Register">登陆/退出</a></div>#}

      <div class="dropdown" style="position: absolute; top: 10px; right: 10px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      {{ request.session.info.name }}
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">设置</a></li>
    <li><a href="http://127.0.0.1:8000/zx/" title="Link">退出</a></li>
</ul>
</div>
</header>
<div id="content">
    <section class="sidebar">
      <!-- This adds a sidebar with 1 searchbox,2 menusets, each with 4 links -->
      <div id="menubar">
      <nav class="menu">
<ul>
            <!-- List of links under menuset 1 -->
            <li>
            <a href="#" title="Link">首页</a></li>
            <li><a href="#" title="Link">监控网站</a></li>
            <li><a href="#" title="Link">博客网站</a></li>
                      <li><a href="#" title="Link">容器网站</a></li>
                        <li><a href="http://127.0.0.1:8000/rootuseradd/" title="Link">测试python界面</a></li>
            <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#"title="Link">&nbsp;</a></li>
          </ul>
      </nav>
      <nav class="menu">
          <h2>设置 </h2>
          <!-- Title for menuset 2 -->
          <hr>
          <ul>
            <!--List of links under menuset 2 -->
            <li><a href="#" title="Link">设置&nbsp;</a></li>
            <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">退出</a></li>
          </ul>
      </nav>
      </div>
    </section>
    <section class="mainContent">
      <div class="productRow"><!-- Each product row contains info of 3 elements -->
             <style>
      .panel {
            border: none;
      }
      .table {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
      }
    </style>

<body>
    <div class="bs-example" data-example-id="panel-without-body-with-table">
      <div class="panel panel-default">
            <table class="table">
                <tr>
                  <th scope="row"></th>
                  <td><a href="http://127.0.0.1:8000/useradd/" title="Link">用户添加</a></td>
                  <td><a href="http://127.0.0.1:8000/view/" title="Link">用户查看</a></td>
                     <td><a href="http://127.0.0.1:8000/user_add/" title="Link">部门添加</a></td>
                     <td><a href="http://127.0.0.1:8000/user_add/" title="Link">部门查看</a></td>
                </tr>
            </table>
      </div>
    </div>
</body>



         <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息
          <form method="get">
          </form>
    <div class="input-group">
      <input type="text" name="q" class="form-control" placeholder="Search for...">
      </form>
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </span>
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
      <!-- Table -->
<table class="table">
          <tr>
    {% for s in deat %}
      <td align="left">{{ s.id }}</td>
          <td align="left">{{ s.get_j_display }}</td>
          <td align="left">{{ s.bt }}</td>
         <td align="left">{{ s.detail }}</td>
         <td align="left">{{ s.user }}</td>
               <td>
          <input uid="{{ s.id }}" type="button" class="btn btn-primary btn-xs btn-edit1" value="编辑" >
               <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
         </td>

      <!-- 删除数据模态框 -->
<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除</h4>
      </div>
      <div class="modal-body">
          确认要删除吗？
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <buttonid="date2" type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>
</div>
</div>

<!-- 编辑数据模态框 -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="btn412"novalidate>
    {% for f in form %}
      <div class="form-group">
            {{ f.label }} : {{ f }}
      <span class="error-msg" style="color:red; postition:absolute;"></span>
      </div>
    {% endfor %}
      </div>
      <div class="modal-footer">
         <buttonid="etidszzz" type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
</div>
</div>
      </tr>

    {% endfor %}
   </table>
    <script>
         $(function () {
      console.log("aja2 function called");
                      bb();
                delete1();
    })
      function bb() {
            $(".btn-edit1").click(function() {
                var uid =$(this).attr("uid")
                $.ajax({
                  url: "/ajaview",
                  type: "get",
                  data :{
                        uid: uid
                  },
                  dataType: "JSON",
                  success:function (res){
                        if(res.status){
                            $.each(res.data,function (name,value){
                              $("#id_" + name).val(value);
                            })
$('#myModal').modal('show');
    console.log(res);
                        }else{
                            alert(res.error);
                        }

                  }
                })
            });
      }
$(function() {
      $("#etidszzz").click(function() {
            console.log("guanb");// 输出 "guanb" 到控制台
            var modal = document.getElementById("view");
            var bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.hide();// 关闭模态框
      });
    });
function delete1() {
      $(".btn-delete").click(function() {
            $('#deleteuid').modal('show');
            DELETE_ID=$(this).attr("uid");
            var uid=$(this).attr("uid");
            console.log(uid);
      });
    }


    </script>
</body>


<ul class="pagination">
      {{ymm}}</ul>
          </tr>
      </tbody>
      </table>
    </div>
</div>

      </article>
      </div>
      {%block b %}{% endblock %}

    </section>
</div>
<footer>
    <!-- This is the footer with default 3 divs -->
    <div>
      <p>没有数据</p>
    </div>
    <div>
      <p>没有数据</p>
    </div>
    <div class="footerlinks">
      <p><a href="#" title="Link">Link 1 </a></p>
      <p><a href="#" title="Link">Link 2</a></p>
      <p><a href="#" title="Link">Link 3</a></p>
    </div>
</footer>
</div>
</body>
</html>
我尝试修改成这个样子 但是点击编辑的保存按钮 不能正常的在控制台显示guanb

FishC 发表于 2024-1-16 16:45:07

tengke 发表于 2024-01-16 16:44
{% load static %}




eCommerce template By A ...

根据您提供的代码，我发现几个问题。

首先，请确保您引入了所需的JavaScript和CSS文件，并且文件路径正确。这里涉及到使用的Bootstrap库，所以需要引入相应的Bootstrap文件。

其次，在您提供的代码中，点击编辑保存按钮的id是`etidszzz`，但是在JavaScript代码中绑定点击事件的时候，却使用了`#etids`，这可能导致无法触发点击事件。请检查一下按钮的id是否正确，并修改相应的JavaScript代码。

另外，在您的JavaScript代码中，使用了`new bootstrap.Modal(modal)`来创建一个Bootstrap模态框对象，并尝试调用`hide()`方法来关闭模态框。但是，根据您提供的代码，我没有看到您引入Bootstrap的JavaScript文件。请确保您已正确引入Bootstrap的JavaScript文件，否则这部分代码将无法正常工作。

最后，请确保您的JavaScript代码位于页面加载完成之后执行的代码块中，以避免找不到元素的问题。

如果您还是不能解决问题，请提供更多关于您的代码和错误信息的详细信息，以便我能够更好地帮助您解决问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

tengke 发表于 2024-1-16 17:06:42

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>eCommerce template By Adobe Dreamweaver</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'css/eCommerceStyle.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
      <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="mainWrapper">
<header>
      <div class="dropdown" style="position: absolute; top: 10px; right: 10px;">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      {{ request.session.info.name }}
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">设置</a></li>
    <li><a href="http://127.0.0.1:8000/zx/" title="Link">退出</a></li>
</ul>
</div>
</header>
<div id="content">
    <section class="sidebar">
      <div id="menubar">
      <nav class="menu">
<ul>
            <li>
            <a href="#" title="Link">首页</a></li>
            <li><a href="#" title="Link">监控网站</a></li>
            <li><a href="#" title="Link">博客网站</a></li>
                      <li><a href="#" title="Link">容器网站</a></li>
                        <li><a href="http://127.0.0.1:8000/rootuseradd/" title="Link">测试python界面</a></li>
            <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#"title="Link">&nbsp;</a></li>
          </ul>
      </nav>
      <nav class="menu">
          <h2>设置 </h2>
          <!-- Title for menuset 2 -->
          <hr>
          <ul>
            <!--List of links under menuset 2 -->
            <li><a href="#" title="Link">设置&nbsp;</a></li>
            <li class="notimp"><!-- notimp class is applied to remove this link from the tablet and phone views --><a href="#" title="Link">退出</a></li>
          </ul>
      </nav>
      </div>
    </section>
    <section class="mainContent">
      <div class="productRow"><!-- Each product row contains info of 3 elements -->
             <style>
      .panel {
            border: none;
      }
      .table {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
      }
    </style>

<body>
    <div class="bs-example" data-example-id="panel-without-body-with-table">
      <div class="panel panel-default">
            <table class="table">
                <tr>
                  <th scope="row"></th>
                  <td><a href="http://127.0.0.1:8000/useradd/" title="Link">用户添加</a></td>
                  <td><a href="http://127.0.0.1:8000/view/" title="Link">用户查看</a></td>
                     <td><a href="http://127.0.0.1:8000/user_add/" title="Link">部门添加</a></td>
                     <td><a href="http://127.0.0.1:8000/user_add/" title="Link">部门查看</a></td>
                </tr>
            </table>
      </div>
    </div>
</body>



         <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">用户信息
          <form method="get">
          </form>
    <div class="input-group">
      <input type="text" name="q" class="form-control" placeholder="Search for...">
      </form>
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
      </span>
    </div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
      <!-- Table -->
<table class="table">
          <tr>
    {% for s in deat %}
      <td align="left">{{ s.id }}</td>
          <td align="left">{{ s.get_j_display }}</td>
          <td align="left">{{ s.bt }}</td>
         <td align="left">{{ s.detail }}</td>
         <td align="left">{{ s.user }}</td>
               <td>
          <input uid="{{ s.id }}" type="button" class="btn btn-primary btn-xs btn-edit1" value="编辑" >
               <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除">
         </td>

      <!-- 删除数据模态框 -->
<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">删除</h4>
      </div>
      <div class="modal-body">
          确认要删除吗？
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <buttonid="date2" type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>
</div>
</div>

<!-- 编辑数据模态框 -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="btn412"novalidate>
    {% for f in form %}
      <div class="form-group">
            {{ f.label }} : {{ f }}
      <span class="error-msg" style="color:red; postition:absolute;"></span>
      </div>
    {% endfor %}
      </div>
      <div class="modal-footer">
          <button id="etidszzz" type="button" class="btn btn-primary">保存</button>
{#         <buttonid="etidszzz" type="submit" class="btn btn-primary">提交</button>#}
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
</div>
</div>

      </tr>

    {% endfor %}
   </table>
    <script>
         $(function () {
      console.log("aja2 function called");
                      bb();
                delete1();
    })
      function bb() {
            $(".btn-edit1").click(function() {
                var uid =$(this).attr("uid")
                $.ajax({
                  url: "/ajaview",
                  type: "get",
                  data :{
                        uid: uid
                  },
                  dataType: "JSON",
                  success:function (res){
                        if(res.status){
                            $.each(res.data,function (name,value){
                              $("#id_" + name).val(value);
                            })
$('#myModal').modal('show');
    console.log(res);
                        }else{
                            alert(res.error);
                        }

                  }
                })
            });
      };




$(function() {
      $("#etidszzz").click(function() {
            console.log("guanb");// 输出 "guanb" 到控制台
            var modal = document.getElementById("view");
            var bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.hide();// 关闭模态框
      });
    });

function delete1() {
      $(".btn-delete").click(function() {
            $('#deleteuid').modal('show');
            DELETE_ID=$(this).attr("uid");
            var uid=$(this).attr("uid");
            console.log(uid);
      });
    };
{# $(function () {#}
{#    $("#date2").click(function() {#}
{#         console.log("guanb");#}
{#      $.ajax({#}
{#            url: "/ajdelete",#}
{#            type: "GET",#}
{#            data: {#}
{#                uid: DELETE_ID#}
{#            },#}
{#            dataType: "JSON",#}
{#            success: function (res) {#}
{#                if (res.status) {#}
{#                  location.reload(); // 刷新界面的js代码#}
{#                } else {#}
{#                  alert(res.error);#}
{#                }#}
{#            }#}
{#      });#}
{#    });#}
{#});#}

    </script>
</body>


<ul class="pagination">
      {{ymm}}</ul>
          </tr>
      </tbody>
      </table>
    </div>
</div>

      </article>
      </div>
      {%block b %}{% endblock %}

    </section>
</div>
<footer>
    <!-- This is the footer with default 3 divs -->
    <div>
      <p>没有数据</p>
    </div>
    <div>
      <p>没有数据</p>
    </div>
    <div class="footerlinks">
      <p><a href="#" title="Link">Link 1 </a></p>
      <p><a href="#" title="Link">Link 2</a></p>
      <p><a href="#" title="Link">Link 3</a></p>
    </div>
</footer>
</div>
</body>
</html>

FishC 发表于 2024-1-16 17:07:36

tengke 发表于 2024-01-16 17:06
{% load static %}




eCommerce template By A ...

根据您提供的代码，我发现以下问题：1. 您的JavaScript代码缺少一个分号，导致在形成代码块时出现了语法错误。请在`bb()`函数和`delete1()`函数的末尾添加分号。2. 在您的JavaScript代码中，有一段被注释掉的代码，它是一个点击事件绑定的代码块。如果您解除注释并且正确配置了点击事件的元素id和请求url，那么当点击`#date2`元素时，应该可以在控制台看到`"guanb"`的输出。请确保元素id和url都已正确设置，并确保服务器端代码能够正确响应AJAX请求。最后，请确保您引入了所需的JavaScript库文件，如Bootstrap和jQuery，以便使您的JavaScript代码正常工作。如果您还遇到问题，请提供更多信息，我将尽力帮助您解决。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页: [1]
查看完整版本: 弹出问题