0

<select>タグからの選択を変更するたびに ajax を使用してチェックボックスを動的に作成することを検討しています。関連するフォームのセクションについては、以下のスクリーンショットを参照してください。

スニペット

注: [ Queues ]の下のチェックボックスは動的にする必要があります。

現時点では、Teamの値を変更すると、チーム名 (この場合は "Test") が取得され、ajax (POST) を使用してそのチームのマネージャー名が返されます。

私がやりたいことは、各チームに関連付けられた「キュー」のリストを持つ別のテーブルを検索することです。「マネージャー名」フィールドのタグに「onchange」属性を追加します。

以下は、Team => Manager Nameの動的入力を実現するために現在使用しているコードです。

<script>
        window.onload = function() {
            getManager($("#team").val());       
        }

        function getManager(team) {
            $.ajax({
                type: "POST",
                url: "getManager.php",
                data: {team:team}
            }).done(function( manager ) {
                $("#manager_name").val(manager);
            });
        }
</script>

そしてgetManager.php、これが使用するファイルです：

<?php

require("../../database/db.php");

$mysqli = new db("nab_reporting");

if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}

$team=$mysqli->real_escape_string($_POST['team']);

$result = $mysqli->query("SELECT manager_name FROM team WHERE teamname = '".$team."'");

$row = $result->fetch_assoc();

echo $row['manager_name'];

mysqli_close($mysqli);

?>

上記が機能することに注意してください。ここで、ajax を使用するManager Nameonchangeフィールドの属性を使用する方法が必要になり(上記と同様)、現在フィールドにある値 (この場合は Kane Charles) を別の PHP ページに渡し、結果セット (配列または JSON でしょうか?) そのチーム名と一致するデータベース内のすべてのキューのリストを含みます。

以下は、さまざまなビットごとの html コードです。

チーム

<select name="team" id="team" required="required" onchange="getManager(this.value)">
               <?php 
                    include(__DIR__ . "/../../database/db.php");
                    $db = new db("nab_reporting");
                    $result = $db->query("SELECT teamname FROM team");
                    while ($row = $result->fetch_assoc()) {
                        echo "
                        <option value=\"" . $row['teamname'] . "\">" . $row['teamname'] . "</option>
                        ";
                    }
                    $db->close();
                 ?>
</select>

マネージャー名

<input type="text" name="manager_name" id="manager_name" required="required" onchange="getQueues(this.value)">

キュー

<label>
    Queues
</label>
<div id="queue_options">
    <!-- queues dynamically created here -->
</div>

の内容をqueue-options消去して、現在のチームに関連付けられているキューのみにリセットする必要があります。私は ajax をあまり扱っていないので、ここに投稿しています。

4

1 に答える 1

2

このリビジョンは、あなたが求めているものと一致する必要があります

PHP

// make an array to hold the queues
$data = Array();

// Fetch the rows of all the queues
$res = $mysqli->query("SELECT * FROM the_queue_table WHERE manager='" . $_GET["manager"] . "'");

// loop through all the rows and push the queues into the data array
while(($row = mysql_fetch_object($res)) !== false)
{
    array_push($data, $row->queue);
}

// return the data array as a json object
echo json_encode($data);

JavaScript

// get the page and send the manager name to filter with
$.get("file.php?manager=" + managerName, function(page)
{
    // parse the json into an object
    var data = $.parseJSON(page);

    // remove existing checkboxes
    $("#queue_options").children().remove();

    // add checkboxes to the div
    for (var item in data){
        $("#queue_options").append("<input type=\"checkbox\" value=\"" + item + "\" />" + item + "<br />");
    }
});
于 2013-07-22T05:53:30.457 に答える