Javascript Django+；AJAX，需要单击两次按钮才能工作
尝试开发一个页面来执行CRUD，我选择使用nav选项卡，我使用AJAX在它们之间导航并加载内容，创建对象的部分是正确的，但是，当我单击编辑按钮时，我需要单击两次，以便他执行changeTAB（）具有切换到创建/更新选项卡逻辑的函数 我无法想象如何解决这个问题 index.html：Javascript Django+；AJAX，需要单击两次按钮才能工作,javascript,python,jquery,django,ajax,Javascript,Python,Jquery,Django,Ajax,尝试开发一个页面来执行CRUD，我选择使用nav选项卡，我使用AJAX在它们之间导航并加载内容，创建对象的部分是正确的，但是，当我单击编辑按钮时，我需要单击两次，以便他执行changeTAB（）具有切换到创建/更新选项卡逻辑的函数 我无法想象如何解决这个问题 index.html： {%load static%} <!DOCTYPE html> <html lang="pt-br"> <head> <title>CRUD E
{%load static%}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>CRUD EXAMPLE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Ordens de Serviço</h2>
<ul class="nav nav-tabs">
<li class="active"><a class="js-list"
data-toggle="tab"
href="#list"
>
Ordens de Serviço</a></li>
<li><a data-toggle="tab" class="js-create-update"
data-url="{% url 'example:create' %}"
id="tab-create-update"
href="#create-update"
>
Create/Update</a></li>
<li><a data-toggle="tab" href="#detail">Ver</a></li>
</ul>
<div class="tab-content">
<div id="list" class="tab-pane fade in active">
<h3>Equipamentos</h3>
{% include 'example/list.html' %}
</div>
<div id="create-update" class="tab-pane fade">
<h3>Criar/Editar</h3>
{% include 'example/create.html' %}
</div>
<div id="detail" class="tab-pane fade">
<h3>Detalhes</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
<script src="{% static 'js/example.js' %}"> </script>
<script src="{% static 'js/bootstrap.js' %}"> </script>
</body>
</html>
github:猜测代码行中可能存在的问题。您好，为什么您有
changeTab（）$（“.js update object”）。单击..<table class="table" id="table">
<thead>
<tr>
<th>Nome</th>
<th>TAG</th>
<th>nivel</th>
</tr>
</thead>
<tbody>
{%for equipamento in equipamentos %}
<tr>
<td>{{equipamento.nome}}</td>
<td>{{equipamento.tag}}</td>
<td>{{equipamento.nivel}}</td>
<td>
<button class="btn btn-primary js-update-object"
data-url="{% url 'example:update' equipamento.id %}"
onclick=changeTab()
>Update</button>
</td>
</tr>
{%endfor%}
</tbody>
</table>
<form method="post" action="{% url 'example:update' form.instance.pk %}" class="js-update-form">
{%csrf_token%}
{% include 'example/form.html' %}
<button type="submit" class="btn btn-primary">Update/Save</button>
</form>
//essa função vai carregar o form assim que clicar na tab de criar/editar
$(function () {
//carrega o formulário
var loadForm =function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
success: function (data) {
$("#create-update").html(data.html_form);
}
});
};
//carrega a tabela assim que clicar na tab da lista
$(".js-list").click(function () {
$.ajax({
url: '/list/',
type: 'get',
dataType: 'json',
success: function (data) {
$("#list").html(data.html_list);
}
});
});
//salva o formulário.
var saveForm =function () {
var form = $(this)
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
$.ajax({
url: '/create/',
type: 'get',
dataType: 'json',
success: function (data) {
$("#create-update").html(data.html_form);
}
});
}
else {
$("#create-update").html(data.html_form);
}
}
});
return false;
};
//create equipamentes
$(".js-create-update").click(loadForm);
$("#create-update").on("submit", ".js-create-form", saveForm );
//atualizar
$("#create-update").on("submit", ".js-update-form", saveForm );
});
//----------------Funcionando-------------
function changeTab() {
$(".js-update-object").click(function () {
$('#tab-create-update').trigger('click')
var btn = $(this); // <-- HERE
$.ajax({
url: btn.attr("data-url"), // <-- AND HERE
type: 'get',
dataType: 'json',
success: function (data) {
$("#create-update").html(data.html_form);
}
});
});
};
//carrega a tabela assim que a página entrar.
$.ajax({
url: '/list/',
type: 'get',
dataType: 'json',
success: function (data) {
$("#list").html(data.html_list);
}
});
urlpatterns = [
path('', views.index, name='index'),
path('list/', views.list_equipaments, name='list'),
path('create/', views.create_equipaments, name='create'),
path('update/<int:id>/', views.update_equipaments, name='update'),
]
from django.http import JsonResponse
from django.shortcuts import render, get_object_or_404
from django.template.loader import render_to_string
from example.forms import ArvoreModelForm
from example.models import Arvore
def index(request):
return render(request, 'example/index.html')
def list_equipaments(request):
data = {}
queryset = Arvore.objects.all()
context = {'equipamentos': queryset}
data['html_list'] = render_to_string('example/list.html',
context,
)
return JsonResponse(data)
def save_form(request, form, template_name):
data = dict()
if request.method == 'POST':
if form.is_valid():
form.save()
data['form_is_valid'] = True
else:
data['form_is_valid'] = False
context = {'form': form}
data['html_form'] = render_to_string(template_name, context, request=request)
return JsonResponse(data)
def create_equipaments(request):
if request.method == 'POST':
form = ArvoreModelForm(request.POST)
else:
form = ArvoreModelForm()
return save_form(request, form, 'example/create.html')
def update_equipaments(request, id):
queryset = get_object_or_404(Arvore, pk=id)
if request.method == 'POST':
form = ArvoreModelForm(request.POST, instance=queryset)
else:
form = ArvoreModelForm(instance=queryset)
return save_form(request, form, 'example/update.html')