CODEWITHSUNDEEP
javascriptphpjqueryajaxcodeigniter
AL DI
AL DI

Reputation: 560

Returning html as ajax response

I have web page that submits a form via AJAX in codeigniter, submission works great, and the php script works as well, but when php is done it return an HTML view as a response to Ajax so it repopulates a div but instead of repopulating it try's to download the file. Chrome console shows

Resource interpreted as Document but transferred with MIME type application/text/HTML

has me confused because I use the same code in another page and it works fine.

This is my Jquery script

$("#addpaymentform").submit(function (event) {
    var formdata = $(this).serialize();
    $.ajax({
        type: "POST",
        data: formdata,
        url: baseurl + 'sales/add_payment',
        success: function (data, status, xhr) {
            var ct = xhr.getResponseHeader("content-type") || "";
            if (ct.indexOf('html') > -1) {
                $('#paymets').html();
                $('#payments').html(data);
                 $('#addpaymentform').each(function() { this.reset() });
            }
            if (ct.indexOf('json') > -1) {
                $("#Mynavbar").notify(
                        data,
                        {position: "bottom center"}
                );
         $('#addpaymentform').each(function() { this.reset() });
            }
        }

    });
    event.preventDefault(); // this will prevent from submitting the form.
});

and this is my controller

function add_payment()
    {

        $this->form_validation->set_rules('fpay', 'Type of payment', 'trim|required|alpha');
        $this->form_validation->set_rules('payment', 'Payment', 'trim|numeric');
        $this->form_validation->set_error_delimiters('', '');

        if ($this->form_validation->run() == FALSE) { // validation hasn't been passed
            header('Content-type: application/json');
            echo json_encode(validation_errors());
        } else {
            $fpay = filter_var($this->input->post('fpay'), FILTER_SANITIZE_STRING);
            $payment = filter_var($this->input->post('payment'), FILTER_SANITIZE_STRING);
            if(isset($_SESSION['payments'][$fpay]))
            {
                $temp = $_SESSION['payments'][$fpay] + $payment;
                $_SESSION['payments'][$fpay] = $temp;
                header('Content-type: application/html');
                 echo $this->_loadpaymentcontent();
            }
        }

    }

function _loadpaymentcontent() {
        $this->load->view('payment_content');
    }

Hope someone can point me in the right direction I've been stuck on this for 2 days.

Thanks everyone.

Upvotes: 1

Views: 4946

Answers (2)

echology
echology

Reputation: 397

I had the same problem and i successfully solved it by putting an exit; after the value which is returned to the ajax call in the controller method.

In your case it will be:

echo $this->_loadpaymentcontent();
exit;

What exit does here is it limits the returned value to the value which should be returned to the ajax call and exits before the html is appended to the returned value.

This is what is obvious per the effect it produces.

Upvotes: 3

void
void

Reputation: 36703

Yo need to set up your AJAX.

$.ajax({
  type : 'POST',
  url : baseurl + 'sales/add_payment',
  dataType : 'html', // Will set the return type of the response as AJAX.

  ... Keep rest of the code same.

Upvotes: 0

Related Questions