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>

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.

• javascript
• jquery
• html
• css
• ajax

• 2 $('#sidebar-container').show() ll solve your problem – Gibbs Commented Nov 11, 2014 at 9:54
• 2 please, read this 2 articles api.jquery./show and api.jquery./hide – demo Commented Nov 11, 2014 at 9:56
• how is the ajax-call triggered ? if it's an form submit, the page could be reloaded, so the succes-function won't trigger. It could be helpfull if you post some of your html-code too – empiric Commented Nov 11, 2014 at 10:03
• yes Ajax is triggered on Ajax submit button click... should I create a button instead of submit? – Tushar Commented Nov 11, 2014 at 10:06
• is the site reloading after the submit? – empiric Commented Nov 11, 2014 at 10:08

4 Answers 4

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();

                }
            });
        }

        );

    });

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.

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()

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