使用AJAX和PHP下载CSV的问题

Question

I am trying to create a panel, where I can select input from 5 dropdowns (4 are multiselect dropdowns) and send them through an ajax call.

In the ajax function I am trying to create a csv downloadable file.

But the issue is, I can get the alert to display the content that should be in the file, but the file isn't downloading neither its getting saved in some folder.

Here's my JavaScript function triggering the ajax call:

function create_csv()
{
    var v = $('#drp_v').val();
    var cnt = $('#drp_cnt').val();
    var ctg = $('#drp_ctg').val();
    var api = $('#drp_api').val();
    var nt = $('#drp_nt').val();
    alert("version :"+v+" category :"+ctg+" country :"+cnt);
    $.post("ajax.php",
            {   
                'version':v,'category':ctg,
                'country':cnt,'network_id':nt,
                'api':api,'func':'create_csv'
            },
            function(data)
            {
                alert(data);
            });
}

And here's my PHP function

function create_csv($version,$ctg,$cnt,$nt,$api)
{
    $cnt_table = "aw_countries_".$version;
    $ctg_table = "aw_categories_".$version;
    $off_table = "aw_offers_".$version;


    $sizeof_ctg = count($ctg);
    $cond_ctg = " ( ";
    for($c = 0; $c < $sizeof_ctg ; $c++)
    {
        $cond_ctg = $cond_ctg." $ctg_table.category = '".$ctg[$c]."' ";
        if($c < intval($sizeof_ctg-1))
            $cond_ctg = $cond_ctg." OR ";
        else if($c == intval($sizeof_ctg-1))
            $cond_ctg = $cond_ctg." ) ";
    }

    $sizeof_cnt = count($cnt);
    $cond_cnt = " ( ";
    for($cn = 0; $cn < $sizeof_cnt ; $cn++)
    {
        $cond_cnt = $cond_cnt." $cnt_table.country = '".$cnt[$cn]."' ";
        if($cn < intval($sizeof_cnt-1))
            $cond_cnt = $cond_cnt." OR ";
        else if($cn == intval($sizeof_cnt-1))
            $cond_cnt = $cond_cnt." ) ";
    }

    $sizeof_nt = count($nt);
    $cond_nt = " ( ";
    for($n = 0; $n < $sizeof_nt ; $n++)
    {
        $cond_nt = $cond_nt." $off_table.network_id = '".$nt[$n]."' ";
        if($n < intval($sizeof_nt-1))
            $cond_nt = $cond_nt." OR ";
        else if($n == intval($sizeof_nt-1))
            $cond_nt = $cond_nt." ) ";
    }

    $sizeof_api = count($api);
    $cond_api = " ( ";
    for($a = 0; $a < $sizeof_api ; $a++)
    {
        $cond_api = $cond_api." $off_table.api_key = '".$api[$a]."' ";
        if($a < intval($sizeof_api-1))
            $cond_api = $cond_api." OR ";
        else if($a == intval($sizeof_api-1))
            $cond_api = $cond_api." ) ";
    }

    $output         = "";

    $sql = "SELECT $off_table.id,$off_table.name
            FROM $off_table,$cnt_table,$ctg_table
            WHERE  $off_table.id = $cnt_table.id
            AND $off_table.id = $ctg_table.id
            AND ".$cond_api."
            AND ".$cond_nt."
            AND ".$cond_cnt."
            AND ".$cond_ctg;



    $result = mysql_query($sql);
    $columns_total  = mysql_num_fields($result);

    // Get The Field Name

    for ($i = 0; $i < $columns_total; $i++) 
    {
        $heading    =   mysql_field_name($result, $i);
        $output     .= '"'.$heading.'",';
    }
    $output = trim($output,",");
    $output .="
";
    while ($row = mysql_fetch_array($result)) 
    {
        for ($i = 0; $i < $columns_total; $i++) 
        {
            $output .='"'.$row["$i"].'",';
        }
        $output = trim($output,",");
        $output .="
";
    }

    // Download the file

    $filename =  "myFile.csv";
    header('Content-type: application/csv');
    header('Content-Disposition: attachment; filename='.$filename);

    echo $output;
    exit;
}

What modifications do I need so that I can download the CSV file?

Answer 1

maybe it will be a little complicated :) You can not download CSV directly with ajax. But there are some trick.

Make sure your mysql connection is ready in your ajax.php. When you get the resource, dinamicly create a hidden form with all data what you need

$( "body" ).append('    
 <form name="form" target="my_iframe">
  <input name ="version" value="'+v+'">
  <input name="country" value="'+cnt'+">
 <input name="api" value="'+api+'">');

etc..

something like this, and after just submit this form to a hidden iframe

$('[name="form"]').submit();

and that's it in the end destroy your hidden form