PHP MySQL jQuery / AJAX问题

Question

I have problem with jQuery.

This is my jQuery code:

function UpdateRecord(id)
  {
      jQuery.ajax({
       type: "GET",
       url: "index.php",
       data: 'id='+id,
       cache: true,
       success: function(data)
       {
         $('#output').html(data);

       }
     });
 }

UpdateRecord(id) get data from here :

echo"<select>";
    foreach($products->fetch_products($id) as $product)
    {
        $price = $product->price;
     echo"<option value = $product->id onclick=\"UpdateRecord($product->id)\">$product->p_name</option>";
    }
    echo"</select>";

This is piece of the HTML and php code where new result should be <div id="output"></div> :

$i = 0;
    foreach($products->fetch_products($id) as $pricer){
    if ($i==1) break;    
    echo"<td>";
    echo"<center>";
    echo("<div id=\"output\"><p>$pricer->price</p></div>");
    echo"</center>";
    echo"</td>";
    $i++;
    }

And finally this is the PHP function which return the price :

public function update_price($id){

        $stmt = $this->connect()->prepare("SELECT `price` FROM `products` WHERE id=?");

        $stmt->bindValue(1,$id);

        $stmt->execute();

        $row = $stmt->fetchAll(PDO::FETCH_OBJ);

         //echo json_encode($row);

         foreach($row as $data){

            echo $data->price;

         }
}

I tested my PHP function and it's working properly.

The problem is when I click on my dropdwon list and choose product the whole table is repeating aggain in "Price" field like this :

Normal :

http://i44.tinypic.com/34473mp.jpg

Problem :

http://i43.tinypic.com/3449xmw.jpg

EDIT

This the table :

<tbody>

<?php




foreach($category->fetch_category() as $data){

    $id = $data->id;

    echo"<tr>";
    echo"<td>";
    echo"<center>";
    echo"<input type=\"hidden\" value=\"$data->id\" />";
    echo"<p><strong>".$data->cat_name."</strong></p>";
    echo"</center>";
    echo"</td>";
    echo"<td>";
    echo"<center>";

    echo"<select>";
    foreach($products->fetch_products($id) as $product)
    {
        $price = $product->price;
    echo"<option value = $product->id onclick=\"UpdateRecord($product->id)\">$product->p_name</option>";
    }
    echo"</select>";

    echo"</center>";
    echo"</td>";

    echo"<td>";
    echo"<center>";
    echo"<input class=\"input-mini\" type=\"text\" value=\"1\"/>";
    echo"</center>";
    echo"</td>";
    $i = 0;
    foreach($products->fetch_products($id) as $pricer){
    if ($i==1) break;    

    echo"<td id=\"$pricer->category_id\">";

    echo"<center>";
    echo("<div id=\"output\"><p>$pricer->price</p></div>");
    echo"</center>";
    echo"</td>";
    $i++;
    }
    echo"</tr>";
}

?>
<tr>
<td></td>
<td></td>
<td></td>
<td>Total: </td>
</tr>

</tbody>

Thanks in advance ! I am trying to fix this for whole day...

Answer 1

You are possibly echoing the entire HTML Page from the URL that receives the AJAX request. That is the reason it is bringing in a whole new page and fitting it in the place of $('#output'). Can you post the Code of the page that is receiving the AJAX request?