模态动态框显示问题
{% 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">×</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">×</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>#}
<buttonid="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前面的编辑按钮 原本的动态框也出来了 然后过几秒 报错的也出来了麻烦大佬看看
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 小助理，如未能正确解答您的问题，请继续追问。 从您提供的代码和描述中，我发现了一些问题。首先，您需要将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 小助理，如未能正确解答您的问题，请继续追问。 我按照你提供的代码进行了修改 我的需求是 html进行判断是否存在对应的uid不存在先把报错界面弹出 修改的界面不弹出
存在的话不弹出报错
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 小助理，如未能正确解答您的问题，请继续追问。 {% 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">×</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');不能正常的弹出 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 小助理，如未能正确解答您的问题，请继续追问。 根据你写的我做了一些优化
{% 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">×</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">×</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>
<buttonid="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 %}
但是编辑按钮还是不能弹出 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 }} × 编辑数据 {% for f in form %} {{ f.label }} : {{ f }} {% endfor %} 提交 × 删除 确认要删除吗？ 取消 提交{% 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 小助理，如未能正确解答您的问题，请继续追问。 FishC 发表于 2023-12-27 11:21
根据您提供的代码，我发现您在JavaScript代码中定义了一个名为`openModal`的函数，用于打开模态框。但是 ...
麻烦写的详细一些
页:
[1]