在 Jquery 数据表搜索框中添加提示文本的问题
使用诸如 watermark.js 之类的插件在 Jquery 数据表的搜索字段中添加灰色提示文本不是一个选项，我必须自定义编写它。我快到了，但面临着这个小而奇怪的问题，下面的代码片段解释了这一点。
function toggleHintText()
{
// alert("The hint text should show up");
var textSuggest = "Please input search parameter";
var searchField = $('input:text');
searchField .attr("value", textSuggest );
searchField .addClass("activeHint");
searchField .focus(function() {
if(searchField .attr("value") == textSuggest)
{
searchField .attr("value", "");
}
});
searchField .keyup(function() {
if(searchField .attr("value") == "")
{
searchField .addClass("activeHint");
}
else
{
searchField .removeClass("activeHint");
}
});
searchField .blur(function() {
if(searchField .attr("value") == "")
{
searchField .attr("value", hinttext);
searchField .addClass("activeHint");
}
});
============================================
方法调用如下
$(document).ready(function() {
populateTableData();
toggleHintText();
} );
该 ===================================================
我面临的问题是，如果没有方法开头的警报，提示文本不会显示在搜索框中。警报是否有利于 document.ready ？从 document.ready 调用两个方法是否会扰乱toggleHint 方法？我的要求之一是，如果用户在搜索查询后单击表行，然后单击自定义后退按钮，则保留用户输入的搜索文本，这就是为什么我必须从 document.ready 调用它。
请提前告知并致谢。
Using a plugin such as watermark.js for adding the greyed out hint text in the search field of the Jquery datatable is not an option, I have to custom write it. I am almost there but facing this minor and strange issue explained below the following code snippet.
function toggleHintText()
{
// alert("The hint text should show up");
var textSuggest = "Please input search parameter";
var searchField = $('input:text');
searchField .attr("value", textSuggest );
searchField .addClass("activeHint");
searchField .focus(function() {
if(searchField .attr("value") == textSuggest)
{
searchField .attr("value", "");
}
});
searchField .keyup(function() {
if(searchField .attr("value") == "")
{
searchField .addClass("activeHint");
}
else
{
searchField .removeClass("activeHint");
}
});
searchField .blur(function() {
if(searchField .attr("value") == "")
{
searchField .attr("value", hinttext);
searchField .addClass("activeHint");
}
});
}
This method is called onload as below
$(document).ready(function() {
populateTableData();
toggleHintText();
} );
===========================================================================================
The issue I am facing is that without the alert that I have in the beginning of the method, the hint text doesn't show up in the search box. Does the alert some how work in favor of document.ready ? Does calling two methods from document.ready mess up the toggleHint method ?. One of my requirements is to preserve the user input search text if he clicks on the table row after search query and then hits the a custom back button, that is why I have to call it from document.ready.
Please advise and thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试利用
.queue()、.delay()、.keyup()jsfiddle http://jsfiddle.net/o98cpxmf/2/
Try utilizing
.queue(),.delay(),.keyup()jsfiddle http://jsfiddle.net/o98cpxmf/2/
“警报是否有利于 document.ready？”
当然。但不支持 document.ready 而是支持“动态加载表 data.ready”。
请参阅您的第二个代码片段：
首先您调用 populateTableData()：我想出通过 Ajax 请求异步从可能的远程服务器读取数据。
然后，您调用toggleHintText() 来实现对表行的切换效果，我发现在populateTableData() 内部实现的一些回调将在Ajax 请求（或类似的异步操作）完成后立即追加。
JavaScript 是单威胁的（这意味着您的代码在单个线程中执行，因此没有任何并发性），但并不完全没有并发性，因为异步操作由其他参与并发线程工作或等待必要的操作完成，然后（触发完成事件）将任务推送到 javascript 主任务循环（附加到该元素的事件处理程序）中。
alert() 调用会停止 javascript 主循环执行，但不会停止参与异步任务的并发线程。
这样，它就可以成功完成Ajax请求操作（即使没有因为“警报暂停”而导致服务器超时失败）并触发完成事件。
...但是附加到该事件的回调将不会执行，直到 javascript 任务循环继续。
在填充表数据之前，您的toggleHintText()函数会被调用，如果没有alert()，其其余代码将不会在该表中找到任何元素（或者至少不会找到由populateTableData()填充的任何新元素）。
这就是为什么如果没有alert()，你的代码就无法工作的原因。
但我不确定为什么即使有警报它仍然有效。我发现你的浏览器可以将警报停止实现为某种“暂停的 nextTick()”，并尽快执行，至少是挂起的事件处理程序（但我认为这在 javascript 规范中并不严格正确）。
为了避免此问题，当您确定数据已填充到表中时，需要调用toggleHintText()。即：
从在（假定的）Ajax 请求完成时填充数据的事件处理程序调用它。
在那一刻触发您自己的元素并将toggleHint()附加为它的事件处理程序。
或者，您也可以修改您的toggleHintText() 事件处理程序以附加到表格本身（或整个文档），而不是附加到以后动态加载的元素，然后检查事件目标。
这就是过时的 .live() jquery 方法所做的事情，现在只需使用 .on() 和目标选择器即可实现。例如：
在您的代码中：
...last row 相当于：
您可以将其替换为：
这样，事件处理程序将直接附加到文档的正文和每个焦点事件，它将检查目标是否匹配给定的选择器（无论该元素是否在事件处理程序附件之前创建）。
总之：您不能将事件处理程序附加到尚不存在的元素。
另一方面，您可以进行一些元素操作，例如添加类和属性。您不能在元素创建之前执行此操作，但是类似地，您可以将事件处理程序附加到其“创建”事件。
但不幸的是，这个事件实际上并不存在。但是有一些技术可以通过 dom 更改事件来实现它。请参阅有关 liveQuery 插件的此问题。
«Does the alert some how work in favor of document.ready?»
Sure. But not in favor of document.ready but in favor of "dinamically loaded table data.ready".
See your second code snippet:
First you call populateTableData(): I figure out to asynchronously read data from probably remote server via Ajax request.
And then, you call toggleHintText() to implement your toggle effect over table rows that I figure out that some callback implemented inside populateTableData() WILL append as soon as the Ajax request (or similar asyinchronous operation) finishes.
Javascript is single-threated (which means that your code is executed in a single thread and, hence, free of any concurrency), but not fully free of concurrency because asynchronous operations are attended by other concurrent threads working or waiting for necessary operations to be finished and, then (completion event triggered), pushes a task in the javascript main tasks loop (event handler attached to that element).
The alert() call stops javascript main loop execution, but not concurrent threads attending asynchronous tasks.
This way, it can complete Ajax request operation successfully (even without server timeout failure because of the "alert pause") and trigger the completion event.
...But the callback attached to that event will not be executed until javascript task loop continues.
Your toggleHintText() function is called SURE before your table data is populated and, without the alert() the rest of its code will NOT found any elements in that table (or at least not any new ones populated by populateTableData()).
So there is the reason why, without the alert(), your code doesn't work.
But I'm not sure why it works even with the alert. I figure out your browser could implement the alert stop as some kind of "paused nextTick()" and execute, at least pending event handlers, as soon as possible (but I think that is not strictly correct in javascript specification).
To avoid this problem, need to call toggleHintText() when you are sure that data is populated in the table. That is:
Call it from the event handler that populate the data on the (supposed) Ajax request completion.
Trigger your own element in that moment and attach toggleHint() as event handler of it.
Or also, you could modify your toggleHintText() event handlers to be attached to the tables itself (or to the whole document) instead of to later dynamically loaded elements and then check for the event target.
That is what the obsolete .live() jquery method did and which nowadays can be achieved simply with .on() and a target selector. For example:
In your code:
...last row is equivalent to:
You can replace it (for instance) with:
That way, the event handler is attached directly to document's body and every focus event, it will check if the target matches given selector (no matter if the element were created before the event handler attachment or not).
In summary: you cannot attach event handler to element that not yet exists.
On the other hand, you have some element manipulation like adding classes and attributes. You can't do it before the element creation, but, similarily, you can attach event handler to its "creation" event.
But, unfortunately, this event doesn't actually exist. But there is techniques to implement it over dom change event. See this question about liveQuery plugin.