Title: Refresh table Last modified: April 20, 2017 --- # Refresh table * Resolved [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/) * Hello, * I have written a short jQuery function to add a close button to the end of the search input field. After clicking the close button the input field will be cleared BUT the table does not refresh. What is missing? * ``` jQuery(document).ready(function($) { // Force delayed execution of jQuery setTimeout(function() { // Add button-link to the end of the input field. var c = 'fa fa-times'; var s = 'border: 0px; position: absolute; margin-left: -20px; margin-top: 15px; cursor: pointer;'; var button = ''; jQuery('div.dataTables_filter > label').append(button); // Empty input field on button click. jQuery('div.dataTables_filter > label > a').click(function(){ jQuery('div.dataTables_filter > label > input[type="search"]').val(''); // Refresh table: // ... }); }, 0); }); ``` * For your information: The `setTimeout()` is needed otherwise the script will not execute. * Cheers Sascha Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/refresh-table/page/2/?output_format=md) [→](https://wordpress.org/support/topic/refresh-table/page/2/?output_format=md) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048359) * Hi, * thanks for your email, and sorry for the trouble. * You will probably have to trigger the `change`, `keydown`, or `keyup` event of the input text field, so that the JS code for the filtering runs. * Note that the input field’s “type” is actually “search” so that you should get such a button by default inside the search field (see e.g. [https://tablepress.org/demo/](https://tablepress.org/demo/) after you start typing). If you don’t see this, your theme is probably overriding this with CSS code. * Regards, Tobias * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048430) * Hi Tobias, * thank you for the fast response. I am not firm with html, css, js and so on. * I am using a “Twenty Fifteen” child theme. Now I realized that “FireFox” does not show the button within the input field (type ‘search’) but e.g. “Internet Explorer” does. Strange! * Cheers Sascha - This reply was modified 8 years, 11 months ago by [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/). * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048547) * Hi Sascha, * yes, that’s strange. I’m not sure what the default theme behavior is here though. Maybe you can investigate this using the Developer Tools in the browser. * Regards, Tobias * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048642) * Hi Tobias, * well, the jQuery solution would be a workaround until it works “out of the box”. You told be to trigger the `change`, `keydown`, or `keyup` events. How can I refresh tables if “my” clear button has been clicked? * Cheers Sascha * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048670) * Hi Sascha, * you will probably just have to change the line * ``` jQuery('div.dataTables_filter > label > input[type="search"]').val(''); ``` * to * ``` jQuery('div.dataTables_filter > label > input[type="search"]').val('').trigger('change'); ``` * Regards, Tobias * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048742) * Hi Tobis, * didn’t work. I will try to find a solution and post it here. If you have got another idea: Please let me know :). * Thank you very much for your help. * Cheers Sascha * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048790) * Hi Sascha, * then maybe replace `change` with one of the other suggestions from above. If that also does not work, you might be better off enabling the “search” field support in Firefox. I’m quite sure that this should be possible using some CSS code. * Regards, Tobias * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048794) * Hi, * I take that back. According to the remark 1 on [http://caniuse.com/#search=search](http://caniuse.com/#search=search) it seems that Firefox does not offer a special “search” field user interface :-/ * Regards, Tobias * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9048847) * Hi Tobias, * thank you for your research. I am happy that the “clear button” is not really needed. The main thing is that TablePress is working. And it does … :). Maybe FireFox will “learn” in the future. * Have a nice day. * Regards from beautiful Alsfeld/Hesse Sascha * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9049032) * Hi, * no problem! Always happy to help! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/plugin/tablepress/reviews/#new-post) here in the plugin directory. Thanks! * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9049444) * Hello once agaion, * now it work! My solution: * ``` jQuery(document).ready(function($) { if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) { // Force delayed execution of jQuery setTimeout(function() { // Add button-link to the end of the input field. var c = 'fa fa-times'; var s = 'border: 0px; position: absolute; margin-left: -25px; margin-top: 15px; cursor: pointer;'; var button = ''; jQuery('div.dataTables_filter > label').append(button); // Empty input field on button click and refresh table. jQuery('div.dataTables_filter > label > a').click(function() { jQuery('div.dataTables_filter > label > input[type="search"]').val('').trigger('keyup'); }); }, 0); } }); ``` * The `keyup` event is the magic key. Furthermore I resticted the code to FireFox. If you find a mistake or an optimation you are always welcome :). * Cheers Sascha * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9049859) * Hi Sascha, * great! Thanks for sharing this solution! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/plugin/tablepress/reviews/) here in the plugin directory. Thanks! * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9053506) * Just FYI: * Similar To _Firefox_ there was the same problem with _Chrome_, _Opera_ and _Safari_. This is why I have changed the code to * ``` jQuery(document).ready(function($) { /* Extend "search input" with a "clear button". */ /* Detect browser type. Found here and modified: https://wp-mix.com/detect-chrome-ie-firefox-opera-safari/ */ var b = navigator.userAgent; var chrome = b.indexOf('Chrome') > -1; //var explorer = b.indexOf('MSIE') > -1; var firefox = b.indexOf('Firefox') > -1; var safari = b.indexOf("Safari") > -1; var opera = b.indexOf('Opera') > -1 || b.indexOf('OPR') > -1; // Special cases if (chrome && safari) safari = false; if (chrome && opera) chrome = false; if (firefox || chrome || opera || safari) { // Force delayed execution of jQuery setTimeout(function() { // Add button-link to the end of the input field. var c = 'fa fa-times'; var s = 'border: 0px; position: absolute; margin-left: -25px; margin-top: 15px; cursor: pointer;'; var button = ''; jQuery('div.dataTables_filter > label').append(button); // Empty input field on button click and refresh table. jQuery('div.dataTables_filter > label > a').click(function() { jQuery('div.dataTables_filter > label > input[type="search"]').val('').trigger('keyup'); }); }, 0); } }); ``` * Note that there is NO version testing! I am sure that there are scripts doing this job but (currently) it’s ok for me :). Here is the result: [http://www.regionalmuseum-alsfeld.de/dokumente/berichte/zeitnah/artikel/](http://www.regionalmuseum-alsfeld.de/dokumente/berichte/zeitnah/artikel/) * Thank you again for your fast and professional help! * Best regards and have a nice weekend Sascha * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9058614) * Hi Sascha, * oh, indeed, it’s getting a bit messy with multiple browser checks. Let’s hope that Firefox supports this natively soon, so that this is no longer necessary. * Best wishes, Tobias * Thread Starter [sesselschwitzer](https://wordpress.org/support/users/sesselschwitzer/) * (@sesselschwitzer) * [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/#post-9065364) * Hello Tobias, * after analysing the behaviour of MSIE I’ve added hiding/showing the clear button depending on an empty or not-empty input. Additionally I’ve installed the “PHP Browser Detection” and put the jQuery calls into variables. This is my final solution (I hope so …): * ``` jQuery(document).ready(function($) { function addClearButton() { // define jQuery #1 and #2 var jLabel = jQuery('div.dataTables_filter > label'); var jInput = jQuery('div.dataTables_filter > label > input[type="search"]'); // create new tag: (c)lass, (s)tyle and (n)ame var c = 'fa fa-times'; var s = 'border: 0px; color: black; cursor: pointer; position: absolute; margin-left: -25px; margin-top: 15px;'; var n = 'a'; var tag = '<' + n + ' class="' + c + '" style="' + s + '" />'; // append tag to DOM jLabel.append(tag); // define jQuery #3 (Must be called AFTER appending the tag to DOM!) var jClear = jQuery('div.dataTables_filter > label > ' + n); // show tag only if there is any input (keep space if 'hodden') jInput.keyup(function() { jClear.css('visibility', jInput.val() ? 'visible' : 'hidden'); }); // empty input field on tag click and hide tag jClear.click(function() { jInput.val('').keyup(); }); // update tag 'visible' after refreshing the page jInput.keyup(); } // force delayed execution setTimeout(addClearButton, 0); }); ``` * I’ve tested under Windows 7 with the newset versions of “Firefox”, “Opera”, “ Chome” and (obsolete) “Safari”. It works fine! * See: [http://www.regionalmuseum-alsfeld.de/dokumente/berichte/zeitnah/artikel/](http://www.regionalmuseum-alsfeld.de/dokumente/berichte/zeitnah/artikel/) * Perhaps you are going to modify and use it for TablePress or a new extension. You are welcome :). * Cheers Sascha Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/refresh-table/page/2/?output_format=md) [→](https://wordpress.org/support/topic/refresh-table/page/2/?output_format=md) The topic ‘Refresh table’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 16 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/refresh-table/page/2/#post-9065421) * Status: resolved