jQuery and Codeigniter - post form with ajax and show result in fancybox

I'm using this code to achieve what I said in the title:

$("#design-preview").click(function() {

      e.preventDefault();

      var data = $(this).closest("form").serializeArray();

      $.ajax({
        type        : "POST",
        cache       : false,
        url         : base_url,
        data        : data,
        success : function(data) {
          $.fancybox(data, {
            'type'  : 'iframe',
            'width' : 340,
            'height': 500
          });
        }
      });
      return false;
    });

The problem is, I get this from firebug:

"NetworkError: 400 Bad Request - http://domain.info/%3C!DOCTYPE%20html%20PUBLIC"

It somehow adds the result of the form to the link. Does anybody have any idea why is that? Maybe a better suggestion?

EDIT: The response of the ajax post is a HTML page. The HTML code is appended to the link by fancybox, so I guess this narrows a little the research.开发者_开发百科 The post is made correctly, I checked with firebug.

Thank you.

I guess the error lies in the url: base_url parameter as the request has invalid url characters you may show the base_url value,or do you mean <?=base_url();?>

Try hard-coding your URL in there just to see if it will work. Also, I'm not sure what you're trying to accomplish with the $(this).serializeArray() portion of your code. That method is intended for serializing the inputs of a form. I doubt you are 'clicking' a form to trigger the submission.

I'm willing to bet that you are clicking a button within a form to show what something might look like based on the fields of the form... and that is what my example below assumes.

Try this:

$("#design-preview").click(function() {
  var data = $(this).parent('form').serializeArray();
  $.ajax({
    type        : "POST",
    cache       : false,
    url         : 'http://domain.info/foo',
    data        : data,
    success : function(data) {
      $.fancybox(data, {
        'type'  : 'iframe',
        'width' : 340,
        'height': 500
      });
    }
  });
  return false;
});

Lemme know if that works for ya.