Clever Geek Handbook

Show or hide div element using jQuery

I am new to jquery

and I am trying to hide a certain element div

and then show them the success of my call Ajax

. When the page loads, the browser hides the element div

, on Ajax

success, the element is displayed, but again the browser hides the elements div

.

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>
Run codeHide result


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

+3


source to share


4 answers


You must first stop the current animation queue for each element (since non-animated CSS changes will not be added to this queue):

Also, as mentioned elsewhere show()

, this is a better option for css visibility

as hidden sets display: none

rather than visibility

.

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


Also, you can keep the form submitting, so the page will reload and display the div. Try to stop this button's default behavior.

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


source


Use jquery event Show

.



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

                }
            });
        }

        );

    });
+4


source


Problem solved, I created a form submit button to initiate an Ajax call. changed it to normal enter button. This caused the page to reload.

I changed the submit button to enter button to fix this problem.

Thanks for the help.

+3


source


.hide()

sets the style display:none

. You should call .show()

instead.css({visibility:'visible'});

+2


source






More articles:


All Articles