我目前在Sweet Alerts 2中遇到以下问题:
The modal is loaded, but it doesn't seems to be clickable
我已经在控制台上进行了调查,发现了两件重要的事情:首先,即使我在chrome控制台上运行Swal.fire({})
也会发生这种情况。我尝试过替换source code上的某些代码,但是没有运气。 Z-index似乎对此没有影响,并且加载div
的目标对象并不重要。
我正在django上进行这项工作,但是问题不在那里,所以我将省略django代码。我在_base.html上的html代码是:
{% block styles %}
<link href="{% static 'system/css/bootstrap.min.css' %}" rel="stylesheet"/>
<link href="{% static 'system/css/material-dashboard.css' %}" rel="stylesheet"/>
<link href="{% static 'system/css/sweetalert2.css' %}" rel="stylesheet"/>
<link href="{% static 'system/css/jquery.datetimepicker.min.css' %}" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" rel="stylesheet">
{% endblock %}
{% block html5shim %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
{% endblock %}
{% block extra_scripts %}
{% endblock %}
{% block extra_head_base %}
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<script src="{% static 'charts/code/highcharts.js' %}"></script>
<script src="{% static 'charts/code/modules/exporting.js' %}"></script>
<script src="{% static 'charts/code/modules/export-data.js' %}"></script>
<script src="{% static 'system/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'system/js/sweetalert2.js' %}"></script>
{% block extra_head %}{% endblock %}
{% endblock extra_head_base %}
</head>
<body {% block body_extra_attributes %}
class="{% block body_class_base %}{% block body_class %}{% endblock %}{% endblock %}"
id="{% block body_id %}{% endblock %}"
{% endblock %} >
和实际的client.html文件(称为swal的按钮)为:
<div class="tab-content">
<div class="tab-pane" id="Retail">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="content-block">
<div class="card-header card-header-icon" data-background-color="rose">
<i class="large material-icons">group</i>
</div>
<div class="card-content">
<h3>Clientes varejistas da : {{ request.user.roles.enterprise.name }}</h3>
<div class="row">
<div class="col-md-9 col-offset-3">
<p>
<button id="include-button"
type="button"
class="btn btn-primary js-import-leads"
data-url="{% url 'crm:customer:lead_upload' %}">
<span class="glyphicon glyphicon-plus"></span>
Importar Leads
</button>
<button type="button" class="btn btn-primary js-import-client">
<span class="glyphicon glyphicon-plus"></span>
Importar Clientes
</button>
</p>
<a href="{% url 'crm:customer:add_Customer' %}" class="btn btn-primary">
<i class="large material-icons">people</i>
Adicionar Cliente
</a>
</div>
{% include 'dashboard/table.html' with table=tables.1 %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我称之为Swal的JavaScript代码是:
$(".js-import-leads").click(function () {
var endpoint = document.getElementById('include-button').getAttribute('data-url');
$.ajax({
url: endpoint,
type: "get",
dataType: 'json',
success: function(data){
Swal.fire({
html: data.html_template,
showCancelButton: true,
confirmButtonText: 'Look up',
allowOutsideClick: true,
});
}
});
});
最后,相关的django cbv(省略了一些代码)是:
class ImportProfileLeads(FileUploadAjaxMixin, generic.FormView):
template_name = 'dashboard/partials/swal_form.html'
form_class = CSVImportForm
success_url = reverse_lazy('crm:customer:crm_CustomerList')
title = 'Importar Leads'
def json_to_response(self, success_url=None, json_data=None, **response_kwargs):
""" Valid response with next action to be followed by the JS """
if not json_data:
rendered_data = self.serialize_data()
else:
rendered_data = json_data
rendered_data["status"] = self.get_status()
rendered_data["action"] = self.get_action()
if self.json_action == AjaxResponseAction.REDIRECT:
rendered_data["action_url"] = success_url or self.get_success_url()
template = getattr(self, 'template_name', None)
if template and not self.request.method == 'POST':
templated_data = dict()
templated_data['html_template'] = render_to_string(template_name=self.template_name,
context=self.get_context_data(),
request=self.request)
return JsonResponse(templated_data, **response_kwargs)
return JsonResponse(rendered_data, **response_kwargs)
我可以看到这不是Django问题,因为有显示图像,所请求的模板在模态内部呈现(至少不是视图问题)。我可以毫无问题地将其加载到一个简单的模态中,但是如果我可以在swal中发出所有异步请求,那就更好了,因为这是一个Celery任务入门视图。
有人暗示为什么会这样吗?预先感谢。