В настоящее время у меня возникает следующая проблема со Sweet Alerts 2:
Модал загружен, но кажется, что он не кликабелен
Я исследовал консоль и обнаружил две важные вещи: во-первых, это происходит, даже если я запускаю Swal.fire({}) на консоли Chrome, это поведение сохраняется. Я попытался заменить некоторые коды в исходном коде , но безуспешно. Z-индекс, кажется, не влияет на это, и целевой объект, который загружает div, не тривиален.
Я делаю эту работу над django, но проблема не в этом, поэтому я опущу код django. Мой HTML-код на _base.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 %} >
и фактический файл clients.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>
Код 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,
});
}
});
});
и, наконец, связанный cjv django (с опущенным кодом):
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.
Любые намеки, почему это происходит? Заранее спасибо.