POST form using ajax and then trigger colorbox

Question

I'm trying to post a form using jquery-ajax and at the same time load a hidden div on a colorbox pop-over.

The hidden div to load is called "#hidden-div" .

So far i have the code below:

Any ideas on how to make it post ALL the values and then trigger the colorbox pop-over with the hidden div?

The code below is not posting the data and not triggering the pop over :(

  <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

Replace your ajax statement with this:

  $.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"});
        }

    });