为什么 Ajax 和 SweetAlert 不显示?
Why Doesn't Ajax and SweetAlert Show?
请帮助我,在我的代码中,Ajax 和 SweetAlert 完美运行,但现在我在按提交时收到错误消息:
Google chrome 控制台显示以下错误:
Resource interpreted as Stylesheet but transferred with MIME type
application/javascript:
"http://localhost:8000/js/jquery-3.3.1.min.js".
非常感谢任何帮助。
代码
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var id1 ={!! $data !!};
var hasil;
var saldo ={{$results}};
$('#jumlahUang').keyup(function () {
var yeah1 = parseInt($('#jumlahUang').val());
var yeah = parseInt($('#jenisTransaksi').val());
if (yeah == 1) {
hasil = saldo + yeah1;
} else {
hasil = saldo - yeah1;
}
if (hasil < 0) {
swal("Error", "SALDO ANDA KURANG");
} else {
$('#debugg').val(hasil);
}
});
$('#formInput').submit(function (e) {
e.preventDefault();
var id1 ={!! $data !!};
var link = "/nambahTransaksi/" + id1.id;
swal({
title: "Konfirmasi transaksi",
text: "proses transaksi?",
type: "info",
showCancelButton: true,
confirmButtonColor: "#1da1f2",
confirmButtonText: "Yakin, dong!",
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function () { //apabila sweet alert d confirm maka akan mengirim data ke simpan.php melalui proses ajax
$.ajax({
url: link,// ini salah anjing
type: 'get',
data: $('#formInput').serialize(), //serialize() untuk mengambil semua data di dalam form
dataType: "HTML",
success: function () {
setTimeout(function () {
swal({
title: "transaksi berhasil dilakukan",
text: "Terimakasih",
type: "success"
}, function () {
window.location.href = "/detailTransaksi";
});
}, 2000);
},
error: function (xhr, ajaxOptions, thrownError) {
setTimeout(function () {
swal("Error", "Tolong cek kembali SALDO anda");
}, 2000);
}
});
});
});
})
</script>
您将此行设置为样式表,但它实际上是一个 .js 文件。
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
尝试使用:
<script src="{!! asset('js/jquery-3.3.1.min.js') !!}"></script>
此外,为什么要包含两次 JQuery?只需将您的第二个声明移到顶部,上面写着:
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
需要在添加SweetAlert之前声明,因为SweetAlert依赖于它。
编辑:这只是部分答案。除此之外,OP 还有另一个问题。但是,我想保留它,因为它对解决他的问题的第 1 部分很有用。
你必须使用这个 js 文件,我希望它对你有用。
<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
例子
$("#sub").click(function() {
var startDate = $('#fromDate').val();
var endDate = $('#toDate').val();
if (startDate !='')
{
if(endDate == '')
{
swal("Error!", "Please Select To Date field", "error");
return false;
}
}
else
{
swal("Error!", "Please Select From Date field", "error");
return false;
}
if(startDate > endDate)
{
//alert("Please Select To Date Grater Than"+startDate);
swal("Error!", "Please Select To Date Grater Than "+startDate, "error");
return false;
} });
请帮助我,在我的代码中,Ajax 和 SweetAlert 完美运行,但现在我在按提交时收到错误消息:
Google chrome 控制台显示以下错误:
Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:8000/js/jquery-3.3.1.min.js".
非常感谢任何帮助。
代码
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var id1 ={!! $data !!};
var hasil;
var saldo ={{$results}};
$('#jumlahUang').keyup(function () {
var yeah1 = parseInt($('#jumlahUang').val());
var yeah = parseInt($('#jenisTransaksi').val());
if (yeah == 1) {
hasil = saldo + yeah1;
} else {
hasil = saldo - yeah1;
}
if (hasil < 0) {
swal("Error", "SALDO ANDA KURANG");
} else {
$('#debugg').val(hasil);
}
});
$('#formInput').submit(function (e) {
e.preventDefault();
var id1 ={!! $data !!};
var link = "/nambahTransaksi/" + id1.id;
swal({
title: "Konfirmasi transaksi",
text: "proses transaksi?",
type: "info",
showCancelButton: true,
confirmButtonColor: "#1da1f2",
confirmButtonText: "Yakin, dong!",
closeOnConfirm: false,
showLoaderOnConfirm: true,
}, function () { //apabila sweet alert d confirm maka akan mengirim data ke simpan.php melalui proses ajax
$.ajax({
url: link,// ini salah anjing
type: 'get',
data: $('#formInput').serialize(), //serialize() untuk mengambil semua data di dalam form
dataType: "HTML",
success: function () {
setTimeout(function () {
swal({
title: "transaksi berhasil dilakukan",
text: "Terimakasih",
type: "success"
}, function () {
window.location.href = "/detailTransaksi";
});
}, 2000);
},
error: function (xhr, ajaxOptions, thrownError) {
setTimeout(function () {
swal("Error", "Tolong cek kembali SALDO anda");
}, 2000);
}
});
});
});
})
</script>
您将此行设置为样式表,但它实际上是一个 .js 文件。
<link rel="stylesheet" type="text/css" href="{!! asset('js/jquery-3.3.1.min.js') !!}">
尝试使用:
<script src="{!! asset('js/jquery-3.3.1.min.js') !!}"></script>
此外,为什么要包含两次 JQuery?只需将您的第二个声明移到顶部,上面写着:
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
需要在添加SweetAlert之前声明,因为SweetAlert依赖于它。
编辑:这只是部分答案。除此之外,OP 还有另一个问题。但是,我想保留它,因为它对解决他的问题的第 1 部分很有用。
你必须使用这个 js 文件,我希望它对你有用。
<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
例子
$("#sub").click(function() {
var startDate = $('#fromDate').val();
var endDate = $('#toDate').val();
if (startDate !='')
{
if(endDate == '')
{
swal("Error!", "Please Select To Date field", "error");
return false;
}
}
else
{
swal("Error!", "Please Select From Date field", "error");
return false;
}
if(startDate > endDate)
{
//alert("Please Select To Date Grater Than"+startDate);
swal("Error!", "Please Select To Date Grater Than "+startDate, "error");
return false;
} });