Refresh table

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

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 = '<a class="' + c + '" style="' + s + '"></a>';
			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

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 = '<a class="' + c + '" style="' + s + '" />';
			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/

Thank you again for your fast and professional help!

Best regards and have a nice weekend
Sascha

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 …):

<?php if (is_firefox() || is_chrome() || is_opera() || is_safari()): /* Requires 'PHP Browser Detection' plugin! */ ?>
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);
});
<?php endif ?>

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/

Perhaps you are going to modify and use it for TablePress or a new extension. You are welcome :).

Cheers
Sascha