我有这个AJAX
代码,有助于将一些数据插入MySQL
,并保留在同一页面中:
$(function(){
$("#form1").on("submit", function (e){
console.log("Form is submitted");
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize() + "&insert=yes",
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
} //<--------------------------------------- You missed this
});
e.preventDefault();
//location.reload();
});
$("#insert").on("click", function (e){
console.log("Insert Key is clicked");
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize() + "&insert=yes",
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
} //<--------------------------------------- You missed this
});
e.preventDefault();
location.reload();
});
});
我需要删除此行:
location.reload();
并将其替换为帮助我刷新div
的代码,其中HTML Table
显示了我,此时插入了数据。以下是此div
的代码:
<div id="section2">
<table class="imagetable" border="1" cellspacing="2" cellpadding="2">
<tr>
<th colspan="5" bgcolor="#666666">المبيعات</th>
</tr>
<th width="15%">النوع</th>
<th width="35%">Alfa/Touch</th>
<th width="25%">المبلغ</th>
<th width="25%">رقم الفاتورة (OMT, Alfa ...)</th>
<th width="25%">العملة</th>
<form name="insertForm" action="insert.php" method="post" id="form1">
<tr>
<td align="center">
<select id="selectW" name="type">
<option value="لم يتم التحديد">اختر النوع</option>
<option value="دولارات">دولارات</option>
<option value="أيام + دولارات">أيام + دولارات</option>
<option value="بطاقات">بطاقات</option>
<option value="هواتف">هواتف</option>
<option value="اكسسوارات">اكسسوارات</option>
<option value="تسديد فواتير">تسديد فواتير</option>
</select>
<!--<select>
<?php foreach($result5 as $rows){ ?>
<option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option>
<?php } ?>
</select>-->
</td>
<td align="center"><select id="select_at" name="alfa_touch">
<option value="غير محدد">Not Required</option>
<option value="Alfa">Alfa</option>
<option value="Touch">Touch</option></select></td>
<td align="center"><input type="text" id="pay" name="pay"/></td>
<td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td>
<td align="center"><select id="select" name="currency">
<option value="9">ليرة</option>
<option value="10">دولار</option>
</select></td>
<td align="center"><input type="submit" id="insert" name="insert" value="اضافة" />
</td>
</tr>
</form>
<?php
$sum = 0;
$selectAll = "SELECT * FROM sales WHERE date_now = :date ORDER BY date_now DESC, time_now DESC";
$stmtAll=$conn->prepare($selectAll);
$stmtAll->bindValue(':date', date("y-m-d"));
$execAll=$stmtAll->execute();
$result=$stmtAll->fetchAll();
?>
<?php foreach($result as $rows){
$sum = $sum + $rows['pay'];
//var_Dump($rows) ?>
<tr>
<td height="30" align="center"><?php echo $rows['type'] ?></td>
<td align="center"><?php echo $rows['provider'] ?></td>
<td align="center" dir="ltr"><?php echo (number_format($rows['pay'], 0, ',', ' ')). ' L.L'?></td>
<td align="center"><?php echo $rows['facture'] ?></td>
<td align="center"><form action='delete.php' method="post">
<input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" />
<input class="imgClass_dell" type="submit" onclick="return confirm('هل أنت متأكد؟')" name="delete_sales" value="" />
</form></td>
</tr>
<?php } ?>
<tr>
<th colspan="4" align="center" bgcolor="#666666">المجموع</th>
<td dir="ltr" bgcolor="#666666" align="center"><?php
echo ($sum = number_format($sum, 0, ',', ' ')). ' L.L';
?></td>
</tr>
</table>
</div>
我尝试了一些stackoverflow回答有关append的问题,但没有任何作用(控制台中没有显示错误)。
他们的任何代码是否允许我每次添加数据时只加载此div,而不重新加载包含在其中的所有外部文件的所有页面,如.css和其他.js文件?
答案 0 :(得分:0)
你需要这个......最终......
$(function(){
$("#form1").on("submit", function (e){
console.log("Form is submitted");
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize() + "&insert=yes",
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
} //<--------------------------------------- You missed this
});
e.preventDefault();
//location.reload();
});
$("#insert").on("click", function (e){
console.log("Insert Key is clicked");
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize() + "&insert=yes",
dataType: 'json',
success: function(data) {
alert($('#form1').serialize());
} //<--------------------------------------- You missed this
});
e.preventDefault();
$('#YourDivId').append('<div id="section2"><table class="imagetable" border="1" cellspacing="2" cellpadding="2"><tr><th colspan="5" bgcolor="#666666">المبيعات</th></tr><th width="15%">النوع</th><th width="35%">Alfa/Touch</th><th width="25%">المبلغ</th><th width="25%">رقم الفاتورة (OMT, Alfa ...)</th><th width="25%">العملة</th><form name="insertForm" action="insert.php" method="post" id="form1"><tr><td align="center"><select id="selectW" name="type"><option value="لم يتم التحديد">اختر النوع</option><option value="دولارات">دولارات</option><option value="أيام + دولارات">أيام + دولارات</option><option value="بطاقات">بطاقات</option><option value="هواتف">هواتف</option><option value="اكسسوارات">اكسسوارات</option><option value="تسديد فواتير">تسديد فواتير</option></select><?php foreach($result5 as $rows){ ?><option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option><?php } ?></td><td align="center"><select id="select_at" name="alfa_touch"><option value="غير محدد">Not Required</option><option value="Alfa">Alfa</option><option value="Touch">Touch</option></select></td><td align="center"><input type="text" id="pay" name="pay"/></td><td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td><td align="center"><select id="select" name="currency"><option value="9">ليرة</option><option value="10">دولار</option></select></td><td align="center"><input type="submit" id="insert" name="insert" value="اضافة" /></td></tr></form> <?php $sum = 0;$selectAll = "SELECT * FROM sales WHERE date_now = :date ORDER BY date_now DESC, time_now DESC"; $stmtAll=$conn->prepare($selectAll); $stmtAll->bindValue(':date', date("y-m-d")); $execAll=$stmtAll->execute(); $result=$stmtAll->fetchAll();?><?php foreach($result as $rows){$sum = $sum + $rows['pay'];//var_Dump($rows) ?><tr><td height="30" align="center"><?php echo $rows['type'] ?></td><td align="center"><?php echo $rows['provider'] ?></td><td align="center" dir="ltr"><?php echo (number_format($rows['pay'], 0, ',', ' ')). ' L.L'?></td><td align="center"><?php echo $rows['facture'] ?></td><td align="center"><form action='delete.php' method="post"><input type="hidden" name="rowid" value="<?php echo $rows['id'] ?>" /><input class="imgClass_dell" type="submit" onclick="return confirm('هل أنت متأكد؟')" name="delete_sales" value="" /></form></td></tr><?php } ?><tr><th colspan="4" align="center" bgcolor="#666666">المجموع</th><td dir="ltr" bgcolor="#666666" align="center"><?php echo ($sum = number_format($sum, 0, ',', ' ')). ' L.L';?></td></tr></table></div>');
});
});
但是......你需要一次输入一个表元素..直到代码中断。
所以我从
开始 $('#YourDivId').append('<div id="section2">');
测试它。
然后
$('#YourDivId').append('<div id="section2"><table class="imagetable" border="1" cellspacing="2" cellpadding="2">');
测试它。
等等,等等......
答案 1 :(得分:0)
在分析了你的问题后,我可以说这可能对你有用:
$("#insert").on("click", function (e){
$this = $(this)
$.ajax({
url: 'insert.php',
type: 'post',
data: $('#form1').serialize() + "&insert=yes",
dataType: 'json',
success: function(data) {
$this.closest("tr").after('<td height="30" align="center">' +
$('[name=""]').val() + '</td>' +
'<td align="center">' + $('[name="selectW"]').val() + '</td>' +
'<td align="center" dir="ltr">' + $('[name="alfa_touch"]').val() + '</td>' +
'<td align="center">' + $('[name="pay"]').val() + '</td>' +
'<td align="center"><form action="delete.php" method="post"><input type="hidden" name="rowid" value="" /><input class="imgClass_dell" type="submit" onclick="return confirm(\'هل أنت متأكد؟\')" name="delete_sales" value="" /></form></td>');
}
});
e.preventDefault();
// location.reload(); // remove this
});