양식을 제출 페이지

Question

다시로드하지 않고 colorbox를 업데이트하는 방법이있는 최대 따르 이제 jQuery change content of colorbox

초기 colorbox (test_2.html)의 내용을 간단한 형태는 다음과 같습니다 예를 들어

<form id="foo" action="test_3.html"> 
    <imput type="submit" id="formInput" value="send form"> 
</form> 

양식을 보내야하며 test_3.html의 내용을 동일한 colorbox에로드해야합니다. 당신이 당신의 메인 페이지의 docReady이를 추가하는 경우

Answer 1

, 그것은 모든 것을 알아서해야합니다

$('form').live('submit', function(e){ 
    var successHref = this.action, 
     errorHref = "formError.php"; 

    e.preventDefault(); 
    $('#cboxLoadingGraphic').fadeIn(); 
    $.ajax({ 
     type: "POST", 
     url: "processForm.php", 
     data: {someData: $("#someData").val()}, 
     success: function(response) { 
      if(response=="ok") { 
       console.log("response: "+response); 
       $.colorbox({ 
        open:true, 
        href: successHref 
       }); 
      } else { 
       $.colorbox({ 
        open:true, 
        href: errorHref 
       }); 
      } 
     }, 
     dataType: "html" 
    }); 

    return false; 
}); 

이 코드는하지만, 몇 가지 가정을합니다. 그 중 하나는 "processForm.php"(보시다시피)로 데이터를 보내고 모든 것이 잘 풀리면 "ok"(일반 텍스트, json 없음)를 예상한다는 것입니다. 응답이나 오류 처리에 신경 쓰지 않는다면 action에 설정 한 페이지로 if-else 블록과 열린 colorbox를 제거하면됩니다. 어쨌든, 당신은 아마 이것을 조정하고 싶을 것이다. 그러나 그것이 당신에게 그것이 어떻게 행해질 수 있는지에 대한 아이디어를 준다.