AJAX redirect after successful HTTP Post

Question

I'm using AJAX to post data and want to redirect users to https://example.com/dashboard/ExportExcelSales after success.

I've tried using location.href but it did not work as expected.

Below is a snippet of my code, running a HTTP POST using AJAX;

$("#analysis").click(function() {
    $.ajax({
        type: "POST",
        url: "dashboard/ExportExcelSales",
        data: {
            dateStart: $('#dateStartTanggalbarang').val(),
            dateEnd: $('#dateEndTanggalbarang').val(),
            area: $('#areaFill').val(),
            booth: $('#boothFill').val(),
            acam: $('#acamFill').val(),
        },
        dataType: "JSON",
        async: false,
        success: function (response) {
            location.href = "dashboard/ExportExcelSales";
        }
    });
});

This is my controller;

public function ExportExcelSales() {
    $dateawal = $this->input->post("dateStart");
    $dateakhir = $this->input->post("dateEnd");
    $area = $this->input->post('area');
    $booth = $this->input->post('booth');
    $acam = $this->input->post('acam');

    $data = array(
        'data' => $this->M_Sales->tableExport(
            $dateawal,
            $dateakhir,
            $area,
            $booth,
            $acam
        ),
        'dateakhir' => $dateakhir,
        'dateawal' => $dateawal,
        'area' => $this->M_Sales->areaSelect($area),
        'booth' => $this->M_Sales->boothSelect($booth),
        'acam' => $this->M_Sales->acamSelect($acam),
    );

    $path = "";
    $data = array(
        "page" => $this->load("Export Data Sales", $path),
        "content" =>$this->load->view('layouts/exportExcelSales', $data, true)
    );
    $this->load->view('layouts/exportExcelSales', $data);
}

What am I doing wrong and how can I fix it?

@Gilang Permana Create error handler for ajax request and check for errors - success handler is probably not even firing. — fen1x, May 06 '19 at 03:30
Possible duplicate of [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — nyedidikeke, May 06 '19 at 04:13

Eddie · Accepted Answer · 2019-05-06T04:01:50.473

You are using post on your backend and you are just redirecting on the frontend.

Your options are:

Option 1: Using GET

On your js, construct the URL when success. Like:

$("#analysis").click(function() {
  $.ajax({
    ....
    success: function(response) {
      var dateStart = $('#dateStart').val();   //Getting values from inputs.
      var dateEnd = $('#dateEnd').val();       //Update the input ids accordingly 
      var area = $('#area').val();
      var booth = $('#booth').val();
      var acam = $('#acam').val();
      location.href = "dashboard/ExportExcelSales?dateStart=" + dateStart + "&dateEnd=" + dateEnd + "&area=" + area + "&booth=" + booth + "&acam=" + acam;
    }
  });
});

On your backend, you can use $this->input->get to get the value

public function ExportExcelSales(){
    $dateawal = $this->input->get("dateStart");
    $dateakhir = $this->input->get("dateEnd");
    $area = $this->input->get('area');
    $booth = $this->input->get('booth');
    $acam = $this->input->get('acam');
    ....
}

Option 2: Using POST

You can put your input in a form like:

<form id="exportExcelSales" action="layouts/exportExcelSales" method="post">
    <input type="text" name="dateStart"><br>
    <input type="text" name="dateEnd"><br>
    <input type="text" name="area"><br>
    <input type="text" name="booth"><br>
    <input type="text" name="acam"><br>
</form>

On your js, you can submit the form by calling submit() method:

$("#analysis").click(function() {
  $.ajax({
    ....
    success: function(response) {
      $("#exportExcelSales").submit(); //SUbmit the exportExcelSales form.
    }
  });
});

No need to change your layouts/exportExcelSales code.

Thank you for commenting, I got enlightenment from your comment — Gilang Permana, May 06 '19 at 06:42

AJAX redirect after successful HTTP Post

1 Answers1

Option 1: Using GET

Option 2: Using POST