使用Ajax过滤表 - 下拉选择 - php

时间:2013-04-02 19:08:32

标签: php jquery mysql ajax json

在另一篇文章中,我能够获得一些使用AJAX动态创建下拉列表的帮助。

我有一个表(在HTML表中)显示mySQL表中包含的所有信息 - 上面有3个下拉列表,这些下拉列表与表的特定行有关。现在,我正在尝试使用从下拉列表中选择的数据来“刷新”表格(例如,如果用户选择下拉列表 - 表格会刷新显示按其选择过滤的数据)。

我的client.php看起来像这样(这是用户加载的):

<script id="source" language="javascript" type="text/javascript">
  $(function () 
  {
    //-----------------------------------------------------------------------
    //SEND HTTP REQUEST WITH AJAX INITIALLY
    //-----------------------------------------------------------------------
    $.ajax({                                      
        url: 'api.php',   //the script to call to get data          
        data: "",   //insert url argumnets here to pass to api.php for example "id=5&parent=6"
        dataType: 'json',   //data format      
        success: function(response) //on recieve of reply     
        { //Do the following on Success 

            //Set the filtering for "Creative"
            var creatives = response.CREATIVE;
            for (var i in creatives)
            {
                var creative = creatives[i];
                var creativeID = creative[0];
                $('#creative-select').append("<option value=\""+creativeID+"\">"+creativeID+"</option>");
            }

            //Set the filtering for "Stations"
            var stations = response.STATION_NETWORK;
            for (var i in stations)
            {
                var station = stations[i];
                var stationID = station[0];
                $('#station-select').append("<option value=\""+stationID+"\">"+stationID+"</option>");
            }

            //Set the filtering for "Verticals"
            var verticals = response.VERTICAL;
            for (var i in verticals)
            {
                var vertical = verticals[i];
                var vertID = vertical[0];
                $('#vertical-select').append("<option value=\""+vertID+"\">"+vertID+"</option>");
            }

            //Set the Table Content  Initially
            var rows = response.rowdata;
            for (var i in rows)
            {
                var row = rows[i];
                var id = row[0];              //get id
                var station_network = row[1];       //get name
                var vertical = row[2];  //get vertical
                var creative = row[3]; //get creative
                var tolls= row[4];  //get tolls
                var states= row[5];  //get states
                var date_range= row[6];  //get date_range
                var week= row[7];  //get week
                var ordered= row[8];  //get ordered
                var credits= row[9];  //get credits
                var credit_totals= row[10];  //get credit_totals
                var not_used= row[11];
                var cleared= row[12];
                var total_uniques= row[13];
                var cleared_each_unique= row[14];
                var total_unique_connect= row[15];
                var cleared_each_unique_connect= row[16];
                var unique_connect_8am_to_8pm= row[17];
                var cleared_each_8am_to_8pm= row[18];
                var calls_over_10= row[19];
                var calls_over_10_pct= row[20];

                //TABLES (ALTERNATING ROWS)
                if (id % 2 == 0)
                {
                    $('#output').append("<tr id=\"evenrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>");
                } else {
                    $('#output').append("<tr id=\"oddrow\"> <td>"+id+"</td><td>"+station_network+"</td><td>"+vertical+"</td><td>"+creative+"</td><td>"+tolls+"</td><td>"+states+"</td><td>"+date_range+"</td><td>"+week+"</td><td>"+ordered+"</td><td>"+credits+"</td><td>"+credit_totals+"</td><td>"+not_used+"</td><td>"+cleared+"</td><td>"+total_uniques+"</td><td>"+cleared_each_unique+"</td><td>"+total_unique_connect+"</td><td>"+cleared_each_unique_connect+"</td><td>"+unique_connect_8am_to_8pm+"</td><td>"+cleared_each_8am_to_8pm+"</td><td>"+calls_over_10+"</td><td>"+calls_over_10_pct+"</td></tr>");
                }

            } // End of 'for' loop for the table data

        }  //End of 'do this on success'
    }); //End of AJAX call
  }); //End of Function

function showCreative (creativeVal) 
  {
    //-----------------------------------------------------------------------
    //Send the Creative filter criteria
    //-----------------------------------------------------------------------
    $.ajax({                                      
        url: 'api.php',   //the script to call to get data          
        data: "creative="+creativeVal,   //insert url argumnets here to pass to api.php for example "id=5&parent=6"
        dataType: 'json',   //data format      
        success: function(response) //on recieve of reply     
        { //Do the following on Success   
        alert ("this never fires!");

        } //end of on success
    }); //End Ajax call
}; //End Creative Function  

  </script>
