androidnation androidnation - 4 years ago 76
Javascript Question

how to load a div only without loading all page files with it

I have this

AJAX
code, where it helps to insert some data into
MySQL
, and stay in the same page:

$(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();
});
});


I need to remove this line:

location.reload();


And replace it with a code that help me to refresh a
div
where I have an
HTML Table
that shows me, data inserted at the moment. Here is the code of this
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>


I tried some stackoverflow answered question about something called append, but nothing works (no errors shown in console).

Is their any code that let me load only this div every time I add data, without reloading all the page with all external files included in it like .css and other .js files ?

Answer Source

After analysing your question, I could say this would probably work out for you:

$("#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
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download