PHP MySQL jQuery / AJAX问题

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...

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?

Your AJAX request is going to index.php. So the data that's coming back is the whole index.php page. That's why everything is getting repeated.

I would recommend creating another PHP file that your ajax code is calling and just generate the HTML you want to return in that PHP file.

If you are sending request to the same page you should check it for the ajax call and work for the desired part of html this is what you got the whole html of your index.php i recommend you to pass another parameter in ajax call and on the top of you index.php check for the call

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

       }
     });
 }

index.php

if($_REQUEST['ajax_call']){
$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++;
    }
die();

}

EDIT

For each category you have price div with id output therefore the id duplicating try this

 foreach($products->fetch_products($id) as $product)
    {
        $price = $product->price;
    echo"<option value = $product->id onclick=\"UpdateRecord($product->id,$data->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-$data->id\"><p>$pricer->price</p></div>");
    echo"</center>";
    echo"</td>";
    $i++;
    }

JS

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

       }
     });
 }