- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
问题背景:
我有一个带有购物车的 MVC4 项目,如图所示:
这使用 Touchspin.js 为用户提供一种方法来更新购物车中每件商品的购物车数量。输入包含增加或减少数量的选择器:
问题:
如果用户从购物车中删除了一个项目,我通过 ajax POST 请求将指定的项目 ID 发送到购物车 Controller 上的一个方法,该方法反过来将其从购物车项目列表中删除。完成后,项目列表将返回到 ajax 调用的 Success
函数,该函数构建列表项目的 html 行,然后将它们附加到购物车表。
问题是,当从成功调用重建购物车项目表时,我似乎丢失了 Touchspin 输入选择器 HTML。它在页面最初加载时使用相同的方法。此处显示格式不正确的 HTML 输入的图像,红色箭头表示缺少的选择器:
代码:
@{
Layout = "~/Views/Shared/MasterLayout.cshtml";
}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery.blImageCenter.js"></script>
<script src="~/Scripts/bootstrap.touchspin.js"></script>
<script src="~/Scripts/mimity.js"></script>
<h2>Cart</h2>
<br />
<table id="Table1" class="table table TableSection">
<thead>
<tr>
<td style="display:none;">id</td>
<td></td>
<td class="TableCell"><b>Item</b></td>
<td class="TableCell"><b>Brand</b></td>
<td class="TableCell"><b>Unit Price</b></td>
<td class="TableCell"><b>Quantity</b></td>
<td></td>
</tr>
</thead>
<tbody></tbody>
</table>
<input class="btn btn-success btn-block updateCart" type="button" value="Update Cart" />
@Html.Partial("_ViewCartContents")
<div class="PaymentButtons">
<div class="row">
<div class="col-sm-4">
<input class="btn btn-success btn-block updateCart" type="button" value="PayPal" onclick="location.href='@Url.Action("Index", "PayPalExpress")'" />
</div>
<div class="col-sm-4 pull-left">
<input class="btn btn-success btn-block updateCart" type="button" value="Card Payment" onclick="location.href='@Url.Action("ShippingDetails", "PayPalDirectPayment")'" />
</div>
</div>
</div>
</script>
AddRows
用于构建购物车项目列表中每个项目的行。这是附加到购物车表体。
<script type="text/javascript">
var AddRows = function (productId, productImage, productName, productBrand, productPrice, productQty) {
var button = '<input class="btn btn-primary btn-block deleteItem" type="button" value="Remove"/>';
var image = '<img src="/Images/' + productImage + '" class="productCartImage"/>';
var selectors = '<input id="demo1" type="text" value="' + productQty + '" name="demo1">';
var $html = $('<tr class="item">' +
'<td class="prodId" style="display:none;">' + productId + '</td>' +
'<td class="prodImage hidden-xs">' + image + '</td>' +
'<td class="prodName">' + productName + '</td>' +
'<td class="prodBrand">' + productBrand + '</td>' +
'<td class="prodPrice"> £' + productPrice + '</td>' +
'<td class="prodQty TableCell">' + selectors + '</td>' +
'<td>' + button + '</td>' +
'</tr>');
$('#Table1 > tbody:last').append($html);
};
</script>
@foreach (var cartItem in (List<LoginTest.Models.CartItem>)ViewBag.Data)
{
<script>
var cartItemId = '@cartItem.CartItemId';
var cartImage = '@cartItem.CartItemImage';
var cartItemName = '@cartItem.CartItemName';
var cartBrand = '@cartItem.CartItemBrand';
var cartItemPrice = '@cartItem.CartItemPrice';
var cartItemCartItemQty = '@cartItem.CartItemQty';
AddRows(cartItemId, cartImage, cartItemName, cartBrand, cartItemPrice, cartItemCartItemQty);
</script>
}
Delete 函数用于删除指定的购物车商品,然后在 Success 方法中使用 AddRows 方法重建购物车商品。
$(".deleteItem").click(function () {
var $row = $(this).closest("tr");
var $text = $row.find(".prodId").text();
$.ajax({
url: '@Url.Action("RemoveCartItem")',
type: 'POST',
data: {
"id": $text
},
success: function (cartItems) {
$('#Table1 > tbody:last').empty();
$.each(cartItems.cartList, function (i, item) {
AddRows(item.CartItemId, item.CartItemImage, item.CartItemName, item.CartItemBrand, item.CartItemPrice, item.CartItemQty);
});
}
});
});
</script>
TouchSpin 输入选择器设置值。
<script>
$("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
</script>
最佳答案
每次将它动态添加到 DOM
时,都必须将 Touchspin
API 添加到名称为 demo1
的输入元素。
有多种方法可以将 API 绑定(bind)到动态加载的内容上
Method 1
您可以在将 $html
附加到 $('#Table1 > tbody:最后')
AddRows
函数的结尾应该是这样的
/*....Addrows funcion....*/
$html.find("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
$('#Table1 > tbody:last').append($html);
};
Method 2
您可以在 $.each
函数之后的成功函数中调用 demo1
上的 Touchspin
。所以你的 success
函数变成了
success: function (cartItems) {
$('#Table1 > tbody:last').empty();
$.each(cartItems.cartList, function (i, item) {
AddRows(item.CartItemId, item.CartItemImage, item.CartItemName, item.CartItemBrand, item.CartItemPrice, item.CartItemQty);
});
$("input[name='demo1']").TouchSpin({
min: 1,
max: 100,
step: 1,
});
}
但是,您的代码需要重构,正如 Ste-fu 在评论中提到的那样,因此您可以返回 1 或 0(或一些文本来区分某些错误或 OK 响应)如果 response 表示该项目已被删除,那么您从 DOM
中删除 $row
,在这种情况下,您的成功功能将变成这样
success: function (status) {
if(status==1)//means that item is removed from database then
$row.remove(); //remove the closest row to the clicked element
}
关于javascript - 在 ajax 调用后更新 HTML 表数据后输入选择器丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29661507/
初学者 android 问题。好的,我已经成功写入文件。例如。 //获取文件名 String filename = getResources().getString(R.string.filename
我已经将相同的图像保存到/data/data/mypackage/img/中,现在我想显示这个全屏,我曾尝试使用 ACTION_VIEW 来显示 android 标准程序,但它不是从/data/dat
我正在使用Xcode 9,Swift 4。 我正在尝试使用以下代码从URL在ImageView中显示图像: func getImageFromUrl(sourceUrl: String) -> UII
我的 Ubuntu 安装 genymotion 有问题。主要是我无法调试我的数据库,因为通过 eclipse 中的 DBMS 和 shell 中的 adb 我无法查看/data/文件夹的内容。没有显示
我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。 这是我的 html -- {% for x in sets %}
我观察到两种方法的结果不同。为什么是这样?我知道 lm 上发生了什么,但无法弄清楚 tslm 上发生了什么。 > library(forecast) > set.seed(2) > tts lm(t
我不确定为什么会这样!我有一个由 spring data elasticsearch 和 spring data jpa 使用的类,但是当我尝试运行我的应用程序时出现错误。 Error creatin
在 this vega 图表,如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令, jq -r '(map(keys) | add | unique) as
我正在提交一个项目,我必须在其中创建一个带有表的 mysql 数据库。一切都在我这边进行,所以我只想检查如何将我所有的压缩文件发送给使用不同计算机的人。基本上,我如何为另一台计算机创建我的数据库文件,
我有一个应用程序可以将文本文件写入内部存储。我想仔细看看我的电脑。 我运行了 Toast.makeText 来显示路径,它说:/数据/数据/我的包 但是当我转到 Android Studio 的 An
我喜欢使用 Genymotion 模拟器以如此出色的速度加载 Android。它有非常好的速度,但仍然有一些不稳定的性能。 如何从 Eclipse 中的文件资源管理器访问 Genymotion 模拟器
我需要更改 Silverlight 中文本框的格式。数据通过 MVVM 绑定(bind)。 例如,有一个 int 属性,我将 1 添加到 setter 中的值并调用 OnPropertyChanged
我想向 Youtube Data API 提出请求,但我不需要访问任何用户信息。我只想浏览公共(public)视频并根据搜索词显示视频。 我可以在未经授权的情况下这样做吗? 最佳答案 YouTube
我已经设置了一个 Twilio 应用程序,我想向人们发送更新,但我不想回复单个文本。我只是想让他们在有问题时打电话。我一切正常,但我想在发送文本时显示传入文本,以确保我不会错过任何问题。我正在使用 p
我有一个带有表单的网站(目前它是纯 HTML,但我们正在切换到 JQuery)。流程是这样的: 接受用户的输入 --- 5 个整数 通过 REST 调用网络服务 在服务器端运行一些计算...并生成一个
假设我们有一个名为 configuration.js 的文件,当我们查看内部时,我们会看到: 'use strict'; var profile = { "project": "%Projec
这部分是对 Previous Question 的扩展我的: 我现在可以从我的 CI Controller 成功返回 JSON 数据,它返回: {"results":[{"id":"1","Sourc
有什么有效的方法可以删除 ios 中 CBL 的所有文档存储?我对此有疑问,或者,如果有人知道如何从本质上使该应用程序像刚刚安装一样,那也会非常有帮助。我们正在努力确保我们的注销实际上将应用程序设置为
我有一个 Rails 应用程序,它与其他 Rails 应用程序通信以进行数据插入。我使用 jQuery $.post 方法进行数据插入。对于插入,我的其他 Rails 应用程序显示 200 OK。但在
我正在为服务于发布请求的 API 调用运行单元测试。我正在传递请求正文,并且必须将响应作为帐户数据返回。但我只收到断言错误 注意:数据是从 Azure 中获取的 spec.js const accou
我是一名优秀的程序员,十分优秀!