Swal.fire将打开无法模态的模态(在HTML正文之后)

时间:2019-06-19 21:40:09

标签: javascript html django ajax sweetalert2

我目前在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任务入门视图。

有人暗示为什么会这样吗?预先感谢。

0 个答案:

没有答案