mysql-モーダルでのPHPロードデータ
モーダルウィンドウに送信されるIDを使用して、データベーステーブルからデータをロードする必要があります。
基本的に、グリッドが読み込まれると、複数の列があります。特に2つはCONTAINER_IDとWORKFLOWと呼ばれます。
WORKFLOWに対して返されるものはすべて、＃mySVCModalと呼ばれるMODALポップアップを開くリンクになります。サンプルコードは次のとおりです。
while(($Row = mysql_fetch_assoc($QueryResult)) !== FALSE)
{
echo "<tr";
echo "<td style=\"width: 50px;\">{$Row[CONTAINER_ID]}</td>";
echo "<td style=\"width: 50px;\"><a class=\"open-container\"
data-toggle=\"modal\" href="#mySVCModal\"
data-cont=\"{$Row[CONTAINER_ID]}\">{$Row[WORKFLOW]}</a></td>";
echo "</tr>";
}
ユーザーが{$Row[WORKFLOW]}をクリックすると、同じ行のCONTAINER_IDでモーダルウィンドウが開きます。
これを実現するJavaScriptは次のとおりです。
echo "<script type=\"text/javascript\">
$(document).on(\"click\", \".open-Container\", function() {
var myContainer = $(this).data('cont');
$(\".modal-body #containerID\").val( myContainer );
});
</script>";
この時点で、モーダルウィンドウが開いており、CONTAINER_IDを表示できます。 CONTAINER_IDを表示するコードは次のとおりです。
<div id="mySVCModal">
<form action="" method="POST">
<input type="text" name="containerID" id="containerID" class="containerID" />
*** more code here ***
</form>
</div>
問題ありません。 CONTAINER_IDは、「containerID」と呼ばれるINPUTフィールドに表示されます。
モーダルウィンドウが開くと、「containerID」がPHP変数に送信され、WORKFLOW_TABLEというデータベーステーブルからWORKFLOW情報が取得されます。
containerIDをPHP変数に変換してエコーアウトしようとすると、何も表示されません：
<?php
$containerID = $_POST['containerID'];
echo "this is containerID " . $containerID; // only displays the text, not the $containerID
?>
ECHOでcontainerIDを表示するためにすぐ上のコードを取得できたら、それからクエリを実行できることを知っています。
基本的に、モーダルウィンドウが開いたときに、PHPはcontainerIDを取得し、 "SELECT * FROM WORKFLOW_TABLE where CONTAINER_ID ='containerID'";
を実行する必要があります。WORKFLOW_TABLEの内容は、さまざまなINPUTフィールドに自動的に表示されます。今はINPUTフィールドを使用しています。それは重要なことではありません。
全体として、containerIDを使用して表示されたWORKFLOW_TABLEのコンテンツで開くモーダルが必要です。
これを明確に表現したいと思います。
助けてください。
答え :
解決策：
AJAXクエリが必要なようです。
<script>
function loadData()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "db_query.php?containerID = " + document.getElementById('containerID').getAttribute('value'), true);
xmlhttp.send();
}
window.onload = loadData;
</script>
<div id="myDiv"></div>
可能性のある欠陥について事前に申し訳ありませんが、実際にはこれを実行しませんでした。
答え :
解決策：
モーダルを読み込んでいるときに、実際にフォームをサーバーに送信していないようです。
モーダルを表示するためにページ全体をリロードしたくない場合があるため、非同期リクエストを使用して、オンデマンドでモーダルコンテンツをリクエストする必要があります。サンプルコードはjQueryを使用しているため、ここでも同じものを使用しました。 （詳細については、jQuery.load（）のドキュメントを参照してください）
echo "<script type=\"text/javascript\">
$(document).on(\"click\", \".open-Container\", function() {
var myContainer = $(this).data('cont');
$(\".modal-body #containerID\").val( myContainer );
$('.modal-body').load(
'yourPHPscript.php',
{ containerID: $('#containerID').val()}
);
});
</script>";
次に、PHPスクリプトは次のようになります（POSTからGETへの変更に注意してください）：
<?php
$containerID = $_GET['containerID'];
echo "this is containerID " . $containerID;
?>
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。