POST 양식에서 아약스를 사용한 다음 트리거 색상 상자

Question

jquery-ajax를 사용하여 양식을 게시하고 동시에 colorbox pop-over에서 숨겨진 div를로드하려고합니다.

로드 할 숨겨진 div는 "# hidden-div"라고합니다. 이 모든 값을 게시 한 후 숨겨진 DIV로 colorbox 팝 오버 트리거 만드는 방법에

어떤 아이디어 :

지금까지 나는 아래의 코드가?

코드 아래에 데이터를 게시하지 및 양식의 모든 데이터를 직렬화는 .serialize()을 사용할 수있는 형태로 데이터를 전송하려면 :(

<script> 
$(document).ready(function() { 
    $("#frmSS4").submit(function(event,dontCheck) { 
     if(dontCheck === true) return; 
     $.ajax({ 
     type  : 'POST', 
     url  : "http://clientes.cupon0km.com/form.php?form=4", 
     data  : $(this).serialize(), 
     dataType : 'jsonp' 
    }); 
     event.preventDefault(); 
     $("#hidden-div").colorbox({inline:true, width:"auto", fixed:true}); 
    }); 
}); 
</script> 

Answer 1

를 :

$.ajax({ 
      type     : 'POST', 
     url      : "http://clientes.cupon0km.com/form.php?form=4", 
        data     : $(this).serialize(), 
        dataType : 'jsonp', 
     success: function(data) { 
      $.colorbox({inline:true, width:"auto", fixed:true, href:"#hidden-div"}); 
     } 

    }); 

Answer 2

를 통해 팝업을 유발하지, 대신 그것을 하나 개의 입력을하고있다 한 번에 :

data: { email: $('#email').val(), CustomFields_17_4: $('#CustomFields_17_4').val(),  CustomFields_12_4: $('#CustomFields_12_4').val(), CustomFields_13_4:  $('#CustomFields_13_4').val(), CustomFields_16_4: $('#CustomFields_16_4').val() }, 

는 변경할 수에 :

data: $(this).serialize(), 

으로 this은 양식을 참조합니다 (이 코드는 양식의 이벤트 처리기 내에 있으므로).

colorbox 인스턴스를 열려면 success 콜백 함수 내에서 초기화 코드를 호출하기 만하면됩니다. .serialize()에 대한

문서 : http://api.jquery.com/serialize

<script> 
$(document).ready(function() { 
    $("#frmSS4").submit(function(event,dontCheck) { 
     if(dontCheck === true) return; 
     $.ajax({ 
      type  : 'POST', 
      url  : "http://clientes.cupon0km.com/form.php?form=4", 
      data  : $(this).serialize(), 
      dataType : 'jsonp'//this line will allow you to do cross-domain AJAX requests (I believe this is one of your problems) 
     }); 
     event.preventDefault(); 
     //initialize colorbox here, Antonio Languna has an example in his answer 
    }); 
}); 
</script> 

Answer 3

스크립트는 조금 불분명하지만 바로 그것을 understanded 경우이 같은 시도해야합니다 :이와 아약스 문을 교체

<script> 
$(document).ready(function() { 
$("#frmSS4").submit(function(event,dontCheck) { 
    if(dontCheck === true) return; 
    $.ajax({ 
    type: 'POST', 
    url: "http://clientes.cupon0km.com/form.php?form=4", 
    data: $(this).serialize(), 
     success: function(data) { 
       $("#dinero-form").trigger("submit",true); // What is this? 
       $.colorbox({html: $('#hidden-div').html()}); 
     } 
    }); 
    event.preventDefault(); 
}); 
}); 
</script> 

Answer 4

href 대신 사용자 html

$ (# divid) .colorbox ({인라인 : 참, 너비 : "자동", 고정 : true, html : 데이터});