Modify the css styling of a div element once the ajax call returns a successful

Question

Modify the css styling of a div element once the ajax call returns a successful

I am facing an issue with the visibility of my buttons. Currently, I have 3 buttons whose visibility is set to hidden. Upon clicking a specific button, an Ajax call is triggered where I check if the table rows are greater than 0 in the success callback:

$('#addRefBtn').on('click', function(e){
    e.preventDefault();
    var get_input = $('#qr_ref').val();
    var get_po = $('#get_po').val();

    $.ajax({
        type: 'POST',
        url: 'validate_qr.php',
        data: {
            qr_code: get_input,
            po_ID: get_po
        },
        success: function(result)
        {
            var rowCount = $('#productSalesTable tbody tr.ps').length;

            if(rowCount > 0)
            {
                $('#promoModal, #removeModal, #confirmModal').css('visibility', 'visible');
            }
            else
            {
                $('#promoModal, #removeModal, #confirmModal').css('visibility', 'hidden');
            }
        }
    });
});

The location.reload() was commented out for checking purposes and it confirmed that the button's CSS changes when the table row count is greater than zero.

However, upon page reload, the buttons revert back to their original hidden state which is causing concern.

This is the relevant HTML code:

<div id='promoModal' style='visibility:hidden;'>
    <button type="button" class='btn btn-block btn-primary btn-flat' id="promo_modal" data-poid="<?php echo $_GET['po_ID'];?>">
        Add Promo
    </button>
</div>

<div id='removeModal' style='visibility:hidden;'>
    <input type="button" class='btn btn-block btn-warning btn-flat' id="remove_modal" value="Remove Item">
</div>

<div id='confirmModal' style='visibility:hidden;'>
    <button type="button" class='btn btn-block btn-success btn-flat' id="confirm_modal" data-id="<?php echo $_GET['po_ID'];?>">
        Confirm Transaction
    </button>
</div>

Despite knowing that the code is functioning correctly, the button styles do not change as expected even when the table length is greater than zero.

If anyone has suggestions or feedback on this matter, it would be greatly appreciated!

Thank you for your time.

jquery html css ajax

Answer 1

Answer №1

To sum it up, you just have to invoke the success functionality two times in your code. Look at this snippet for a quick look:

// Initially calling the function that hides rows
// to verify if there are 0 or more rows
// and applying necessary styles
successFunction();     // CRUCIAL!!!!

$('#addRefBtn').on('click', function(e) {
  e.preventDefault();
  var get_input = $('#qr_ref').val();
  var get_po = $('#get_po').val();
  //
  $.ajax({
    type: 'POST',
    url: 'validate_qr.php',
    data: {
      qr_code: get_input,
      po_ID: get_po
    },
    success: function(result) {
      // Do you need to repaint or re-render a DOM element here? (Clarify this requirement)
      //
      // Apply styles or call the function again to reapply styles        
      successFunction();

      // Page reload (Using AJAX loses its purpose with page reload)
      // [SUGGESTION] Instead of reloading, consider rendering DOM elements
      // If DOM elements are being rendered, then call the above successFunction after rendering.
      location.reload();
    }
  });
});

function successFunction() {
  var rowCount = $('#productSalesTable tbody tr.ps').length;
  if (rowCount > 0) {
    $('#promoModal').css('visibility', 'visible');
    $('#removeModal').css('visibility', 'visible');
    $('#confirmModal').css('visibility', 'visible');
  } else {
    $('#promoModal').css('visibility', 'hidden');
    $('#removeModal').css('visibility', 'hidden');
    $('#confirmModal').css('visibility', 'hidden');
  }
}

Answer 2

To sum it up, you just have to invoke the success functionality two times in your code. Look at this snippet for a quick look:

// Initially calling the function that hides rows
// to verify if there are 0 or more rows
// and applying necessary styles
successFunction();     // CRUCIAL!!!!

$('#addRefBtn').on('click', function(e) {
  e.preventDefault();
  var get_input = $('#qr_ref').val();
  var get_po = $('#get_po').val();
  //
  $.ajax({
    type: 'POST',
    url: 'validate_qr.php',
    data: {
      qr_code: get_input,
      po_ID: get_po
    },
    success: function(result) {
      // Do you need to repaint or re-render a DOM element here? (Clarify this requirement)
      //
      // Apply styles or call the function again to reapply styles        
      successFunction();

      // Page reload (Using AJAX loses its purpose with page reload)
      // [SUGGESTION] Instead of reloading, consider rendering DOM elements
      // If DOM elements are being rendered, then call the above successFunction after rendering.
      location.reload();
    }
  });
});

function successFunction() {
  var rowCount = $('#productSalesTable tbody tr.ps').length;
  if (rowCount > 0) {
    $('#promoModal').css('visibility', 'visible');
    $('#removeModal').css('visibility', 'visible');
    $('#confirmModal').css('visibility', 'visible');
  } else {
    $('#promoModal').css('visibility', 'hidden');
    $('#removeModal').css('visibility', 'hidden');
    $('#confirmModal').css('visibility', 'hidden');
  }
}

