2011-09-09 1 views
1

경고 : Newbe 질문입니다. :-)

Ajax를 사용하여 폼 데이터를 MVC3 컨트롤러로 보내고 Json을 다시 가져옵니다. 성공에 JQuery : 두 번째 .html() 호출이 이전 .css(), delay() 및 fadeIn() 호출을 무시합니다.

, 내가하려고 해요 :

  1. 스토어 div 내용
  2. 문자열 인합니다 (JSON 결과와 형태 div에서 HTML을 교체 (.html()를 호출) 원형 - " 삼초
  3. 에 대한 성공 ")
  4. 지연은 원 ž의 원래 HTML
  5. 페이드와 형태 div에서 HTML을 교체 형식

모두 작동합니다. 그러나 Success html이 표시되면 즉시 원래 양식 html을 양식 div에 넣는 두 번째 .html() 호출에 의해 날아갑니다. 그 사이의 .delay(3000).css('display','none') 호출은 무시됩니다.

증명 : 아래 소스 코드에서 다음 코드 줄을 주석 처리하면 성공 메시지가 표시됩니다.

$('#frmSignup').css('display', 'none'); 
$('#frmSignup').html(original).fadeIn(); 

비슷한 케이스 및 해결 방법을 찾았지만 찾을 수 없습니다. 이것이 명백하다면 열심히 저를 때리지 마십시오. ;-)

도움을 주셔서 감사합니다!

소스 섹션.

$ ('양식') 살 ("제출", 기능 (이벤트) { 에서는 event.preventDefault();

var form = $(this); 
var original = $('#frmSignup').html(); 

$.ajax({ 
    url: form.attr('action'), 
    type: "POST", 
    data: form.serialize(), 
    beforeSend: function() { 
     $('#goarrow').fadeOut(); 
     $('#ajaxloader').fadeIn(); 
    }, 
    complete: function() { 
     $('#ajaxloader').fadeOut(); 
     $('#goarrow').fadeIn(); 
     //$('#Email').val(""); 
    }, 
    success: function (data) { 
     if (data[0]) { 
      $('#frmSignup').css('display', 'none'); 
      $('#frmSignup').html(data[1]).fadeIn().delay(3000); 
      $('#frmSignup').css('display', 'none'); 
      $('#frmSignup').html(original).fadeIn(); 
     } else { 
      $("#ajaxresponse").html(data[1]); 
      //$.validator.unobtrusive.parse("form"); 
     } 
    }, 
    error: function (jqXhr, textStatus, errorThrown) { 
     alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); 
    } 
}); 
return false; 

});

+0

.hide()를 사용할 수 있습니까? jq 사이트에서 '지연'을 사용하는 모든 예는 체인을 사용합니다. html (data [1]) .fadeIn(). 지연 (3000) .html (원본) .fadeIn(); ' – bfavaretto

+0

안녕하세요. 예, 연결을 시도하고 같은 결과를 얻었습니다. 나는 디버깅을 목적으로 섹션을 주석 처리하기 쉽도록 호출을 끊었다. –

답변

0

나는() .delay 사용 경험의 톤이없는하지만 당신은 단지

$('#frmSignup').css('display', 'none'); 
$('#frmSignup').html(data[1]).fadeIn(); 
setTimeout(function(){ 
    $('#frmSignup').css('display', 'none'); 
    $('#frmSignup').html(original).fadeIn(); 
},3000); 

의 setTimeout

사용 또는 당신이 jQuery를 워드 프로세서에 따라 지연을 사용할 때 요소를 체인 시도 할 수 있습니다. 대신 ('디스플레이', '없음')를 .CSS를 사용하는

또한, 당신은 당신이 모든 체인 시도해 봤어

+0

답변 해 주셔서 감사합니다. 모든 브라우저에서 매력적이었습니다. –

+0

JQuery 솔루션이 있는지 궁금합니다. –

관련 문제