Ways to dynamically show a div with jQuery

I am having trouble displaying a loader animation div when a checkbox is clicked. I have tried various solutions mentioned in other posts, but none of them seem to work for me.

$('#checker').click(function() {
  const picture = "..."
//  picture = webcam.snap();
//  alert(picture);
  $('#lds-ring').show();
  $.post('TestCamera', {
    param: picture
  }, function(response) {
    if (response === 'error') {
      alert('An error has been detected, please review the instructions carefully');
    } else {
      window.location.replace('QuestionAndAnalyze.jsp'); /* redirect*/
    }

  }); /*END servletCall*/
}); /*END click*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column load">
  <div class="lds-ring" style="display:none;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>



<input type="checkbox" name="checkVision" id="checker">
<label for="checkVision">I read all</label>

I have searched through older posts for a solution and even tried using the "show()" method, but it did not work for me.

I also attempted the following:

   <div class="lds-ring" style="visibility:hidden;"> </div>
   $('#lds-ring').css('visibility','visible')

Answer №1

  • $(".lds-ring").show() - The selector is a class (.) not an ID (#)
  • for="checkVision" should be changed to for="checker" - the 'for' attribute takes an ID, not a name
  • You can toggle the visibility based on whether the checkbox is checked or not

$('#checker').click(function() {
  $('.lds-ring').toggle(this.checked);
}); /*END click*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="checkVision" id="checker">
<label for="checker">I read all</label>

<div class="column load">
  <div class="lds-ring" style="display:none;">Hello
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

I personally like to enclose the checkbox within the label tag

<label><input type="checkbox" name="checkVision" id="checker">I read all</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to compel Blazor to display a lone, non-breaking space?

Blazor has a default behavior of trimming "insignificant" whitespace during compile time, as mentioned in this Microsoft document. Moreover, Blazor also trims significant whitespace. For instance: <span>some text</span> @if (true) { <sp ...

TemplateEditor serving as an interactive form

I'm working on a form that initially displays certain fields upon page load, and additional fields should appear based on the user's selection from a dropdown. These dynamic fields are EditorTemplates. Is there a way to achieve this functionality ...

Utilizing Express to send a GET request to a search bar

I recently added a search bar to the homepage of my website. Users can input a string into the search bar, which will then be sent as a GET request. I am attempting to retrieve all data from my MongoDB where the input string is found within the name field. ...

"Enhance your website with a dual-column layout using jQuery for

Hello, I am currently utilizing a fiddle link to move one div upward and another div downward simultaneously. While the left column is behaving as expected, I would like to achieve the same functionality for the right column as well. The link being used ...

Having trouble with your mobile dropdown menu not responding to clicks?

I'm having trouble getting a dropdown menu to work on the mobile version of my website. When I click on the dropdown menu image, it's supposed to appear, but it's not working as expected. JSFiddle: https://jsfiddle.net/xfvjv184/ Included ...

Issue encountered when trying to load a Jquery Datatable with input from a textbox

Seeking assistance with this issue. This is the code for my Controller: namespace PruebaBusquedaRun.Controllers { public class TestController : Controller { MandatosModel md = new MandatosModel(); // GET: Test public ActionResult Index() ...

Remove the list by conducting a comparison analysis

<html> <head> <title> Manipulating List Items Using JavaScript </title> <script type="text/javascript"> function appendNewNode(){ if(!document.getElementById) return; var newlisttext = document.changeform.newlist.val ...

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

Looking to change the input field names by increasing or decreasing when clicking on a div using jQuery?

As a beginner in the world of jQuery, I am working on mastering some basic concepts. Currently, my goal is to create auto incrementing/decrementing input field names within a 'div' when clicking on an add/remove button. Below is the HTML code I a ...

JSF Ajax call: Invoking a JavaScript function at the completion

Working on a project with JSF 2.0, here is the form being used: <h:form id="fff" onsubmit="reloadMap();"> <h:selectOneMenu value="#{rentCarPoolBean.state}"> <f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" /> ...

Text breaks down as it stretches past a certain length

Implementing a manual line break resolves the issue, however, without it, everything becomes jumbled together. Here is the CSS code being used: header { background: #fcb9aa; color: #f3d9d9; height:100px; margin: 0; padding: 0; posi ...

Acquiring information to display in a div using innerHTML

I aim to create a div that displays different animal sounds, like: Dog says Bark Bark I've attempted various methods but I'm unable to get each pair in the array to show up in a div: const animal = [ {creature: "Dog", sound: "B ...

A dynamic jQuery plugin for creating captivating image slideshows

I am in need of a recommendation for a jQuery carousel plugin that has the capability to create a carousel similar to the one shown in the image. Specifically, I am looking for a carousel where the active image item moves to the center and becomes larger. ...

Tips for accessing distinct ng-model values within ng-include within a single HTML document

Consider the following scenario with two HTML files: index1.html <input type="text" ng-model="model.Name"> <!-- Some complex form !--> index.html <div>Journalist's Details: Name:<div ng-include="index1.html"></div> ...

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

Using the `implode()` function in PHP to concatenate values for a MySQL query

Recently, I ran into an issue while using the implode function in PHP. <?php $insertValues[] = "(default,'{$y}', '{$p}', '{$o}', '{$i}', '{$u}','AMM-40','test')"; $query_status = ...

Fuzzy backdrop for a dynamic navigation bar

Is there a way to achieve a blurred background on a bootstrap 4 navbar? I've attempted using the CSS blur filter, but it ends up blurring all the content within the div as well. Some people have resorted to using SVG to blur whatever is behind the di ...

What could have caused the issues with my validation in cakephp3.4.13?

Every time I try to enter a value, it keeps saying 'This value is already in use' even though it's not yet in the database. Occasionally, it displays a message saying "This field cannot be left empty." public function validationDefault(Val ...

CSS: Struggling to properly position two flex items

I'm having some trouble with the alignment in my flex container. The title is perfectly centered, but the breadcrumb content is not aligning correctly. Specifically, I want the breadcrumbs to be right-aligned and positioned 25px from the top within t ...

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...