Javascript问题，脚本仅在使用alert()时才能100％工作；到位ODD [英] Javascript problem, script works 100% only with an alert(); in place ODD
本文介绍了Javascript问题，脚本仅在使用alert()时才能100％工作；到位ODD的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
调用所有JavaScript Gurus.我要香蕉，在以下脚本中，如果我删除了警报"，则该代码将无法正常工作.但是我显然不能在我的ASP.NET Web应用程序的中间弹出窗口
calling all JavaScript Gurus. I'm going bananas, in the following script if I remove the Alert the code does not work. But I obviously cannot leave a pop up in the middle of my ASP.NET web App
没什么关系，但是此代码位于Index.cshtml中，其中包含名为IndexSearch Results.cshtml的部分内容.代码在底部，但我认为它只是下面的JavaScript ::
Not that it matters much but this code is in a Index.cshtml that contains a partial called IndexSearch Results.cshtml. Code at the bottom but its just the Javascript below I think is the issue ::
缺少某些东西，我无法理解，非常感谢您的关注...
Something is missing I cannot figure it, many thanks for looking...
@section Scripts {
@Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
这里是Index.CSHTML:
Here is Index.CSHTML:
@model IEnumerable<AscendancyCF.Models.SupplyPoint>
@{
ViewBag.Title = "Index";
}
<style>
.tooltiptext {
display: none;
}
</style>
<h2></h2>
<fieldset>
<legend>
<img width="50" height="50" src="~/content/images/bPremise.jpg" /> Use the Search fields provided to Locate a Premise
</legend>
<table class="NoHighlight">
<tr>
<td></td>
<td>
SSID<br />
@Html.TextBox("SearchSPID", string.Empty, new { style = "float:left;width:150px;" })
<div style="clear:both;"></div>
</td>
<td></td>
<td>
Premise Name<br />
@Html.TextBox("SearchPremise", string.Empty, new { style = "float:left;width:170px;" })
<div id="Div1" style="float:left; padding-left:5px;"></div>
<div style="clear:both;"></div>
</td>
@*<td>
Effective Start >=<br />
<div class="col-md-10">
@Html.TextBox("StartDate")
</div>
</td>
<td>
Effective End<br />
<div class="col-md-10">
@Html.TextBox("EndDate")
</div>
</td>*@
<td>
<a href="#test" class="btn btn-default" id="searchButton" >Search</a>
<div class="tooltiptext">
Key less by entering only part of a Search String <b>i.e.</b> key <i>Garage</i> to find <i>all premises containing this text</i> quickly
</div>
</td>
<td>
<div id="LoadingGif"></div>
</td>
</tr>
</table>
</fieldset>
<div id="ResultsList" style="clear:both;">
@Html.Partial("IndexSearchResults")
</div>
@section Scripts {
@Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
}
这是IndexSearchResults.cshtml:
and here is IndexSearchResults.cshtml:
@model IEnumerable<AscendancyCF.Models.SupplyPoint>
@{
ViewBag.Title = "Index";
}
<p><h5><div id="noRecords">Your search returned @Model.Count() items</div></h5></p>
<table class="tablesorter" id="myTable">
<thead>
<tr>
<th></th>
<th>
@Html.DisplayNameFor(model => model.SPID)
</th>
<th>
@Html.DisplayNameFor(model => model.SupplyPointName)
</th>
<th>
@Html.DisplayNameFor(model => model.GazateerRef)
</th>
<th>
@Html.DisplayNameFor(model => model.SupplyPointEffectiveDateTime)
</th>
<th>
Premise Type
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr rowid="@item.SupplyPointId">
<td>
<a href="/SupplyPoint/Edit/@item.SupplyPointId" id="Edit"><img src="~/Content/images/edit.png" id="imgEdit" alt='Edit Details' title='Edit Details'></a>
</td>
<td>
@Html.DisplayFor(modelItem => item.SPID)
</td>
<td>
@Html.DisplayFor(modelItem => item.SupplyPointName)
</td>
<td>
@Html.DisplayFor(modelItem => item.GazateerRef)
</td>
<td>
@Html.DisplayFor(modelItem => item.SupplyPointEffectiveDateTime)
</td>
<td>
@Html.DisplayFor(modelItem => item.SupplyPointType.SupplyPointTypeName)
</td>
</tr>
}
</tbody>
</table>
<div class="pager" id="pager">
<form>
<img src="~/Content/Images/first.gif" id="iFirst" class="first" />
<img src="~/Content/Images/prev.gif" class="prev" />
<input type="text" class="pagedisplay" />
<img src="~/Content/Images/next.gif" class="next" />
<img src="~/Content/Images/last.gif" class="last" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>
推荐答案
jQuery.load是异步的，因此它将在加载内容之前返回.在Init函数中，您试图在内容被加载之前使用它. alert()之所以成功，是因为它允许加载内容.
jQuery.load is asynchronous, so it will return before the content is loaded. In the Init function, you are trying to use the content before it has been loaded. The alert() is making it succeed, since it allows the content to be loaded.
您应该将其移到回调内，而不是在load()调用后立即调用Init().
Instead of calling Init() immediately after the load() call, you should move it inside the callback.
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
Init(); // <--- Here
});
$('#LoadingGif').empty().html(' Loading...');
});
这篇关于Javascript问题，脚本仅在使用alert()时才能100％工作；到位ODD的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
