Forums › Forums › Search & Filter Pro › Looks like Submit button isn’t working because of delay
Tagged: loading, Search and filter form, submit button
- This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by Anonymous.
-
Anonymous(Private) September 21, 2020 at 1:12 pm #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.
Trevor(Private) September 21, 2020 at 8:44 pm #260227Are 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(Private) September 22, 2020 at 3:36 pm #260362Hi 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 whateverIf 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(Private) September 22, 2020 at 3:39 pm #260364This 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(Private) September 22, 2020 at 3:42 pm #260366And 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(Private) September 22, 2020 at 3:54 pm #260370I 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(Private) September 22, 2020 at 3:56 pm #260372Fading it would be perfect Trevor. Great suggestion 🙂
I deleted the scripts. This is the url: https://sunrentals.k-dushi.com/Trevor(Private) September 22, 2020 at 4:55 pm #260383Can 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?
-
AuthorPosts