Change of div in the same page without refresh

Question

In one of my pages, I have an <a> tag. When I click it, I am passing the variable as a GET parameter and retrieving it in the same page and displaying the details.

The code to get the parameters:

  if(isset($_GET['CatId']))
{   
$CatId= $_GET['CatId'];
}
else $CatId=0;
if(isset($_GET['MainProductId']))
{   
$MainProductId= $_GET['MainProductId'];
$FilterAllProductQuery ="WHERE Product.MainProductId = '$MainProductId'";
$FilterProductQuery = "AND Product.MainProductId = '$MainProductId'";
}
else 
{
    $MainProductId=0;
    $FilterAllProductQuery="";
    $FilterProductQuery="";
}

The <a> tag:

<a href='Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>' ><?php echo $row["MainProdName"] ?></a>

The details to be displayed:

 if($CatId == 0)
                {$sql = "SELECT  *,Product.Id AS ProdId, Product.Name as ProdName  FROM Product $FilterAllProductQuery ";}
                else 
                {$sql = "SELECT  * ,Product.Id AS ProdId, Product.Name as ProdName FROM Product  INNER JOIN MainProduct ON MainProduct.Id = Product.MainProductId 
INNER JOIN Category ON Category.Id = MainProduct.CategoryId WHERE Category.Id = '$CatId' $FilterProductQuery ";}
   $result1 = $dbcon->query($sql);
                if ($result1->num_rows > 0) {
                    while ($row = $result1->fetch_assoc()) {
                        $id = $row["ProdId"];

                        // $image=$row["ImagePath1"];
                        $qty = $row["Quantity"];
                        ?>
              <li class="col-lg-4">
                <div class="product-box">
              <span class="sale_tag"></span>
            <div class="row">
  <img src='themes/images/<?php echo $row["ImagePath1"]; ?>'  height='200' width='250'> </a></div></div></li>

Now the code is working fine, but what's happening is that when I click the <a> tag, as I am passing the get parameters, the page is refreshing. As all the code are on the same page, I don't want the page to be refreshed. For that, I need to use Ajax request. How can I do that?

you can take reference from http://api.jquery.com/jquery.ajax/ — Super User, May 26 '17 at 06:53
I'm not super sure - since I'm not a php guy - but using #! in the should stop the page refresh — Phugo, May 26 '17 at 06:53
possible duplicate https://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function — Super User, May 26 '17 at 06:54
Possible duplicate of [using jquery $.ajax to call a PHP function](https://stackoverflow.com/questions/2269307/using-jquery-ajax-to-call-a-php-function) — Super User, May 26 '17 at 06:55
https://stackoverflow.com/questions/42634309/ajax-post-how-to-use-a-js-variable-in-php/42635488#42635488 — Shafiqul Islam, May 26 '17 at 06:57
...geez I was mostly done retabbing this mess and it bumped me out because two other people had edited it. Please do complete edits if you are going to bother. — mickmackusa, May 26 '17 at 07:39

score 0 · Answer 1 · answered May 26 '17 at 07:06

I would make an onclick() event on the a tag like so:

<?php echo '<a c_id="'.$CatId.'" MainProductId="'.$id.'" onclick="sendProduct()">'.$row["MainProdName"].'</a>';

Afterwards i would in a .js file write a simple function called sendProduct() and inside i would do an ajax request to a page named ex: insertproduct.php, get the information back and Insertproduct.php would process the data and you could use .html() or .append() to assign the data to the div showing the data with a normal id.

The c_id, MainProductId are custom attributes you could recieve in the .js file as $("#youraTag").attr("c_id");

There's a really good guide here on basic ajax: https://www.youtube.com/watch?v=_XBeGcczFJo&list=PLQj6bHfDUS-b5EXUbHVQ21N_2Vli39w0k&index=3&t=1023s

score 0 · Answer 2 · answered May 26 '17 at 07:07

First you have to remove the href of the link and give it an id.

<a id='link'>
    <?php echo $row["MainProdName"] ?>
</a>

Then you put this jQuery into your page. Note, you need to have a div in which you are going to put in all your obtained results. I reffered to this div in the code as #mydiv.

$("#link").click(function(){
    $("#mydiv").load("Products.php?CatId=<?php echo $CatId;?>&MainProductId=<?php echo $id;?>");
});

Change of div in the same page without refresh

2 Answers2