0

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

4

3 回答 3

0

您可能正在HTML从接收AJAX请求的 URL 中回显整个页面。这就是它引入一个全新页面并将其替换为$('#output'). 您可以发布接收AJAX请求的页面的代码吗？

于 2013-08-23T20:35:24.610 回答
0

您的 AJAX 请求将发送到 index.php。所以返回的数据是整个 index.php 页面。这就是为什么一切都在重复。

我建议创建另一个您的 ajax 代码正在调用的 PHP 文件，然后生成您想要在该 PHP 文件中返回的 HTML。

于 2013-08-23T20:36:37.337 回答
0

如果您将请求发送到同一页面，您应该检查它是否有 ajax 调用并为 html 的所需部分工作，这就是您得到的整个 htmlindex.php我建议您在 ajax 调用和顶部传递另一个参数你index.php检查电话

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();

}

编辑

对于每个类别，您都有带有 id 的价格 div，output因此 id 复制试试这个

 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);

       }
     });
 }
于 2013-08-23T20:44:19.973 回答