[英]How can I stop the page from reloading after I click on search button in my E-commerce site?
any Help would be much appreciated?任何帮助将非常感激?
The problem is that the search button does its function.问题是搜索按钮发挥了它的作用。 The page is supposed to only show products which match the keywords of the product and it does only shows the products which match the relevant keywords but it shows it for 0.1 ms and then reloads to show the full page.
该页面应该只显示与产品关键字匹配的产品,它只显示与相关关键字匹配的产品,但显示时间为 0.1 毫秒,然后重新加载以显示完整页面。 However, if I just click on a single category tab, Ie Bed/Sofa (in my case).
但是,如果我只单击一个类别选项卡,即床/沙发(就我而言)。 It just shows me the products which are beds or sofa and does not reload.
它只是向我展示了床或沙发的产品,并且不会重新加载。 This is the same thing I want for my search button.
这与我想要的搜索按钮相同。 Edit: I have tried
preventDefault
and it does not work Please see relevant code below:编辑:我尝试过
preventDefault
但它不起作用请参阅下面的相关代码:
index.php索引.php
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" id="search">
</div>
<button type="submit" class="btn btn-primary" id="search_btn"><span class="glyphicon glyphicon-search"></span></button>
</form>
action.php动作.php
if(isset($_POST["get_seleted_Category"]) || isset($_POST["selectBrand"]) || isset($_POST["search"])){
if(isset($_POST["get_seleted_Category"])){
$id = $_POST["cat_id"];
$sql = "SELECT * FROM products WHERE product_cat = '$id'";
}else if(isset($_POST["selectBrand"])){
$id = $_POST["brand_id"];
$sql = "SELECT * FROM products WHERE product_brand = '$id'";
}else {
$keyword = $_POST["keyword"];
$sql = "SELECT * FROM products WHERE product_keywords LIKE '%$keyword%'";
}
$run_query = mysqli_query($con,$sql);
while($row=mysqli_fetch_array($run_query)){
$pro_id = $row['product_id'];
$pro_cat = $row['product_cat'];
$pro_brand = $row['product_brand'];
$pro_title = $row['product_title'];
$pro_price = $row['product_price'];
$pro_image = $row['product_image'];
echo "
<div class='col-md-4'>
<div class='panel panel-info'>
<div class='panel-heading'>$pro_title</div>
<div class='panel-body'>
<img src='product_images/$pro_image' style='width:160px; height:250px;'/>
</div>
<div class='panel-heading'>$.$pro_price.00
<button pid='$pro_id' style='float:right;' id='product' class='btn btn-danger btn-xs'>AddToCart</button>
</div>
</div>
</div>
";
}
}
main.js主文件
$("#search_btn").click(function(){
$("#get_product").html("<h3>Loading...</h3>");
var keyword = $("#search").val();
if(keyword != ""){
$.ajax({
url : "action.php",
method : "POST",
data : {search:1,keyword:keyword},
success : function(data){
$("#get_product").html(data);
if($("body").width() < 480){
$("body").scrollTop(683);
}
}
})
}
})
You have mentioned button type as "submit".您已将按钮类型称为“提交”。 Make it as "button".
将其设为“按钮”。
<button type="button" class="btn btn-primary"
id="search_btn"><span class="glyphicon glyphicon-
search"></span></button>
make sure to execute the prevent default and also set the button as disabled so user cannot click again, on response receieve set the button back enabled确保执行阻止默认设置并将按钮设置为禁用,以便用户无法再次单击,在响应接收时将按钮设置回启用
$("#search_btn").click(function(e){
e.preventDefault();
$("#search_btn").attr("disabled", true);
$("#get_product").html("<h3>Loading...</h3>");
var keyword = $("#search").val();
if(keyword != ""){
$.ajax({
url : "action.php",
method : "POST",
data : {search:1,keyword:keyword},
success : function(data){
$("#get_product").html(data);
if($("body").width() < 480){
$("body").scrollTop(683);
}
$("#search_btn").attr("disabled", false);
}
})
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.