0

我有一个表单，我使用 ajaxSubmitButton 在 HTML 表中添加产品项目。ajaxSubmitButton 有助于使用 ajax 添加项目，ajax url 获取值并更新表的 body <tr>，<td>. 在表中，我想在每一行的最后一列中保留一个删除按钮。当我单击删除按钮时，应该删除一行。但是这里删除按钮不起作用。我已经在有效的视图中检查了硬编码的 HTML 表和 jquery。

在这种情况下，我该如何解决这个问题。请帮我。我在下面给出了表格和控制器的代码：

形式：

Yii::app()->clientScript->registerScript('removecartitem', "
$('#remove').click(function(){
$('#cartDetails tr:first').remove();
})
");
?>

<div class="form-group">
    <div class="col-lg-2">
    <?php
    // this is the ajax submit button
    echo CHtml::ajaxSubmitButton('Add Item',Yii::app()->createUrl('admin/order/cart'),
        array(
            'type'=>'POST',
            'update'=>'#cartTable',
        ),
        array('class'=>'btn btn-primary btn-sm',));
    ?>
    </div>        
</div>
<div class="form-group">
    <div class="col-lg-12">
                <table id="cartDetails" class="table table-bordered sortableTable responsive-table">

                    <tbody id="cartTable"> // ajax updates this id 
                    </tbody>
                </table>

    </div>

</div>

在控制器中：

public function actionCart()
{
    if(isset($_POST["Order"])){            
    .....
    ..... 
    $cartDetails = Yii::app()->session['cart'];
    if(!empty($cartDetails)){
        foreach($cartDetails as $cart){
            echo '<tr>';
            echo '<td>'.$cart["product_id"].'</td>';
            echo '<td>'.$cart["product_name"].'</td>';
            echo '<td>'.$cart["product_code"].'</td>';
            echo '<td>'.$cart["quantity"].'</td>';
            echo '<td>'.$cart["price"].'</td>';
            echo '<td>'.$cart["totalPrice"].'</td>';
            echo '<td><input type="button" name="add" id="remove" value="Remove" class="btn btn-danger btn-xs"/></td>';
            echo '</tr>';

        }
    }

}

在这个阶段，没有一个 jquery 工作。请帮助如何启用 jquery 然后如何激活删除按钮。如果我的解释不清楚，请告诉我。我添加了一张图片来解释更清楚。

在此处输入图像描述

4

2 回答 2

0

改变所以你有一个要删除的类，例如

public function actionCart()
{
    if(isset($_POST["Order"])){            
    .....
    ..... 
    $cartDetails = Yii::app()->session['cart'];
    if(!empty($cartDetails)){
        foreach($cartDetails as $cart){
            .
            .
            .
            echo '<td>'.$cart["totalPrice"].'</td>'; // see below line , class : REMOVETHIS
            echo '<td><input type="button" name="doesntMatter" class="REMOVETHIS btn btn-danger btn-xs"/></td>';
            .

        }
    }

}

然后在页面准备就绪时，单击将其删除

$(document).ready(function(){
    $('.REMOVETHIS').click(function(){
        $(this).parent().parent().remove();
    });
});

更新：

下面的代码只会删除表格的第一行，

$('#cartDetails tr:first').remove();

而且我猜即使这也行不通，因为需要在文档准备好后使用 jquery。喜欢 ：

$(document).raady(function(){
    //put jquery related code in here
});

就像我们的朋友说的，你不能用相同的 id 分配多个元素，因为你最好使用类，

在这种情况下，因为插入到表中的行是新的，您需要再次声明

    $('.REMOVETHIS').click(function(){
        $(this).parent().parent().remove();
    });

插入行后，或者您可以执行以下操作：

 echo '<td><input type="button" name="doesntMatter" class="btn btn-danger btn-xs" onclick="removeRow(this)"/></td>';

当单击该元素时，将调用 removeRow 函数

function removeRow(element)
{
    $(element).parent().parent().remove();
}
于 2013-11-06T13:14:13.927 回答
0

至于我如何解决我的问题：

我有一个订单，我从那里为注册人下订单。在订单表格中，有 3 个字段我选择注册，选择产品，然后选择数量。有一个 ajaxSubmitButton 将此值发送到控制器（actionCart）。控制器在会话中保存值，即产品ID、名称、价格、数量、总价，并将表格格式的ajax请求更新到订单。在 echoing 期间<tr>，<td>我添加了一个按钮来从会话中删除项目。所以，我想删除会话的值以及单击按钮后的表行。但是按钮不起作用，因为尽管我看到 jquery 已加载，但 jquery 不起作用。

我发现 ajax 更新的 HTML 不适用于之前加载的 jquery。所以我改变了在另一个视图文件中分离更新的 HTML 表（我在控制器中回显的内容）的策略，并在控制器中使用了 renderPartial。我将所需的 Jquery 片段注入到视图文件中。然后我发现 jquery 正在响应 ajax 请求的 HTML 标记。

现在我正在努力使用 jquery 和 ajax 取消设置会话数组和表行。

于 2013-11-06T17:45:37.700 回答