CODEWITHSUNDEEP
javascriptjquery
Joelad
Joelad

Reputation: 490

Show div while code is equal to given text

I have this javascript code at the minute that is wrong. I want to show div lds-roller while the text in id = searchFor is equal to _ 

(function() {

  if ($("#searchFor").text() === "_") {
    $('.lds-roller').show();
  }
})();

<div class="lds-roller"><div></div><div></div><div>
</div><div></div><div></div><div></div><div></div><div></div></div>
 <p>
     <span class=""> 

      <span class="">
             <a href="{% pageurl post %}#disqus_thread" id="searchFor"> _
            </a>
      </span>
   </span>
 </p>

It seems like after like 10 seconds there is an HTTP response to change _ to 1 for example. I want lds-roller to not be visible post when this happens. 

.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;

}

Upvotes: 1

Views: 145

Answers (5)

Nitheesh
Nitheesh

Reputation: 19986

You can make use of jQuery keyup function to trigger the input field change.

If the change event is not a keyboard input event, you can make use of change event of jQuery. The main disadvantage of using this is if you are going for a keyboard event, this wont reflect until you are blured from your input field or hitting the enter key.

$(document).ready(function() {
  $("#searchFor").keyup(function() {
    // $("#searchFor").change will also work 
    if ($("#searchFor").val() === "_") {
      $(".lds-roller").show();
    } else {
      $(".lds-roller").hide();
    }
  });
});
.lds-roller {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Press "_" and see the hidden button</p>

<input type="text" id="searchFor" />

<button class="lds-roller">hidden button</button>

Upvotes: 2

Nasira Mohamed Noufal
Nasira Mohamed Noufal

Reputation: 56

 $(document).ready(function() {
  if ($("#searchFor").text() == "_") 
  {
   $('.lds-roller').removeClass('lds-roller');
  }
 });

or


 $(document).ready(function() {
  if ($("#searchFor").text() == "_") 
  {
  $('.lds-roller').css('display','block');
  }
 });

Upvotes: 1

Anis R.
Anis R.

Reputation: 6912

As you mentioned, your text changes after some HTTP request (or similar).

So, one approach would be to first show the div once the page is loaded:

$(document).ready(function() {
    $('.lds-roller').show(); //initially, show the div
});

Then, in your callback function that changes the value of #searchFor, add the following line to hide the div:

$('.lds-roller').hide(); //the info is now retrieved, hide the div

Alternatively, you can use a MutationObserver object to fire an event whenever the contents of your div (#searchFor) has changed. This may be overkill for this problem though.

Upvotes: 0

Amanjot
Amanjot

Reputation: 2058

 $(document).ready(function() {
   if ($("#searchFor").text() === "_") 
   {
       $('.lds-roller').css('display','block');
   }
});

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ).ready() method will run once the page DOM is ready to execute JavaScript code.

Full answer

<style>
    .lds-roller {
        display: none
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchFor">dsfds_</div>
<div class="lds-roller">Hi I'm lds-roller!</div>

<script>
    (function() {
          if ($("#searchFor").text() === "_") {
            $('.lds-roller').css('display','block');
          }
        })();
</script>

Upvotes: 4

GetSet
GetSet

Reputation: 1577

You say you want something to happen while something else is equal to something. This implies either a polled timer to check on that status or an event to be the trigger. You could register an event listener for onchange of searchFor however you will also need an else to your handler to hide the element when the condition of underscore is not satisfied.

Upvotes: 0

Related Questions