Show or Hide a div element using jQuery

Question

I am new to jquery and I am trying to hide certain div element and then show them on success of my Ajax call. When the page loads, browser hides the div element, on Ajax success the element is shown, but again browser is hiding the div elements.

Code

 <script> $(document).ready(function() { $('#sidebar-container').hide(1000); $('#overall-status').hide(1000); $('#submit-date').click(function() { var processDate = $('#processDate').val(); alert(processDate); $.ajax({ type : "POST", url : "launchapptest", data : processDate, dataType : "json", success : function(result) { alert("Success"); $('#sidebar-container').css({ visibility : "visible" }); $('#overall-status').css({ visibility : "visible" }); } }); } ); }); </script> 

Please help me understand what is happening and how to avoid this.

Answer 1

Use jquery Show event.

$(document).ready(function() {

        $('#sidebar-container').hide(1000);
        $('#overall-status').hide(1000);


        $('#submit-date').click(function() {
            var processDate = $('#processDate').val();
            alert(processDate);
            $.ajax({
                type : "POST",
                url : "launchapptest",
                data : processDate,
                dataType : "json",
                success : function(result) {
                    alert("Success");
                    $('#sidebar-container').show();
                    $('#overall-status').show();

                }
            });
        }

        );

    });

Answer 2

The issue is resolved, I created a form submit button to initiate the Ajax call. changed it to normal input button. The page was reloading because of this.

I changed the submit button to input button, to resolve this issue.

Thanks a lot for all the help.

Answer 3

.hide() sets styling to display:none . You need to call .show() , instead of .css({visibility:'visible'});

Answer 4

You have to stop the current animation queue for each element first (as non-animated CSS changes will not add to that queue):

Also, as mentioned elsewhere show() is a better option to css visibility as hide sets display: none and not visibility .

  success : function(result) {
                alert("Success");
                $('#sidebar-container').stop().show();
                $('#overall-status').stop().show();
            }

Additionally you are possibily not stopping the form from submitting, so the page would reload and rehide the divs. Try stopping the default behavior of that button.

$('#submit-date').click(function(e) {
     e.preventdefault()