</head>

<body>
  <h2> Media Call Reports </h2>
  <h3>Media Analysis: </h3>
  <div id="instruction">Select how you would like the data selected using the dropdowns below</div>

<!--DROPDOWNS-->
 <div id="dropdowns">

    <div id="creativesel">
    Creative -  
    <select name="creative-select" id="creative-select" onChange ="showCreative(this.value);">
        <option value="all">All</option>
    </select>
    </div> 

    <div id="stationsel">
    Station - 
    <select name="station-select" id="station-select" onChange ="showStation(this.value)">
        <option value="all">All</option>
    </select>
    </div>

     <div id="verticalsel">
    Vertical - 
    <select name="vertical-select" id="vertical-select" onChange ="showVertical(this.value)">
        <option value="all">All</option>
    </select>
    </div>

</div> <!--Dropdowns ending-->

 <!--TABLE BEGINNING - TABLE HEADER ROW--> 
<table id="output">
<tr>
<th>ID</th>
<th>Station_Network</th>
<th>Vertical</th>
<th>Creative</th>
<th>Tolls</th>
<th>States</th>
<th>Date Range</th>
<th>Week</th>
<th>Ordered</th>
<th>Credits</th>
<th>Credits Totals</th>
<th>Not Used</th>
<th>Cleared</th>
<th>Total Uniques</th>
<th>Cleared Each Unique</th>
<th>Total Unique Connect</th>
<th>Cleared Each Unique Connect</th>
<th>Unique Connect 8am - 8pm</th>
<th>Cleared Unique 8am - 8pm</th>
<th>Calls over 10 Min</th>
<th>Calls over 10 Min %</th>
</tr>
</table>

</body>
</html>

我目前在api.php中的内容如下:

<?php 
  //--------------------------------------------------------------------------
  // Connect to DB
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass) ;
  $dbs = mysql_select_db($databaseName, $con);

  //--------------------------------------------------------------------------
  // Initial Page Load - get data from DB
  //--------------------------------------------------------------------------  
  //Dropdown Filter Function
  function dropdownFilter($filterColumn)
  {
  global $finalarray;
  $filterSQL = "SELECT $filterColumn FROM media_analysis GROUP BY $filterColumn";
  $filterResult = mysql_query($filterSQL);
  $filterColumnData = array();
  while ($filterRow = mysql_fetch_row($filterResult)) 
      {
        $filterColumnData[] = $filterRow;
      }  
    $finalarray[$filterColumn] = $filterColumnData;
  }
    //Dropdown for Stations
    dropdownFilter("STATION_NETWORK");
    //Dropdown for Verticals
    dropdownFilter("VERTICAL");
    //Dropdown for Creative
    dropdownFilter("CREATIVE");

    //Rows of table-data in media-analysis
    $result = mysql_query("SELECT * FROM $tableName");   //Initial Query
    $data = array();
    while ($row = mysql_fetch_row($result) )
        {
        $data[] = $row;
        }   
    $finalarray['rowdata'] = $data;

//----------------------------------------------
//AFTER USER SELECTS FILTERS - IF ANY SELECTED
//----------------------------------------------
  //Get variables from subsequent calls in URL if any
if (isset($_GET['creative']) and !empty($_GET['creative'])) 
    { 
    $creativeFilter = $_GET['creative'];
    echo $creativeFilter;
    $result = mysql_query("SELECT * FROM $tableName WHERE CREATIVE = '$creativeFilter'");   
    $data = array();
    while ($row = mysql_fetch_row($result) )
        {
        $data[] = $row;
        }   
    $finalarray['rowdata'] = $data;
    }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($finalarray);
?>

初始加载工作正常 - 创建表,下拉选项也是如此。 现在我只是想让'创意'下拉列表工作(因此我专注于此)。

当用户从广告素材下拉列表中选择某些内容时 - 我会看到对api.php的AJAX调用以及相应的添加(api.php?creative =“whatever_user_selected”),并且响应返回时包含所有正确的数据数组(我可以在控制台中看到它) - 但表永远不会更新。

我需要在哪里放置代码来更新该表?获得更新的最佳方法是什么?

我是个菜鸟,周围有很多教程 - 每一个都指明了不同的东西 - 所以我一直在这里寻找但却无法找到类似的东西。

所有帮助表示赞赏!!

1 个答案:

答案 0 :(得分:0)

我认为您的数据部分应该更像这样:

data: { name: "John", location: "Boston" }

data: { creative: creativeVal }