使用jQuery显示或隐藏div元素

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.

我是jquery的新手,我试图隐藏某些div元素,然后在我的Ajax调用成功时显示它们。当页面加载时,浏览器隐藏div元素,在Ajax上成功显示元素,但浏览器再次隐藏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>

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

请帮助我了解正在发生的事情以及如何避免这种情况。

4 个解决方案

#1

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

您必须首先停止每个元素的当前动画队列(因为非动画CSS更改不会添加到该队列):

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

此外,如其他地方所述,show()是css可见性的更好选项,因为隐藏集显示:无,而不是可见性。

  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.

此外,您可能无法停止提交表单,因此页面将重新加载并重新隐藏div。尝试停止该按钮的默认行为。

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

#2

Use jquery Show event.

使用jquery 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();

                }
            });
        }

        );

    });

#3

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.

问题解决了,我创建了一个表单提交按钮来启动Ajax调用。将其更改为正常输入按钮。因为这个页面正在重新加载。

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

我将提交按钮更改为输入按钮,以解决此问题。

Thanks a lot for all the help.

非常感谢所有的帮助。

#4

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

.hide()将样式设置为display:none。你需要调用.show(),而不是.css({visibility:'visible'});

#1