jQuery의 fadeIn을 AJAX없이 사용할 수 있습니까?

Question

양식을 제출할 때가끔 사용자에게 보여주고 싶은 메시지가 있습니다. 제출 버튼을 클릭하면 해당 메시지가 jQuery fadeIn이됩니다. 제출물에 AJAX가 관련되지 않은 경우이를 달성 할 수 있습니까?

이 다음은 샘플 장고/파이썬 코드입니다 :

# View code 
message = 'feedback to user' 

# Template 
<div id="messages">{{ message }}</div> 

의 해당 PHP 코드 위가 될 수 있습니다

<?php 
$message = 'feedback to user'; 
?> 
<div id="messages"><?= $message ?></div> 

은 내가 POST 후 페이드 위 #messages를 원한다. 어떻게하면 될까요?

Answer 1

양식을 게시 한 후 페이지 새로 고침이 발생합니다. 대부분의 양식은 웹에 일반적으로 표시됩니다.

물론 이죠. 마음에 점진적 개선으로, CSS로 볼 수 #messages을 유지하고 jQuery를 그것을 숨기고 그것을 페이드 : 당신이 당신의 웹 페이지의 요소를 애니메이션에 대한

$(function() 
{ 
    $('#messages').hide().fadeIn(); 
}); 

fadeIn() 단지 기능입니다. Ajax 요청과는 전혀 관련이 없습니다.

Answer 2

그냥 같이, 당신의 document.ready 이벤트 핸들러에 있습니다

이

$(function() { 
    $("#messages").fadeIn(); 
}); 

가 id="messages"이 있다면, 그것을 찾을거야, 그리고 그것을 페이드 ... 그렇지가 있다면, 그건 괜찮아요과 원 '오류. 이 방법 <div id="messages">에서

$(function() { 
    $("#messages").filter(function() { return $(this).text() != ""; }).fadeIn(); 
}); 

이 항상 존재하지만, 일부 텍스트가있을 경우에만 페이드 인 : 당신이 그것을 페이드하기 전에 테스트를했다 있는지 확인하고 싶었다면, 당신은 역시 이런 할 수 있습니다.

Answer 3

먼저, 내가 주문한/요청한 것과 정확히 똑같지는 않다. 나는 너와 같이 시작했다. 그런 다음 아약스 호출을위한 "통조림"물건을 보여주고 싶었고, 다른 것을 위해 시간있는 메시지를 보여주고 싶었다. 메시지는 그래서이 함께했다 : 다음 CSS

.ajaxLoading 
{ 
    width: 100%; 
    background-image: url("../Images/ajax-loader.indicator.gif"); 
    background-repeat: no-repeat; 
    background-position: left middle; 
} 
.myErrorStatus 
{ 
    text-align: center; 
    width: 100%; 
} 
.myErrorStatusText 
{ 
    color: #FF0000; 
    font-weight: bold; 
} 

/* show message for interval */ 
var saveMessageText = 'Saving...'; 
function ShowStatus(saveMessage, message, timeInMilliseconds) 
{ 
    var errorMessage = $("#Errorstatus"); 
    if (saveMessage) 
    { 
     errorMessage.show(); 
     var myInterval = window.setInterval(function() 
     { 
      message = message + '...'; 
      errorMessage.text(message); 
      errorMessage.show(); 
     }, 1000); 
     window.setTimeout(function() 
     { 
      clearInterval(myInterval); 
      errorMessage.hide(); 
     }, timeInMilliseconds); 
    } 
    else 
    { 
     errorMessage.text(message); 
     errorMessage.show(); 
     window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds); 
    }; 
}; 

을 사용 (당신이 것을 원하는 경우)

<div class="myErrorContainer"> 
     <div class="myErrorStatus ajaxLoading " id="myErrorStatus"> 
      <span id="Errorstatus" class="ui-state-error-text myErrorStatusText"></span> 
     </div> 
    </div> 

조금 아약스 로딩을 보여줍니다 (당신이 errorMessage.show(); errorMessage.fadein();에 변화를 주),이에 넣어 모든 ajax 호출에 표시 : (myUserName javascript var

ShowStatus(true, 'Update Failed with unknown Error', 4000); 

참고 : iable은 사용자 이름)

이

/* 아약스 방법 */

/* show the message that data is loading on every ajax call */ 
var loadingMessage = 'Please wait loading data for ' + myUserName; 
$(function() 
{ 
    $("#Errorstatus") 
    .bind("ajaxSend", function() 
    { 
     $(this).text(loadingMessage); 
     $(this).show(); 
    }) 
    .bind("ajaxComplete", function() 
    { 
     $(this).hide(); 
    }); 
}); 

그런 다음과 같이 사용할 수있다 당신이 아약스 배경을 원하지 않는 경우 표시기를 사용하면 $('#myErrorStatus').removeClass('ajaxloading');을 수행 한 다음 나중에 $('#myErrorStatus').addClass('ajaxloading');으로 바꿀 수 있습니다.