Split: Hide Search Results on Page Load

Anonymous

#49704

NOTE from Trevor: Split this from a closed thread:

https://support.searchandfilter.com/forums/topic/hide-search-results-on-page-load/

Hi! I’m also trying to prevent initial display of search results. Alas, my intermediate javascript skills are insufficient to completely figure this one out. I’ve successfully hidden the initial search results via CSS – that’s the easy part:

div#search-filter-results-8513, h4#searchResults {
    display:none !important;
    background-color: red;
}

Finally, I’ve added code to my functions.php to load the following javascript on the results page:

 jQuery(document).ready(function($) {

$(".searchandfilter").on("sf:ajaxfinish",function(){
	console.log("ajax complete");
   $('.search-filter-results').show();
});

});

But I’m sure it’s not right. And it sure isn’t working.

Can you point me in the right direction?

Thanks!
adam

Anonymous

#49705

Oh, ignore the “background-color: red;” in the above CSS… completely superfluous… 8^[

Trevor

#49740

Instead of your jquery stuff, should it not be like this:

$('.searchandfilter').on('sf:ajaxfinish',function(e, x){
   $('.search-filter-results').show();
   console.log(e);
   console.log(x);
});

Does the display: none need the !important?

Anonymous

#49809

This reply has been marked as private.

Anonymous

#49810

This reply has been marked as private.

Anonymous

#49811

This reply has been marked as private.

Trevor

#49822

Hi Adam

That info will be useful, but this is a bit over my head. Ross will need to take a look, when he is able.

Ross Moderator

#49833

Hey Adam

I had a look.

The issue is your initial CSS – with the !important declaration.

I’m sure you know, but its generally bad practice to use the !important declaration – as it overrides any other CSS declarations being applied.

In the case of jQuery, using show() adds inline CSS to show the element, but because of the !important declaration what jQuery is doing is ignored.

I don’t see why you need the !imporant in your markup, you should be able to do it without CSS and just using the ID:

#search-filter-results-8513
{
    display:none;
}

If you don’t have any other rules targeting the ID #search-filter-results-8513 there should be no reason the above should not work.. (well.. almost)

Anyway, the proper way to fix is to use it without the !important, but if you must use it the quick and dirty fix would be the following instead of show():

.css("display", "block !important")

Hope that helps!

Anonymous

#50300

Hey Ross! Thanks so much. I would have thanked you much sooner, but I just checked here and saw your response now (late on July 5). Funny, I was sure that I checked the “notify me of replies by email” box… oh well.

I’ll actually be tackling this tomorrow but I wanted to quickly respond with my appreciation for your excellent support!

All the best and hopefully my next message will be that it’s all working perfectly!

Adam

Anonymous

#50301

Hi again! OK, I understand why !important is bad and have removed it from my CSS… and slapped myself on the wrist for good measure. But I’ve now stumbled onto an entirely different issue that seems to be the real dealbreaker: my .js file is being rejected by the browser with a JQuery error, and I can’t figure out why.

Here’s the full .js as I’m importing it:

jQuery(document).ready(function($) {

$('.searchandfilter').on('sf:ajaxfinish',function(e, x){
   $('#search-filter-results-8513').show();
   console.log(e);
   console.log(x);
});

});

I understand the jQuery(document).ready(function($) {as necessary for the $ references to work – and I am loading two other .js files that are structure the same way, and do NOT throw an error. Yet this one, the third one I’m loading, not only throws the error in the inspector, but that entire enclosing statement is completely removed. Which (seemingly) leads to the error, when the first line now starts with just the “$”.

Here is the entire first section of my functions.php:

<?php 

function e2s_load_scripts() {

    wp_register_script( 
		'hide-checkboxes', 
		get_stylesheet_directory_uri() . '/js/hidecheckbox.js', 
		array ( 'jquery' ),
		'9.9.9'
    ); 
    
    wp_enqueue_script( 'hide-checkboxes' );

    wp_register_script( 
		'rolldown-full-content', 
		get_stylesheet_directory_uri() . '/js/rolldowns.js', 
		array ( 'jquery' ),
		'9.9.9'
    ); 
    
    wp_enqueue_script( 'rolldown-full-content' );

    wp_register_script( 
		'hide-search-results', 
		get_stylesheet_directory_uri() . '/js/hideSearchResults.js', 
		array ( 'jquery' ),
		'9.9.8'
    ); 
    
    wp_enqueue_script( 'hide-search-results' );

    
}

function e2s_load_admin_script() {
 
	wp_enqueue_script(
	   'express-lifts-total',  
		get_stylesheet_directory_uri() . '/js/autosumAdam.js' 
	);	

}

add_action ( 'wp_enqueue_scripts', 'e2s_load_scripts' );

Oh, and just to keep things REALLY interesting (though this may have to break off as a separate thread):

The Search button doesn’t show up in Firefox!

In a word…. arrrghhh!

Thanks for any further clues or advice…

[Author]

Posts