[已解决]模态动态框显示问题

tengke

{% extends 'rootyongh.html' %}
{% block b %}
    <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>
{#             <a href="http://127.0.0.1:8000/edit/{{ s.id }}/edit">编辑</a>#}
                     <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="编辑"
                         data-toggle="modal" data-target="#view">
<div class="modal fade" id="view" 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">
        <form id="view1"  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 type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
  </div>
</div>


                 <input uid="{{ s.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"
                         data-toggle="modal" data-target="#deleteuid">
         </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>
{#        <button uid="{{ s.id }}" id="delete12" type="submit"class="btn btn-danger btn-xs btn-delete"#}
{#                onclick="delete1()">确认</button>#}
          <button  id="date2" type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>
        </tr>
    {% endfor %}
   </table>
     <ul class="pagination">
        {{  ymm  }}</ul>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
    <script type="text/javascript">
    var DELETE_ID;
    $(function () {
        console.log("aja2 function called");
          {#$('#Modal').modal('show');#}
          {#      btn4();#}
          {#      btn412();#}
        delete1();
        view();
    })
    var csrfToken = "{{ csrf_token }}";
    function delete1() {
        $(".btn-delete").click(function() {
            {#alert("sc")#}
            $('#deleteuid').modal('show');
            DELETE_ID=$(this).attr("uid");
            var uid=$(this).attr("uid");
            console.log(uid);
        });
    }
$(function () {
    $("#date2").click(function() {
        $.ajax({
            url: "/ajdelete",
            type: "GET",
            data: {
                uid: DELETE_ID
            },
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    location.reload(); // 刷新界面的js代码
                } else {
                    alert(res.error);
                }
            }
        });
    });
});


function view() {
        $(".btn-delete").click(function() {
              var uid = $(this).attr("uid");
            {#alert("sc")#}
            $.ajax({
                url: '/ajaview',
                type: "get",
                data: {uid: uid },
                dataType: "JSON",
                  headers: {
    "X-CSRFToken": csrfToken  // 将CSRF令牌添加到请求头部
  },
            success: function (res) {
                if (res.status) {
                 $('#view').modal('show');
                }
                else
                {
                alert(res.error);
                }
            }
                })
            {#DELETE_ID=$(this).attr("uid");#}
            {#var uid=$(this).attr("uid");#}
            {#console.log(uid);#}
        });
    }
</script>
{% endblock %}
上面的是html界面
#################################################################################

def ajxs(request):
    from app.fenye import Cs
    form = Aj()
    n = request.GET.get('q', "")
    ss = models.aj.objects.filter(
        Q(id__icontains=n)
    )
    css = Cs(request, ss, n)
    cz = {"deat": css.ssxs, "ymm": css.html,"form":form}
    return render(request, "ajxs.html",cz)
def ajdelete(request):
    uid=request.GET.get('uid')
    exists=models.aj.objects.filter(id=uid).exists()
    if not exists:
        return JsonResponse({"status":False,"error":"not"})
    models.aj.objects.filter(id=uid).delete()
    return JsonResponse({"status":True})

def ajaview(request):
    uid = request.GET.get("uid")
    row = models.aj.objects.filter(id=1111).filter()
    if not row:
        return JsonResponse({"status":False,"error":"not11"})



目前情况是 点击web前面的编辑按钮   原本的动态框也出来了   然后过几秒 报错的也出来了  麻烦大佬看看

最佳答案

月排行榜 / 总排行榜

FishC

2023-12-26 16:03:14

tengke 发表于 2023-12-27 11:23
麻烦写的详细一些

非常抱歉没有提供详细的说明。以下是更详细的解释和示例代码：

首先，在您的编辑按钮上添加`onclick="openModal(id)"`来调用`openModal`函数，其中`id`是您要编辑的元素的唯一标识符。例如：

{% for s in deat %}    <!-- 其他内容 -->    <button onclick="openModal({{ s.id }})">编辑</button>    <!-- 其他内容 -->{% endfor %}

接下来，在JavaScript代码中定义`openModal`函数。这个函数将获取模态框元素并将其显示出来。示例代码如下：

function openModal(id) {  var modal = document.getElementById("view" + id);  modal.classList.add("show");  modal.style.display = "block";  document.body.classList.add("modal-open");}

在上面的代码中，`openModal`函数接受一个参数`id`，它表示要编辑的元素的唯一标识符。然后，通过`getElementById`方法获取相应的模态框元素，并更新其样式，使其可见。

最后，确保在HTML页面中正确设置了模态框的id。例如：

<!-- 模态框部分 --><div id="view{{ s.id }}" class="modal">  <!-- 模态框内容 --></div>

在上述示例中，`s.id`是根据您的数据模型中的唯一标识符来设置的。请确保设置了正确的id，以便在`openModal`函数中使用。

请将上述代码应用到您的项目中，并根据您的具体需求进行相应的调整。当您点击编辑按钮时，模态框应该会弹出并显示相应的内容。希望这可以帮助到您！如有进一步问题，请随时提问。

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

跳转到最佳答案楼层

FishC

tengke 发表于 2023-12-27 11:23
麻烦写的详细一些

非常抱歉没有提供详细的说明。以下是更详细的解释和示例代码：

首先，在您的编辑按钮上添加`onclick="openModal(id)"`来调用`openModal`函数，其中`id`是您要编辑的元素的唯一标识符。例如：

{% for s in deat %}    <!-- 其他内容 -->    <button onclick="openModal({{ s.id }})">编辑</button>    <!-- 其他内容 -->{% endfor %}

接下来，在JavaScript代码中定义`openModal`函数。这个函数将获取模态框元素并将其显示出来。示例代码如下：

function openModal(id) {  var modal = document.getElementById("view" + id);  modal.classList.add("show");  modal.style.display = "block";  document.body.classList.add("modal-open");}

在上面的代码中，`openModal`函数接受一个参数`id`，它表示要编辑的元素的唯一标识符。然后，通过`getElementById`方法获取相应的模态框元素，并更新其样式，使其可见。

最后，确保在HTML页面中正确设置了模态框的id。例如：

<!-- 模态框部分 --><div id="view{{ s.id }}" class="modal">  <!-- 模态框内容 --></div>

在上述示例中，`s.id`是根据您的数据模型中的唯一标识符来设置的。请确保设置了正确的id，以便在`openModal`函数中使用。

请将上述代码应用到您的项目中，并根据您的具体需求进行相应的调整。当您点击编辑按钮时，模态框应该会弹出并显示相应的内容。希望这可以帮助到您！如有进一步问题，请随时提问。

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

FishC

从您提供的代码和描述中，我发现了一些问题。首先，您需要将JavaScript代码放在<script>标签中，并将其放在HTML页面的头部或尾部。其次，您需要确保引入了jQuery库。最后，您的视图函数`ajaview`中有一个错误，缺少返回语句。修复这些问题后，您的代码应该可以正常工作。

HTML页面的修复示例：

{% extends 'rootyongh.html' %}{% block b %}<!-- 省略部分代码 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>    var DELETE_ID;    $(function() {        console.log("aja2 function called");        delete1();        view();    })    var csrfToken = "{{ csrf_token }}";    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() {            $.ajax({                url: "/ajdelete",                type: "GET",                data: {                    uid: DELETE_ID                },                dataType: "JSON",                success: function(res) {                    if (res.status) {                        location.reload(); // 刷新界面的js代码                    } else {                        alert(res.error);                    }                }            });        });    });    function view() {        $(".btn-delete").click(function() {            var uid = $(this).attr("uid");            $.ajax({                url: '/ajaview',                type: "get",                data: {                    uid: uid                },                dataType: "JSON",                headers: {                    "X-CSRFToken": csrfToken                },                success: function(res) {                    if (res.status) {                        $('#view').modal('show');                    } else {                        alert(res.error);                    }                }            });        });    }</script>{% endblock %}

视图函数`ajaview`的修复示例：

def ajaview(request):    uid = request.GET.get("uid")    row = models.aj.objects.filter(id=uid)    if not row:        return JsonResponse({"status": False, "error": "not11"})    return JsonResponse({"status": True})

请注意，上述修复只是其中一种可能的解决方案。如果仍然遇到问题，请提供更详细的错误信息和完整的代码，以便更好地帮助您解决问题。

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

tengke

我按照你提供的代码进行了修改   我的需求是 html进行判断是否存在对应的uid  不存在先把报错界面弹出   修改的界面不弹出
存在的话不弹出报错

FishC

tengke 发表于 2023-12-26 16:57
我按照你提供的代码进行了修改   我的需求是 html进行 ...

感谢您提供的信息。根据您的需求，我进行了一些修改来实现您想要的功能。在视图函数`ajaview`中，我添加了判断是否存在对应的uid的逻辑，并通过JSON响应返回给前端。然后在JavaScript代码中，根据服务器返回的数据来决定是否显示报错界面。以下是示例代码：HTML页面的修复示例：{% extends 'rootyongh.html' %}{% block b %}    var DELETE_ID;    $(function() {        console.log("aja2 function called");        delete1();        view();    })    var csrfToken = "{{ csrf_token }}";    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() {            $.ajax({                url: "/ajdelete",                type: "GET",                data: {                    uid: DELETE_ID                },                dataType: "JSON",                success: function(res) {                    if (res.status) {                        location.reload(); // 刷新界面的js代码                    } else {                        alert(res.error);                    }                }            });        });    });    function view() {        $(".btn-delete").click(function() {            var uid = $(this).attr("uid");            $.ajax({                url: '/ajaview',                type: "get",                data: {                    uid: uid                },                dataType: "JSON",                headers: {                    "X-CSRFToken": csrfToken                },                success: function(res) {                    if (res.status) {                        // 执行弹出修改界面的代码                    } else {                        alert(res.error);                        // 执行弹出报错界面的代码                    }                }            });        });    }{% endblock %}视图函数`ajaview`的修复示例：def ajaview(request):    uid = request.GET.get("uid")    exists = models.aj.objects.filter(id=uid).exists()    if not exists:        return JsonResponse({"status": False, "error": "not11"})    return JsonResponse({"status": True})这样，当uid存在时，就会执行弹出修改界面的代码；如果uid不存在，就会弹出报错界面。请将这些修复后的代码应用到您的项目中，并相应调整其他相关代码，以满足您的需求。

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

tengke

{% extends 'rootyongh.html' %}
{% block b %}
    <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-danger btn-xs btn-edit"value="编辑">
<div class="modal fade" id="view" 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">
        <form id="view1"  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 type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
  </div>
</div>
        </tr>
    {% endfor %}
   </table>
     <ul class="pagination">
        {{  ymm  }}</ul>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
    <script type="text/javascript">
    var DELETE_ID;
    $(function () {   console.log("aja2 function called");
          {#$('#Modal').modal('show');#}
          {#      btn4();#}
          {#      btn412();#}
        {#delete1();#}
        {#view();#}
    })
    var csrfToken = "{{ csrf_token }}";

$(document).ready(function() {
            // 在页面加载完成后执行的代码放在这里
            $(".btn-edit").click(function() {
                var uid = $(this).attr("uid");
                   console.log("aja3 function called");
                $('#view').modal('show');
                   console.log("aja4 function called");
            });
        });
</script>
{% endblock %}
以上代码点击编辑按钮 aja3 function called aja4 function called  可以正常的在控制器查看到   $('#view').modal('show');不能正常的弹出

FishC

tengke 发表于 2023-12-27 10:18
{% extends 'rootyongh.html' %}
{% block b %}
    ...

根据您提供的代码，我发现了一个问题。在JavaScript代码中，您使用了`$('#view').modal('show')`来显示模态框，但是在HTML页面中，并没有一个id为`view`的元素来作为模态框的目标。因此，无法正常弹出模态框。

要解决这个问题，您需要确保在HTML页面中存在一个具有id为`view`的元素，并且它应该是一个模态框的容器。

以下是一个示例修复代码：

{% extends 'rootyongh.html' %}{% block b %}  用户信息  {% for s in deat %}    {{ s.id }} {{ s.get_j_display }} {{ s.bt }} {{ s.detail }} {{ s.user }}    × 编辑数据    {% for f in form %}      {{ f.label }} : {{ f }}    {% endfor %}    提交  {% endfor %}  {{ ymm }}  <div id="view" class="modal">    <!-- 模态框内容 -->  </div>  <script>    var DELETE_ID;    $(document).ready(function() {      console.log("aja2 function called");      $(".btn-edit").click(function() {        var uid = $(this).attr("uid");        console.log("aja3 function called");        $('#view').modal('show');        console.log("aja4 function called");      });    });  </script>{% endblock %}

请将上述修复后的代码应用到您的项目中，确保在HTML页面中有一个具有id为`view`的容器元素，它将用作模态框的内容。然后，您应该能够成功弹出模态框了。

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

tengke

根据你写的我做了一些优化
{% extends 'rootyongh.html' %}
{% block b %}
    <div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
      <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>
  </div>
</div>
      <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" value="编辑" onclick="openModal('{{ s.id }}')">
<input   uid="{{ s.id }}"  type="button" class="btn btn-primary" value="删除" onclick="openModa2()">
<!-- 编辑模态框按钮 -->
<div class="modal fade" id="view{{ s.id }}" 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">
        <form id="view1"  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 type="submit" class="btn btn-primary">提交</button>
          <input type="reset" name="resetBtn" id="resetBtn" value="重置">
      </div>
    </div>
  </div>
</div>
<!-- 删除模态框按钮 -->
<div class="modal fade" id="deleteuid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
  <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="myModalLabel2">删除</h4>
      </div>
      <div class="modal-body">
          确认要删除吗？
      </div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button  id="date2" type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>
  </div>
</div>
        </tr>
       {% endfor %}
   </table>
     <ul class="pagination">
        {{  ymm  }}</ul>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
<!-- 引入script -->
<script>
      function openModal(id) {
        var modal = document.getElementById("view" + id);
        modal.classList.add("show");
        modal.style.display = "block";
        document.body.classList.add("modal-open");
    }
</script>
{% endblock %}
但是编辑按钮还是不能弹出

FishC

tengke 发表于 2023-12-27 11:21
根据你写的我做了一些优化
{% extends 'rootyongh.ht ...

根据您提供的代码，我发现您在JavaScript代码中定义了一个名为`openModal`的函数，用于打开模态框。但是，在HTML页面中并没有调用这个函数来实现按钮点击后弹出模态框的功能。在您的编辑按钮上添加`onclick="openModal(id)"`来调用`openModal`函数，其中`id`是您想要编辑的元素的唯一标识符。以下是修复后的代码示例：{% extends 'rootyongh.html' %}{% block b %}  用户信息  {% for s in deat %}    {{ s.id }} {{ s.get_j_display }} {{ s.bt }} {{ s.detail }} {{ s.user }}    &times; 编辑数据    {% for f in form %}      {{ f.label }} : {{ f }}    {% endfor %}    提交    &times; 删除 确认要删除吗？ 取消 提交  {% endfor %}  {{ ymm }}            function openModal(id) {    var modal = document.getElementById("view" + id);    modal.classList.add("show");    modal.style.display = "block";    document.body.classList.add("modal-open");  }{% endblock %}在此示例中，我假设您的编辑按钮具有一个名为`id`的属性，表示要编辑的元素的唯一标识符。请将上述修复后的代码应用到您的项目中，并相应调整其他相关代码，以满足您的需求。然后，当您点击编辑按钮时，模态框应该能够正常弹出了。

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

tengke

FishC 发表于 2023-12-27 11:21
根据您提供的代码，我发现您在JavaScript代码中定义了一个名为`openModal`的函数，用于打开模态框。但是 ...

麻烦写的详细一些