Showing preloader when 'Enter' is pressed

Asked

Viewed 41 times

0

I need a preloader to be shown after the 'Enter' key is pressed in a search box. I have reached the conclusion below, but it does not work. Can you give me a hand?

        <div id="preloader">
        <div class="inner">
           <div class="">
              <div></div>
              <div></div>
              <div></div>                    
           </div>
        </div>
    </div>

     <div class="x-searchform-overlay">

        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
           <?php     echo get_product_search_form(); ?>
          </div>
        </div>
      </div>


 <script>

$(document).keyup(function(e) {
    e.preventDefault();
    if(e.which == 13 || e.keyCode == 13) {
       $('.preloader').hide();
   }
}); 

</script>
php jquery

  • Before the if insert e.preventDefault(); and see if it works.

  • No change..

  • How’s your .preloader. class. What exactly isn’t working. Edit your question and put some more details.

  • I updated the question.

  • Here $('.preloader'). Hide(); shouldn’t be $('.preloader'). show();

2 answers

0


The problem is that your .preloaderis a id and not a class.

you need to insert jquery to work:

Your code has it kind of like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script>

$(document).keyup(function(e) {
    e.preventDefault();
    if(e.which == 13 || e.keyCode == 13) {
       $('#preloader').show();
   }
}); 

</script>

The right is to put between the tag <head>:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Example:

        $(document).keyup(function(e) {
            e.preventDefault();
            if(e.which == 13 || e.keyCode == 13) {
               alert("Apertou Enter");
           }
        }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>CLIQUE AQUI E APERTE O ENTER</p>

And if it is to show, as told by @Deividson you need to use the show():

   if(e.which == 13 || e.keyCode == 13) {
       $('#preloader').show(); // <-- show() mostra a div
   }

  • I have tested it in several ways, actually... I tried it with class, with id...

  • Error - Typeerror: $ is not a Function[Learn More]

  • 1

    You referenced the Jquery?

  • that’s what I was gonna say

  • hm... can’t say.. how should I make that reference?

-1

e. which == 13 || e.keycode == 13

  • Thanks friend! But it hasn’t worked out yet...

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.