Answer 3

Answer №2

This snippet demonstrates the usage of toggleClass to show/hide a div after a successful AJAX call.

$(document).ready(function(){


$('#addRefBtn').on('click', function(e){
    e.preventDefault();

    setTimeout(function(){
        console.log('sss');  $('#removeModal').toggleClass('show');  
    }, 3000);
  });
  
  
});

#removeModal {
  display: inline-block;
  border: 1px solid red;
  display: none;
}

.show {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='promoModal' style='visibility:hidden;'>
  <button type="button" class='btn btn-block btn-primary btn-flat' id="promo_modal" data-poid="<?php echo $_GET['po_ID'];?>">
      Add Promo
  </button>
</div>

<div id='removeModal'>
  <input type="button" class='btn btn-block btn-warning btn-flat' id="remove_modal" value="Remove Item">
</div>

<!-- <div><button type="button" class='btn btn-block btn-danger btn-flat' id="void_modal">Void Transaction</button></div> -->
<div id='confirmModal' style='visibility:hidden;'>
  <button type="button" class='btn btn-block btn-success btn-flat' id="confirm_modal" data-id="<?php echo $_GET['po_ID'];?>">   
    Confirm Transaction
  </button>
</div>


 <button type="button" class='btn btn-block btn-success btn-flat' id="addRefBtn">   
    Call Ajax Request
  </button>

Answer 4

This snippet demonstrates the usage of toggleClass to show/hide a div after a successful AJAX call.

$(document).ready(function(){


$('#addRefBtn').on('click', function(e){
    e.preventDefault();

    setTimeout(function(){
        console.log('sss');  $('#removeModal').toggleClass('show');  
    }, 3000);
  });
  
  
});

#removeModal {
  display: inline-block;
  border: 1px solid red;
  display: none;
}

.show {
  display: inline-block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='promoModal' style='visibility:hidden;'>
  <button type="button" class='btn btn-block btn-primary btn-flat' id="promo_modal" data-poid="<?php echo $_GET['po_ID'];?>">
      Add Promo
  </button>
</div>

<div id='removeModal'>
  <input type="button" class='btn btn-block btn-warning btn-flat' id="remove_modal" value="Remove Item">
</div>

<!-- <div><button type="button" class='btn btn-block btn-danger btn-flat' id="void_modal">Void Transaction</button></div> -->
<div id='confirmModal' style='visibility:hidden;'>
  <button type="button" class='btn btn-block btn-success btn-flat' id="confirm_modal" data-id="<?php echo $_GET['po_ID'];?>">   
    Confirm Transaction
  </button>
</div>


 <button type="button" class='btn btn-block btn-success btn-flat' id="addRefBtn">   
    Call Ajax Request
  </button>

Answer 5

Answer №3

One way to hide content is by using a class called display-hide, like this:

.display-hide{
display:none;
}

You can apply this class to HTML elements like this:

<div id='promoModal' class="display-hide">
                    <button type="button" class='btn btn-block btn-primary btn-flat' id="promo_modal" data-poid="<?php echo $_GET['po_ID'];?>">
                      Add Promo
                    </button>
                </div>

To show the hidden content based on a condition, you can do something like this:

if(rowCount > 0)
          {
            $('#promoModal').show();
            $('#removeModal').show();
            $('#confirmModal').show();
          }

Answer 6

One way to hide content is by using a class called display-hide, like this:

.display-hide{
display:none;
}

You can apply this class to HTML elements like this:

<div id='promoModal' class="display-hide">
                    <button type="button" class='btn btn-block btn-primary btn-flat' id="promo_modal" data-poid="<?php echo $_GET['po_ID'];?>">
                      Add Promo
                    </button>
                </div>

To show the hidden content based on a condition, you can do something like this:

if(rowCount > 0)
          {
            $('#promoModal').show();
            $('#removeModal').show();
            $('#confirmModal').show();
          }

Modify the css styling of a div element once the ajax call returns a successful

Answer №1

Answer №2

Answer №3

Similar questions

Ways to retrieve all elements, including those that are hidden, within a CSS grid

Is it possible to invoke a TypeScript function that was previously initialized in the HTML file?

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

Ways to trigger a server function in JavaScript upon closing a browser tab or the entire browser

Guide to implementing the offcanvas sidebar with bookmarks using Bootstrap

ngClass causing styling issue when applying styles

My HTML table is not printing at full width

Verify the input data, accepting solely numerical values up to a specified maximum limit

Create HTML content from a file retrieved from the server

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script

jQuery AJAX encountering parsing error when retrieving data from Laravel controller

"Retrieving the value of an array for a specific DOM element using jQuery

What is the best way to download an updated social media post for a Django user?

Arrange the parallel table columns within their own individual divs to be perfectly aligned

I'm experiencing difficulties with a JavaScript slideshow in Vegas

Text within the footer section

unable to parse JSON

Keep the submenu visible upon clicking the sign-in form / Adjust the background color when the parent li is selected

Guide on displaying property file values in JavaScript within a Spring MVC application

Style Vue slots one by one