Forums Forums Search & Filter Pro Looks like Submit button isn’t working because of delay

Viewing 10 posts - 1 through 10 (of 14 total)
  • 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!

Viewing 10 posts - 1 through 10 (of 14 total)