JQuery 无法看到通过 AJAX 调用变得可见的对象
目前我对 AJAX 和 Javascript / JQuery 还不是最擅长的。我遇到一种情况，我知道问题是什么，但不知道如何解决。我有一个 JQuery 自动完成功能，运行良好。它位于一个占位符中，仅当单击 linkButton 时才在页面上显示为可见。够简单的。我发现如果我将占位符的隐藏/显示放在 Asp.Net AJAX UpdatePanel 中（这样页面就不会回发），我的页面会工作得更好。足够简单...
但是现在，当我调用 JQuery automplete 时，它不起作用。我知道为什么......这是因为当页面加载时，自动完成的文本框不可见，并且 AJAX 单击链接按钮仅刷新该元素，而没有将整个页面发回。因此，当我转到 pageSource 时，我发现文本框甚至不存在。所以，自动完成功能当然无法工作，因为它现在找不到元素的 ID。
我可以向此 JQuery 代码添加任何内容，使其现在可以看到 AJAX 面板显示的可见文本框吗？预先感谢任何人可以提供的任何帮助。
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtCityStateZip.ClientID%>").autocomplete('SearchHandlerGRP_BY.ashx');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtCityStateZip.ClientID%>").show('ErrorHandler.ashx');
});
</script>
I'm not the greatest with AJAX and Javascript / JQuery at this point. I have a situation where I know what the problem is but don't know how to fix it. I have a JQuery autocomplete which was working fine. It was in a placeholder that only showed as visible on the page when a linkButton was clicked. Simple enough. I found that my page worked a lot nicer though if I put the hiding / showing of the placeholders in an Asp.Net AJAX UpdatePanel (so the page wouldn't post back). Simple enough...
But now, when I call the JQuery automplete, it doesn't work. And I know why... it is because the textbox where the autocomplete is wasn't visible when the page loaded and the AJAX click of the linkbutton only refreshed that element and didn't post the whole page back. So, when I go to pageSource, I see the textBox isn't even there. So, of course the autocomplete can't work because it can't find the ID of the element now.
Is there anything I can add to this JQuery code to get it to now see the visible text box that the AJAX panel has shown? Thanks in advance for any help anyone can provide.
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtCityStateZip.ClientID%>").autocomplete('SearchHandlerGRP_BY.ashx');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtCityStateZip.ClientID%>").show('ErrorHandler.ashx');
});
</script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了查看 AJAX 调用的结果、发现 javaScript 错误或查看 jQuery 操作后的 HTML 状态，我更喜欢使用 FireFox 和浏览器的 Firebug 插件。要执行此操作，只需确保 FF 已更新，然后转到附加组件并搜索 Firebug。将会有许多带有fire某些东西的附加组件，但您只需要“Firebug”。我当前使用的 Firefox 8.0 版本是 1.8.3。
安装完成后，您可以通过按 F12 键切换 Firebug 窗口。我的 Firebug 窗口停靠在浏览器底部，并且可以在浏览器窗口内调整大小。
Firebug 窗格的主工具/菜单栏中提供了两个关键功能，可以告诉您有关正在发生的情况的更多信息。您将对“元素检查”功能感兴趣，该功能允许您查看页面上任何元素的 html（即使是在通过脚本操作之后）。单击 Firebug 栏左侧第二个按钮（蓝色框上方的蓝色箭头），然后将鼠标悬停在页面上。与当前悬停的元素相关的 html 将出现在 Firebug 窗口中。单击一个元素即可“锁定”到该 html 部分。如果您想检查不同的内容，请再次单击检查工具按钮。
您可以使用上面评论中提到的另一个工具是控制台窗口。可以通过单击检查工具按钮右侧的“控制台”选项卡来访问此选项。在它成为活动选项卡后，请务必单击选项箭头并验证控制台是否已启用。启用后，您可以重新加载页面，然后ajax 请求和响应将在发生时显示在控制台窗口中。
In order to view the results of AJAX call, pick up on javaScript errors, or to view the state of HTML after it has been manipulated by jQuery, I prefer to use FireFox and the Firebug add-on for the browser. For you to do this, simply make sure FF is updated and then go to Add-ons and Search for Firebug. There will be a number of Add-ons with fire something, but you will want simply "Firebug." The version I am currently using with my version 8.0 of Firefox is 1.8.3.
Once you have this installed, you can toggle the Firebug window by pressing F12 key. My Firebug window is docked at the bottom of the browser, and it is size-able within the browser window.
The two key features that will tell you more about what is going on are both available from the main tool/menu bar of the Firebug pane. You will be interested in the 'element inspection' feature which will allow you to view the html of any element on the page (even after it has been manipulated by scripting). Click the second button from the left on the Firebug bar (the one that is a blue arrow over a blue box) and simply mouse over your page. The html related to the element currently being hovered over will appear in the firebug window. Click an element to "lock" onto that section of html. If you would like to then inspect something different, then click the inspect tool button again.
The other tool you will be able to use that has been referenced above in the comments is the console window. This can be accessed by clicking the "Console tab to the right of the inspection tool button. After it becomes the active tab, be sure click the options arrow and verify that the console is enabled. Once enabled, you can reload your page, and the ajax requests and responses will appear in the console window as they occur.