jquery 도구 오버레이 : Ajax 응답을 기반으로 오버레이 열기

Question

버튼 클릭시 오버레이를 열려고합니다. 버튼은 ajax 호출과 관련이 있습니다. 반환하면 오류가 오버레이를 열어야하지만 성공하면 오버레이가 열리지 않습니다.

ajax 응답의 성공/오류에 관계없이 오버레이가 열리는 현상이 발생합니다. 아약스 응답이 아니라 버튼 클릭시 열립니다. 나는 무엇을 여기에서 놓치고 있냐?

$('#PostQuestion').overlay({ 
    target: "#template" 
}); 

기본적를 클릭 핸들러를 정의하고 여기에

는이 때문에 나는

//Overlay setup 
$('#PostQuestion').overlay({ 
    target: "#template" 
}); 

//Ajax call setup 
$('#PostQuestion').click(function() { 
    $.ajax({ 
     url: '/ask_away', 
     dataType: "json", 
     data: {question: 'something'}, 
     type: 'POST', 
     cache: false, 
     success: function(response) { 
      alert("It was a success"); 
     }, 
     error: function(request, error) { 
      $('#PostQuestion').data('overlay').load(); 
     } 
    }); 
}); 

<!-- HTML Here --> 
<div id="template">You got an error</div> 
<div id="PostQuestion">Ask Question</div> 

Answer 1

오버레이 성공의 regardles을 보여주는 이유는/아약스 호출의 오류는 ... 시도하고있는 무슨이다 #PostQuestion div를 클릭하여 오버레이를 엽니 다. 따라서 PostQuestion div를 클릭하면 아약스를 전송할뿐만 아니라 오버레이도 표시합니다 (위의 코드 스 니펫의 결과가 나온 것처럼).

원하는대로 작동하게하려면 아래 코드를 확인하십시오. Ajax 호출이 200 OK를 반환하지만 적절한 json 데이터는 반환하지 않더라도 오류 처리기가 사용될 것이므로 개발하는 동안이를 염두에 두십시오.

$(function() { 
      //Overlay setup 
      //select the overlay element in the jQuery selector and not the trigger element 
      $("#template").overlay(); 

      //Ajax call setup 
      $('#PostQuestion').click(function() { 
       $.ajax({ 
        url: '/ask_away', 
        dataType: "json", 
        data: {question: 'something'}, 
        type: 'POST', 
        cache: false, 
        success: function(response) { 
         alert("It was a success"); 
        }, 
        error: function(request, error) { 
         $("#template").data('overlay').load(); 
        } 
       }); 
      }); 
     })