在Jquery数据表搜索框中添加提示文本的问题 [英] Issue with adding hint text in Jquery data table search box

问题描述

使用诸如watermark.js之类的插件在Jquery datatable的搜索字段中添加灰色的提示文本不是一个选项，我必须自定义写入。我几乎在那里，但是面对这个小而奇怪的问题，在下面的代码片段中解释。

  function toggleHintText（）
 {
 // alert（提示文本应显示） ; 
 var textSuggest =请输入搜索参数; 
 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）; 
} 
}）; 
  

}

此方法称为onload如下

  $（document）.ready（function（）{
 populateTableData（）; 
 toggleHintText （）; 
}）; 
  

=================== ================================================ ====================

我所面临的问题是，没有我在方法开始时，提示文本不会显示在搜索框中。警报有些工作有利于document.ready吗？从document.ready中调用两个方法来调用toggleHint方法？我的一个要求是保留用户输入搜索文本，如果他在搜索查询后点击表格行，然后点击自定义后退按钮，这就是为什么我必须从document.ready调用它。

请提前通知并感谢。

解决方案

警报有些工作有利于document.ready？»

当然可以。但是不赞成document.ready，但赞成dinamically loaded table data.ready。

查看你的第二个代码片段：

• 首先你调用populateTableData（）：我想通过Ajax请求从大概的远程服务器中异步读取数据




• 然后，您调用toggleHintText（）来实现对表行的切换效果，我发现在populateTableData（）中实现的一些回调将在Ajax请求后立即追加（或类似的同步操作）完成。

Javascript是单一的（这意味着 strong>代码在单个线程中执行，因此没有任何并发​​性），但并不完全没有并发性，因为异步操作由其他工作或等待必要操作完成的并发线程参与然后（完成事件触发），推动一个任务javascript主要任务循环（附加到该元素的事件处理程序）。

alert（）调用停止JavaScript主循环执行，但不会出现异步任务的并发线程。 >

这样，它可以成功完成Ajax请求操作（即使没有服务器超时失败，因为提醒暂停）并触发完成事件。

...但是，在JavaScript任务循环继续之前，附加到该事件的回调将不会执行。

您的toggleHintText（）函数称为SURE在表数据填充之前，没有alert（），其余代码将不会在该表中找到任何元素（或至少没有任何由populateTableData（）填充的新元素）。

所以有没有alert（）的原因，你的代码不起作用。

但我不知道为什么它的工作即使有警报。我想，您的浏览器可能会将某些暂停的nextTick（）的警报停止，并尽快执行至少待处理的事件处理程序（但我认为在JavaScript规范中并不严格）。

为避免此问题，当您确定该数据填充在表中时，需要调用toggleHintText（）。这是：

• 从事件处理程序中调用它（填充）（假定）Ajax请求完成的数据。 >




• 在该时刻触发您自己的元素，并附加toggleHint（）作为事件处理程序。

或者，您也可以修改toggleHintText（）事件处理程序以附加到表本身（或整个文档），而不是稍后动态加载的元素，然后检查事件目标

这是过时的.live（）jquery方法，现在可以使用.on（）和目标选择器来实现。例如：

在代码中：

  var searchField = $ （'input：text'）; 
 ... 
 searchField.focus（function（）{...}）; 
  

...最后一行相当于：

  searchField.on（focus，function（）{}）; 
  

您可以将其替换为（例如）：

$ b $ （focus，input：text，function（）{...}）; b

  $（body）。 
  

这样，事件处理程序直接附加到文档的正文和每个焦点事件，它会检查是否目标匹配给定的选择器（无论元素是否在事件处理程序附件之前创建）。

总而言之：您不能将事件处理程序附加到尚未包含的元素存在。

另一方面，您有一些元素操作，如添加类和属性。你不能在元素创建之前做到这一点，但同样地，你可以将事件处理程序附加到它的创建事件。

但是，不幸的是， t实际存在。但是有一些技术可以在dom变化事件中实现。有关liveQuery插件，请参阅此问题。

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.

解决方案

«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:

var searchField = $('input:text');
...
searchField.focus(function() {...});

...last row is equivalent to:

searchField.on("focus", function(){});

You can replace it (for instance) with:

$("body").on("focus", 'input:text', function(){...});

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.

这篇关于在Jquery数据表搜索框中添加提示文本的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！