之后jQuery的table.load（）html元素变得未定义 [英] after jquery table.load() html element becomes undefined
问题描述
我有一个HomeController具有以下操作
public ActionResult关于（）
{
MapDetailsRepository repMapDetail = new MapDetailsRepository（name = ge）;
YearRepository repYear = new YearRepository（name = ge）;
SuperMapModel smM = new SuperMapModel（）;
smM.saVM = new StudentAssessmentViewModel（）;
MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails（53）;
smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList（）;
smM.saVM.results = mapDetailResultSet.results.ToList（）;
smM.saVM.students = mapDetailResultSet.students.ToList（）;
smM.scM = new SearchControlViewModel（）;
smM.scM.YearList = new SelectList（repYear.GetAll（），yearID，year）;
return View（smM）; }
public ActionResult DisplaySearchResults（string searchText）{
MapDetailsRepository repMapDetail = new MapDetailsRepository（name = ge）;
SuperMapModel smM = new SuperMapModel（）;
smM.saVM = new StudentAssessmentViewModel（）;
MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails（22）;
smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList（）;
smM.saVM.results = mapDetailResultSet.results.ToList（）;
smM.saVM.students = mapDetailResultSet.students.ToList（）;
返回PartialView（〜/ Views / Maps / _MapDetailsList.cshtml，smM.saVM）;
}
SuperMapModel是一个超级类，有2个视图模型
- scM对于搜索面板部分控件
- 用于MapDetailList部分控件的saVM
在页面加载上，SuperMapModel被传递给将各个模型传递给每个部分控件的View， p>
< div>
@ Html.Partial（_ SearchPanel，Model.scM）
< / div>
< div class =row>
< div class =col-md-12表响应>
@ Html.Partial（〜/ Views / Maps / _MapDetailsList.cshtml，Model.saVM）
< / div>
我的MapDetails PArtial Control非常复杂，所以我提供一个删除版本
< table>
< thead>
< tr>< th />< th />< th />< / tr>
< tr>< th />< th />< th />< / tr>
< / thead>
< tbody>
@foreach（ModelStudents中的ShortStudent geStudent）
{
< tr>
< td> @ geStudent.firstname< / td>
foreach（运行它x次数）
{
< td>
@foreach（Model.results中的ShortResult geResult）
{
if（geResult.ResultValue！= null）
{
< script> { setResultValue（@colIndex，@rowIndex，'@ geResult.ResultValue'）; }< /脚本>
}
}
< / td>
}
< / tr>
}
< / tbody>
< / table>
此setResultValue函数在主视图（About）上定义，它设置当前td
function setResultValue（colIndex，rowIndex，resultValue）{
alert（inside about）;
var cell = $（＃MapDetails）。children（）。children（）[rowIndex] .children [colIndex];
cell.innerHTML = resultValue;
}
这个网格被转换成一个kendo网格在document.ready
现在它在页面加载上完美的工作，但是当我从searchpanel里面点击搜索按钮时，我做以下（定义在searchpanel partial control）
function refreshGrid（）{
alert（search panel）;
var url ='@ Url.Action（DisplaySearchResults，Home）';
$（＃MapDetails）load（url，{searchText：Lee}，function（）{
alert（success）;
}）;
}
这个回调从来没有被触发过。
所以现在我只绑定了 DisplaySearchResults
$中的新数据的部分视图b$ b
现在显然，在主页上没有找到脚本函数setResultValue，所以我在局部视图mapdetailslist上复制了相同的脚本函数setResultValue（这是一个不好的做法）
更新
调试后我有一些更多的细节，所以现在最新的问题是在页面加载我可以得到
$（＃MapDetails）。children（）。children（）[rowIndex]
但按钮后点击相同的是未定义的
所以问题是我无法使用以下代码获取td元素
$ （#MapDetails）。children（）。children（）[rowIndex]
我已经解决了在一个非常黑客的方式，但希望有一个更完美的解决方案
function setResultValue（col索引，rowIndex，resultValue）{
if（$（＃MapDetails）。children（）。children（）[rowIndex]！= undefined）{
var cell = $ #MapDetails）的儿童（）的儿童（）[rowIndex位置]。儿童[colIndex]。。
cell.innerHTML = resultValue;
}
else {
var newRow = 0，newCol = 0，assessmentLength = 5，elementPos = 0;
newRow = rowIndex - 3;
newCol = colIndex - 4;
elementPos =（newRow * assessmentLength）+ newCol;
$（。test）。get（elementPos）.innerHTML = resultValue;
}
}
.test是我的td，你可以在标记中看到
我的问题在部分视图呈现仍然存在时加载脚本元素和dom元素的顺序
I am rewriting the post to make it clearer
I have a HomeController that has the following Actions
public ActionResult About()
{
MapDetailsRepository repMapDetail = new MapDetailsRepository("name=ge");
YearRepository repYear = new YearRepository("name=ge");
SuperMapModel smM = new SuperMapModel();
smM.saVM = new StudentAssessmentViewModel();
MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails(53);
smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList();
smM.saVM.results = mapDetailResultSet.results.ToList();
smM.saVM.students = mapDetailResultSet.students.ToList();
smM.scM = new SearchControlViewModel();
smM.scM.YearList = new SelectList(repYear.GetAll(), "yearID", "year");
return View(smM); }
public ActionResult DisplaySearchResults(string searchText) {
MapDetailsRepository repMapDetail = new MapDetailsRepository("name=ge");
SuperMapModel smM = new SuperMapModel();
smM.saVM = new StudentAssessmentViewModel();
MapDetailResultSet mapDetailResultSet = repMapDetail.GetMapDetails(22);
smM.saVM.mapDetails = mapDetailResultSet.mapDetails.ToList();
smM.saVM.results = mapDetailResultSet.results.ToList();
smM.saVM.students = mapDetailResultSet.students.ToList();
return PartialView("~/Views/Maps/_MapDetailsList.cshtml", smM.saVM);
}
SuperMapModel is a Super Class that has 2 view models - scM for search panel partial control - saVM for MapDetailList partial control
On Page load SuperMapModel is passed to the View which passes the respective models to each partial control
<div>
@Html.Partial("_SearchPanel", Model.scM)
</div>
<div class="row">
<div class="col-md-12 table-responsive" >
@Html.Partial("~/Views/Maps/_MapDetailsList.cshtml", Model.saVM)
</div>
My MapDetails PArtial Control is very complicated so i am giving a stripped down version
<table>
<thead>
<tr><th/><th/><th/></tr>
<tr><th/><th/><th/></tr>
</thead>
<tbody>
@foreach(ShortStudent geStudent in Model.students)
{
<tr>
<td>@geStudent.firstname</td>
foreach (run it x number of times)
{
<td>
@foreach (ShortResult geResult in Model.results)
{
if (geResult.ResultValue != null)
{
<script>{ setResultValue(@colIndex, @rowIndex, '@geResult.ResultValue'); }</script>
}
}
</td>
}
</tr>
}
</tbody>
</table>
This setResultValue function is defined on the main view (About) and it sets the innerhtml of current td
function setResultValue(colIndex, rowIndex, resultValue) {
alert("inside about");
var cell = $("#MapDetails").children().children()[rowIndex].children[colIndex];
cell.innerHTML = resultValue;
}
P.S. This grid is converted to a kendo grid on document.ready
Now it works perfectly on page load but when i click search button from inside searchpanel i do the following (defined on searchpanel partial control)
function refreshGrid() {
alert("search panel");
var url = '@Url.Action("DisplaySearchResults", "Home")';
$("#MapDetails").load(url, { searchText: "Lee" }, function () {
alert("success");
});
}
P.S. The call-back here is never fired
So now i am binding only the partial view with the new data in DisplaySearchResults
Now obviously it does not find the script function setResultValue on main page so i duplicated the same script function setResultValue on partial view mapdetailslist (which is ofcourse a bad practice)
UPDATE
After debugging i got some more detail so Now the newer problem is on page load i can get $("#MapDetails").children().children()[rowIndex] but after button click the same is undefined
So the problem was that i could not get the td element with the following code
$("#MapDetails").children().children()[rowIndex]
I have solved it in a very hacky way but would love to have a neater solution
function setResultValue(colIndex, rowIndex, resultValue) {
if ($("#MapDetails").children().children()[rowIndex] != undefined) {
var cell = $("#MapDetails").children().children()[rowIndex].children[colIndex];
cell.innerHTML = resultValue;
}
else {
var newRow = 0, newCol = 0, assessmentLength = 5, elementPos = 0;
newRow = rowIndex - 3;
newCol = colIndex - 4;
elementPos = (newRow * assessmentLength) + newCol;
$(".test").get(elementPos).innerHTML = resultValue;
}
}
.test is the class of my td as you could see in the markup
My Question on the sequence of loading script element and dom element when partial view rendering is still there
这篇关于之后jQuery的table.load（）html元素变得未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
