Looks like Submit button isn’t working because of delay

Anonymous

#260151

Hi, I’m developing a website (still under construction) on which I like to use the Search and Filter plugin. I have implemented a form on the homepage filtering several categories as well as some custom terms. When the visitor selects for example the category of their choice the system needs some time to actually filter. When you click on the submit button during this “loading time” it obviously doesn’t work because the system isn’t ready yet. Because of this it seems that the form or button isn’t working. It it possible to grey out the button until it’s ready to click? Or use a rotating gif (before submit) indicating that it’s still loading the results? Thank you for your reply.

Anonymous

#260154

Forgot to select the “Notify me of follow-up replies via email” option. Done now. You can ignore this latest reply.

Trevor

#260227

Are you using Auto Count, my guess is yes? You could use JavaScript to disable the button. Along these lines:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
// disable the button, grey it out, or whatever
  });
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
// enable the button, restore it, or whatever
  });
}(jQuery));</script>

Anonymous

#260362

Hi Trevor,

Thanks for your reply. Yes, I’m using auto count.

My javascript knowledge is really bad. I don’t know what to put in the lines:

// disable the button, grey it out, or whatever
// enable the button, restore it, or whatever

If possible could you provide me of the script making the button hidden (not visible) when it’s loading the results after filtering and make it visible again when the results are loaded?

I would very much appreciate that!

Anonymous

#260364

This is what I have now but it doesn’t work:

<script>(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
	$(".sf-field-submit").hide();
 });
 $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
	$(".sf-field-submit").show();
 });
}(jQuery));</script>

Anonymous

#260366

And this also doen’t work:

<script>(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
	elem.style.display = 'none';
 });
 $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
	elem.style.display = 'block';
 });
}(jQuery));</script>

Like I said, I’m not really good at javascript… Sorry!

Trevor

#260370

I am not sure hiding it would work, as things might look very odd as the page moves around to resize objects. Maybe fade it?

Can you make sure that code is not currently in place, and then are you able to send me a live link/URL to your search page so I can take a look?

Anonymous

#260372

Fading it would be perfect Trevor. Great suggestion 🙂
I deleted the scripts. This is the url: https://sunrentals.k-dushi.com/

Trevor

#260383

Can you fist change this custom CSS:

li.sf-field-submit input {
    border: 0px !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D !important;
    background-color: #FFD618 !important;
}
li.sf-field-submit input:hover {
    background-color: #2B255D !important;
    color: #FFD618 !important;
}

to this (no !importants):

.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input {
    border: 0px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D;
    background-color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input:hover {
    background-color: #2B255D;
    color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled,
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled:hover {
    color: #aaa;
    background-color: #ddd;
    cursor: default;
}

So the code becomes:

<script>(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').addClass('disabled');
 });
 $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').removeClass('disabled');
 });
}(jQuery));</script>

I think. If it doesn’t work, then check if the script is actually on the page. How did you add it to the page?

Anonymous

#260387

Works like a charm! I work with the GeneratePress theme and always include scripts as a hook in wp_head. So that works fine! Thank you so much!! Great work!

[Author]

Posts