Databases
StackOverflow2013
Postsdbo
POIssue with adding hint text in Jquery data table search box
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with adding hint text in Jquery data table search box
    text
    copied!<p>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. </p> <pre><code>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"); } }); </code></pre> <h1> }</h1> <p>This method is called onload as below</p> <pre><code>$(document).ready(function() { populateTableData(); toggleHintText(); } ); </code></pre> <p>===========================================================================================</p> <p>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.</p> <p>Please advise and thanks in advance. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload