The hiding/showing of elements is not being executed correctly by jQuery

My web template includes HTML and jQuery code for a project I'm working on.

During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning".

The code properly validates the status dropdown and retrieves the correct data for the table. The table displays correctly as well.

However, when the submit button is clicked, the warning message does not appear, and the table remains visible while the data is loading.

How can I hide the table while the data is loading and display the warning message properly?

  <div class="container-fluid">
  <form id="search_form">
      <div class="container-fluid">
          <div class="row">
              <div class="col-xs-4">
                  {{ render_field(form.status) }}
              </div>
              <div class="col-xs-4">
                  <input type="submit" value="Get Issues" id="submit">
              </div>
              <div class="col-xs-4">
              </div>
          </div>
          <div class="row">
              <div hidden="true" id="warning" class="col-xs-12 center alert alert-warning">
              <p>Data is loading, this might take a few seconds</p>
              </div>
          </div>
          <div class="row">
              <div id="errors" hidden="true" class="col-xs-12 center alert alert-danger">
              </div>
          </div>
      </div>
  </form>

  <script>
  var table;
  $('#submit').click(function(event) {
      event.preventDefault();

      if (!$('#status').val()) {
          $('#errors').html('');
          $("<p>Please select a status</p>").appendTo($('#errors'));
          $("#errors").show();
          $("#table_div").hide();
          return;
      } else {
          $("#errors").hide();
      }

      $("#warning").show();
      //get the data for the table
      $.getJSON("/all_issues/status/" + $("#status").val(), function(data) {
          table = $('#search_table').dataTable( {
              destroy: true,
              "data": data,
          });
          $('#table_div').show();
      });
      $("#warning").hide();
  });

Answer №1

Make sure to put $("#warning").hide() inside the $.getJSON() callback function.

When using $.getJSON() for AJAX calls, the callback function is asynchronous. In your current code, you are hiding the <div id="warning"> immediately after showing it, but you should be hiding it once the JSON data is successfully loaded.

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

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

Halt and anticipate a boolean reply from another function

Is there a way to create two functions in JavaScript, run one of them, then within that function, execute the other and pause until it receives a response (yes or no) before moving on to an if statement? The user's response should be manual. Here is ...

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

The drop-down list was designed with a main button to activate it, but for some reason it is not functioning properly. Despite numerous attempts, the list simply will not display as intended

<html> <body> <button onclick="toggle()" class="nm" > main</button> <div class="cntnr" style="display : none;"> <ul class="cnkid"> <li class="cnkid"><a class="cnkid" ...

Unusual Actions from the Text Field

Please take a look at this link <div id="textarea_wrapper"> <textarea>How and where is my width derived from?</textarea> </div> #textarea_wrapper{ height: 250px; border:thick solid green; } textarea{ background-color: #930; ...

Exploring the concept of reflection in JavaScript and jQuery

Here is a javascript object I have: person.Name = "John"; person.Nick = "Smith"; person.Info = "hi there"; In addition, I have some HTML elements as shown below: <input id="Name" /> <input id="Nick" /> <input id="Info" /> My question ...

What is the best way to retrieve all href links within a ul element on a webpage that includes a scrollbar?

I am trying to extract all href links that are within the list items (li) in this specific unordered list (ul): Click here to view the screenshot Here is my current code snippet: import bs4, requests, re product_pages = [] def get_product_pages(openurl) ...

A website with two distinct pages, where only the first page is refreshed

I have split the content of my HTML page into 2 separate subpages, based on the references provided below: Multiple distinct pages in one HTML file This is how my code is structured: ... <script> function show(shown, hidden) { document.getEle ...

Utilizing JSON for HTML conversion in Codeigniter

public function getCrew(){ $search = $this->input->post('name'); if($this->input->post('ajax') && (!empty($search))){ $result = $this->model->getNames($search); foreach($result as $r){ ...

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

Problem with extJS portal functionality

Currently, I am utilizing this particular URL for my application: . I attempted to swap out the existing chart in the third column with a bar chart and a pie chart (both of which work fine within panels and windows), but I encountered an "h is undefined" e ...

Having issues with the functionality of Bootstrap 4 popover?

In my Spring MVC web project, a Bootstrap popover appears when the help icon is clicked. However, on the first click, the popover opens and moves away from the icon. After closing it and clicking again, the popover correctly positions itself. When I chan ...

Securing string parameters in Django templates for JavaScript function usage

Can anyone help me with a JavaScript function that is returning a set of objects? return Func("{{id}}", "{{name}}") I'm encountering an issue when passing strings that contain quotes, such as "Dr.Seuss' "ABC""BOOk"", which leads to invalid synt ...

Display the matrix in a semi-spiral pattern

I am working with a 3 by 5 matrix, filled with numbers from 1, presented as follows: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 The task is to print the values in a half-spiral order, starting from the bottom left vertically: 11 6 1 5 10 15 12 7 2 4 9 ...

bespoke theme background hue

I currently have material-ui@next installed and I am attempting to customize the background color of the theme. Here is what I have tried: const customizedTheme = createMuiTheme({ palette: createPalette({ type: 'light', primary: purple ...

Exploring the differences between jQuery's methods for retrieving text, HTML, JSON

I'm feeling a bit perplexed: When I use the following code: $.get('http://externhost/somefile.js', callback, 'text'); I receive the error message: XMLHttpRequest cannot load http://externhost/somefile.js. Origin http://www.myho ...

Is there a way to sort through a JSON object using JavaScript?

I have a JSON string that looks like this: { "Animal":{ "Cat":20, "Dog":10, "Fish":5 }, "Food":{ "Pizza":500, "Burger":200, "Salad" ...

Bootstrap form validation issues

Currently, I am utilizing Vue.js along with Bootstrap for the creation of a website. In this process, I have set up a form on which I am implementing my custom validation logic. Everything seems to be functioning correctly until the moment when the user hi ...

What is the best way to connect a navbar item to a specific section on the homepage using bootstrap?

Currently, I am in the process of developing a website for a client. One key feature I would like to implement is linking the "service" navbar item directly to a specific section on the homepage called "Our product." For instance, when a user clicks on the ...

Is there a way to trim the string after the second occurrence of an underscore?

I am faced with the task of extracting file names and types from a list of files in an object and displaying them in a table. The list of files is returned by the server in the format: timestamp_id_filename. For example: 1568223848_12345678_some_document. ...