0

別の投稿では、AJAX を使用してドロップダウンを動的に作成する方法についていくつかの助けを得ることができました。

mySQL テーブルに含まれるすべての情報を (HTML テーブルで) 表示するテーブルがあります。その上には、テーブルの特定の行に関連する 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?creative="whatever_user_selected") を含む api.php への AJAX 呼び出しが表示され、配列内のすべての正しいデータと共に応答が返されます (Iコンソールで確認できます) - ただし、テーブルは更新されません。

そのテーブルを更新するコードをどこに置く必要がありますか? それを更新するための最良の方法は何ですか??

私はこれに初心者であり、周りにはたくさんのチュートリアルがあります-それぞれが異なることを指定しています-したがって、ここで探していましたが、似たようなものを見つけることができませんでした.

すべての助けに感謝します!!

4

1 に答える 1

0

データ部分は次のようになるはずです。

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

また

data: { creative: creativeVal }
于 2013-04-02T20:27:41.543 に答える