CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Tushar
Tushar

Reputation: 1470

Show or Hide a div element using jQuery

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.

Upvotes: 3

Views: 1013

Answers (4)

Dave Salomon
Dave Salomon

Reputation: 3287

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

Upvotes: 2

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

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

Upvotes: 2

Tushar
Tushar

Reputation: 1470

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.

Upvotes: 3

KiV
KiV

Reputation: 2263

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

                }
            });
        }

        );

    });

Upvotes: 4

Related Questions