我正在使用Codeigniter
我使用ajax HTML函数加载了一个子视图。在这个视图中,我使用的是swal(sweetalert),但没有工作。这是我的代码。
settings_js.php
$('#banks').on('click',function (e) {
// $('#banks').onclick(function (e) {
e.preventDefault();
// alert("hello");
load_banks();
})
function load_banks() {
$.ajax({
url: 'settings/banks_view',
type: "POST",
// data: oData,
dataType: "HTML",
processData: false,
contentType: false,
success: function (data) {
// console.log(data);
$(".content-page").html(data);
// banks_datatable();
},
error: function (jqXHR, textStatus, errorThrown) {
//console.log(jqXHR.responseText)
swal("ERROR!", jqXHR.responseText, 'error');
}
})
}
设置/ banks_view
public function banks_view()
{
$table = 'banks';
$this->load->model("crud_m");
$data['records'] = $this->crud_m->get_data($table);
$this->load->view("settings/banks_v", $data);
}
banks_view
$("#bnk_form").submit(function (e) {
e.preventDefault();
// alert("psersonal form testing");
var form = document.forms.namedItem("bnk_form");
var oData = new FormData(form);
// ajax adding data to database
$.ajax({
url: 'settings/bank_data_save',
type: "POST",
data: oData,
dataType: "JSON",
processData: false,
contentType: false,
success: function (data) {
if (data.status == true) {
$('#bank-modal').modal('toggle');
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
toast({
type: 'success',
title: 'Signed in successfully'
})
} else {
swal("ERROR!", data, "error")
}
},
error: function (jqXHR, textStatus, errorThrown) {
//console.log(jqXHR.responseText)
swal("JS ERROR!", jqXHR.responseText, 'error');
// alert(jqXHR.responseText);
}
});
})
第一个代码是加载另一个视图的文件。在这个视图中我使用的是 swal 函数,但是这个函数不起作用。
答案 0 :(得分:2)
您可以根据您的要求下面的示例
来尝试此操作
$('.btn-sweet').on('click', function(){
swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
button: "Continue!",
});
});
.sweetBox {
background: linear-gradient(60deg,#00000024 50%,#00000047 50%);
margin: 0 auto;
height: 200px;
line-height: 200px;
text-align: center;
}
.btn-sweet {
background: linear-gradient(0deg,#000000eb,#000000a6);
border: 2px solid #000;
padding: 15px 25px;
text-transform: uppercase;
color: #eeeeeea8;
border-radius: 50px;
box-shadow: 0px 5px 25px #0000008c;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn-sweet:hover {
background: linear-gradient(0deg,#00000066,#00000000);
border: 2px solid #000;
padding: 15px 25px;
text-transform: uppercase;
color: #000000;
border-radius: 50px;
box-shadow: 0px 5px 25px #0000008c;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<div class="sweetBox">
<button type="button" class="btn btn-sweet">Click me to Sweet Allert</button>
</div>