Alex Parser Alex Parser - 3 months ago 9
jQuery Question

Form isn't resubmitting

I have this form on search.php that sends data to test.php

search.php

<form method="POST" id="searchForm">
<div align="center"><input id="search" placeholder="Please enter product name eg. GTX 980, R9 390" type="text" name="search" class="form-control"/>
<br>
</form>
<div id="divPakdukaan"></div>


And JS

function sendMyAjax(URL_address){
$.ajax({
type: 'POST',
url: URL_address,
data: $("#searchForm").serialize(),
success: function (data) {
$('#divPakdukaan').replaceWith(data);}
});
};
$(document).on('submit','#searchForm',function(e) {
$('#mainContainer').hide();
e.preventDefault();
sendMyAjax('test.php'); });


When I first time submits form it sends data to test.php and in test.php data is received and table is created and then that table is shown in search.php but when I reenter something else and submits table doesn't change result doesn't change

Here is test.php

<?php
$name=$_POST['search'];
$trimmedName = strtoupper(trim($name));

$pakdukaanQuery = preg_replace('/\s+/','+', $trimmedName);

function pakdukaanExtractor($pakdukaanSearch){
$pakdukaanHtml = file_get_contents('http://www.pakdukaan.com/index.php?fc=module&module=leoproductsearch&controller=productsearch&orderby=position&orderway=desc&cate=&search_query='.$pakdukaanSearch);
$pakdukaanDoc = new DOMDocument();
libxml_use_internal_errors(TRUE);
if(!empty($pakdukaanHtml)){
$pakdukaanDoc->loadHTML($pakdukaanHtml);
libxml_clear_errors();
$pakdukaanXPath = new DOMXPath($pakdukaanDoc);

//PakDukaan
$pdrow = $pakdukaanXPath->query('//h5[@class="name"]');
$pdrow2 = $pakdukaanXPath->query('(//span[@class="price product-price"])');
$pdrow3 = $pakdukaanXPath->query('(//div[@class="product-container product-block"]//div[@class="left-block"]//div[@class="product-image-container image"]//a[@class="product_img_link"])//@href');
$pdrow4 = $pakdukaanXPath->query('//div[@class="product-container product-block"]//div[@class="left-block"]//div[@class="product-image-container image"]//img[@class="replace-2x img-responsive"]//@src');

//PakDukaan
if($pdrow->length > 0){
$rowpd = array();
foreach($pdrow as $rpd){
$rowpd[]= $rpd->nodeValue;
//echo $rpd->nodeValue . "<br/>";
}
}
if($pdrow2->length > 0){
$row2pd_not = $row2pd_optimized = $row2even = array();
foreach($pdrow2 as $rpd2_not){
$row2pd_not[]= $rpd2_not->nodeValue;
//echo $rpd2_not->nodeValue . "<br/>";
}
$count=1;
foreach($row2pd_not as $val)
{
if($count%2==1)
{
$row2pd_optimized[]=$val;
}
else
{
$row2even[]=$val;
}
$count++;
}
}
if($pdrow3->length > 0){
$row3pd = array();
foreach($pdrow3 as $rpd3){
$row3pd[]=$rpd3->nodeValue;
//echo $rpd3->nodeValue . "<br/>";
}
}
if($pdrow4->length > 0){
$row4pd = array();
foreach($pdrow4 as $rpd4){
$row4pd[]=$rpd4->nodeValue;
//echo $rpd4->nodeValue . "<br/>";
}
}
$pdchecker = count($rowpd);
if($pdchecker != 0) {
$pakdukaan = array();
for($i=0; $i < count($rowpd); $i++){
$pakdukaan[$i] = [
'name'=>$rowpd[$i],
'price'=>$row2pd_optimized[$i],
'link'=>$row3pd[$i],
'image'=>$row4pd[$i]
];
}
}
else{
echo "no result found at pakdukaan";
}
}
return $pakdukaan;
}
$pakdukaan = pakdukaanExtractor($pakdukaanQuery);
?>
<div class="container">

<div class="col-xs-6 col-sm-3" style="width:330px;">
<h3 style="color:white;">PakDukaan</h3>
<?php foreach($pakdukaan as $a => $pd){ ?>
<div class="row row-list well" style="height:130px;">
<table id="pakdukaanTable">
<tr><td><font size="2"><?php echo $pd['name'] ?></font></td></tr>
<tr>
<td><font size="2"><?php echo $pd['price'] ?></font></td>
<td align="right"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pakdukaanModal<?php echo $a ?>">Details</button></td>
</tr>
</table>
<div class="container">
<div id="pakdukaanModal<?php echo $a ?>" class="reveal-modal modal fade" role="dialog" data-reveal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<table class='table table-hover table-responsive' width='21'>
<tr>
<td><img src="<?php echo preg_replace('/\s+/', '%20',$pd['image'])?>" class="img-thumbnail" alt="Cinque Terre" width="200" height="100" /></td>
<td class="parent">
<h3>PakDukaan</h3>
<table>
<tr>
<td class="child"><a target="_blank" class="btn btn-primary" href="<?php echo $pd['link']?>">Buy</a></td>
<td class="child"><a target="_blank" class="btn btn-primary" href="http://www.pakdukaan.com/">Visit Site</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><font size="2">Name: <?php echo $pd['name']?></font></td>
</tr>
<tr>
<td><font size="2">Price: <?php echo $pd['price']?></font></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>

Answer

You replace your div:

Rewrite this:

$('#divPakdukaan').replaceWith(data);

to this:

$('#divPakdukaan').html(data);