[英]Changing a link text with jQuery / ASP.NET not working immediately
我在使用jQuery更改链接文本的asp.net中的代码遇到问题。 奇怪的是:我必须单击四次才能正常工作,然后我的链接会更改。 谁能告诉我这种奇怪行为的原因是什么? 有缓存问题吗?
这是我在asp.net中的代码:
<asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" RowStyle-CssClass="aspBoundField" Width="100%">
<Columns>
<asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Lieferant">
<ItemTemplate>
<a href="javascript:void(0)" class="linkfield" id="surveyListSupplierLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Lieferant.Name") %></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Fragebogenkatalog">
<ItemTemplate>
<a href="javascript:void(0)" class="linkfield" id="surveyListCatalogueLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Fragebogenkatalog.Name") %></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-CssClass="aspBoundField_Header" ItemStyle-CssClass="aspBoundField" HeaderText="Status">
<ItemTemplate>
<!-- This is where the changes should happen: -->
<a href="javascript:void(0)" class="linkfield" id="surveyListStatusLink_<%# Eval("ID") %>" onclick="document.getElementById('surveyList').style.display='none'"><%# Eval("Status_Text") %></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
这是我的JavaScript / jQuery:
$("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText);
因此,基本上我想发生的事情是,当触发某个事件时(在这种情况下,是单击我的链接),应该更改链接标题。 一切正常,我绑定了click事件,如下所示:
<script type="text/javascript">
$(document).on("click", ".linkfield", function () {
numberStart = $(this).attr("id").indexOf("_") + 1;
SelectedId = $(this).attr("id").substring(numberStart, $(this).attr("id").length);
LoadData(SelectedId);
$("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });
})
</script>
包含jQuery语句的LoadData函数:
function LoadData(id) {
$.ajax({
type: "POST",
url: "SurveyList.aspx/GetData",
data: '{surveyId: "' + id + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnLoadDataSuccess,
failure: function (response) {
alert(response.d);
}
});
}
function OnLoadDataSuccess(response) {
if (response.d.substring(0,5) == "Error")
alert(response.d);
else {
surveyData = jQuery.parseJSON(response.d);
$("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!
$("#surveyListStatusLink_" + surveyData.Id).html(surveyData.StatusText); // This doesn't...
}
}
当我调试它时,我可以看到html值已正确更改,但是问题来了:它不会显示在浏览器中。 它没有显示任何更改,我不太确定自己在做什么错。
我已经尝试过的事情:
在标题上使用.attrib()函数
在链接上使用.fadeOut()函数
在链接元素上使用.text()函数
...但仍然:没有明显的变化。
那么谁能说出问题所在以及我该如何解决呢?
提前致谢!
我知道这不是一个很好的答案,但是在查看代码时,我认为没有一个很好的理由使它成为问题。 我唯一能想到的就是将它愚弄很多。 首先,将每个锚定标记的onclick事件处理程序更改为此
onclick="HandleClick(this, '<%#Eval("id")%>');">
然后,使用此函数HandleClick(链接,selectedId){
document.getElementById('surveyList').style.display='none' //Just moved this in to the method
LoadData(link, selectedId); //Load the data with the id and link you provided
$("#fade").fadeIn(300, "swing", function () { $("#surveyForm").fadeIn(200); });
})
然后将链接传递给您的Load方法和成功方法,以便您可以直接使用它,而不必查询它
function LoadData(link, id) {
$.ajax({
type: "POST",
url: "SurveyList.aspx/GetData",
data: '{surveyId: "' + id + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response){
OnLoadDataSuccess(response, link); //Still calling OnLoadDataSuccess, but changed it so we can easily provide input parameters
},
failure: function (response) {
alert(response.d);
}
});
}
function OnLoadDataSuccess(response, link) {
if (response.d.substring(0,5) == "Error")
alert(response.d);
else {
surveyData = jQuery.parseJSON(response.d);
$("#surveyFormTitle").html(surveyData.Supplier.Name); // Note: this shows up properly!
link.innerHTML = surveyData.StatusText; //Use simple javascript to change the information.
}
}
由于我尚未真正测试过它,因此在复制和粘贴时它可能无法正常工作,但其想法是您传递链接和ID,而不必使用javascript解析它们。 然后,将它们传递给每种方法,以便可以直接引用它们。 这应该可以解决jquery的问题,并且可以直接使用javascript。
请注意,我绝不是要知道问题出在哪里,但是,如果问题不那么复杂的话,它至少会更容易调试。
祝好运!
我只是发现问题出在看这篇文章: 我如何让jQuery选择带有的元素。 (时段)的ID?
长话短说:jQuery需要反斜杠作为任何特殊字符的转义序列。 下划线也算作特殊字符。
因此,这是解决方案:
$("#surveyListStatusLink\\_" + surveyData.Id).text(surveyData.StatusText);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.