我目前正处于我的Sweet Alert计划的关键一步。我需要用一些内部html按钮(通过Ajax呈现表单)替换默认的提交和取消按钮,但是我找不到任何有关如何正确获取提交信息或关闭警报的参考。
我的表单html代码:
<div class="card">
<div class="card-header card-header-icon" data-background-color="orange">
<i class="large material-icons">cloud_upload</i>
</div>
<br>
<div class="card-content">
<form {% if modal_title_id %} id="{{ modal_title_id }}"{% endif %}
class="form-{{ style|default:'stacked' }} {{ class }} create-form"
method="{{ method|default:'post' }}"
{% if action %} action="{{ action }}"{% endif %}
enctype="multipart/form-data">
{% if not method == "get" %}{% csrf_token %}{% endif %}
{% if title %}<h5><i class="icon-sitemap icon-large"></i>{{ title }}</h5>{% endif %}
{% include 'dashboard/partials/form_fields.html' %}
</form>
<div class="row">
<button type="button" class="btn btn-secondary" id="closeSwal">{% trans 'Close' %}</button>
<button type="submit" class="btn btn-primary" id="PostSwal">{% trans 'Upload File' %}</button>
</div>
</div>
</div>
我的按钮html代码:
<p>
<button type="button"
class="btn btn-primary upload-file-js"
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>
我的js代码是:
$('.upload-file-js').click(function() {
var uploadUrl = $(this).attr('data-url')
$.ajax({
url: uploadUrl,
type: 'get',
dataType: 'json',
success: function (data) {
Swal.fire({
title: '<strong>Importar Arquivo</strong>',
html: data.html_template,
showCancelButton: false,
showConfirmButton: false,
allowOutsideClick: true,
});
}
});
});
任何帮助将不胜感激。