0
私の意見を聞いて、私はデータベース内の従業員のライブ検索を行い、自分のウェブサイトのページに表示させたいと思います。従業員のデータを画面に表示し、情報を編集するためのラジオボタンをいくつか表示します。別のPHPファイルのdivに外部PHPコードを書き込む方法
Javascriptを：：ここで私がこれまで持っていたタスクの構成要素である `
//Search bar functionality
$(document).ready(function() {
load_data();
function load_data(query) {
$.ajax({
url:"fetchUsers.php",
method:"POST",
data:{query:query},
dataType: 'json',
success:function(data) {
console.log(data);
function ajaxCall2(data){
$.ajax({
url:"showEmployees.php",
method:"POST",
data2:{data:data}
})
}
}
});
}
$('#search_text').keyup(function() {
var search = $(this).val();
if(search != '') {
load_data(search);
} else {
load_data();
}
});
});
</script>`
のindex.phpので、上記のコードは、ライブ検索を行っているが、結果はデータに格納されています。それは動作します。
fetch.php
$db = new PDO('mysql:host=localhost;dbname=user_information;charset=utf8', 'root', 'root');
if(isset($_POST["query"]))
{
$users= $db->prepare("
SELECT * FROM login_information
WHERE user_name LIKE '%".$search."%'
");
$users->execute();
$users = $users->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($users);
}
else
{
return;
}
これは、ライブ検索のためのAjaxの呼び出しで実行されるPHPコードです。今、私の配列の各要素のために、$ユーザーが、私はこのコードを実行し、index.phpの中に表示させたい：
echo "
<div class=employeeContainter>
<div class=employeeInformation>
<ul>
<li>User Name: " . $row['user_name'] . "</li>
<li>User ID: " . $row['user_id'] . "</li>
<li>User Email: " . $row['user_email'] . "</li>
<form action='editEmployee.php' method='POST'>
<label for='NotEmployed'>Not Employee</label>
<input type='radio' id='NotEmployed' name='Employee'";
if($row['isEmployee']==0) echo "checked='checked'/>";
else echo "/>";
echo "<br><label for='YesEmployed'>Employee</label>
<input type='radio' id='YesEmployed' name='Employee'";
if($row['isEmployee']==1) echo "checked='checked'/>";
else echo "/>";
echo "<br><input type='submit' name=updateButton value='Update User'/>
</form>
</ul>
</div>
</div>
";
https://gyazo.com/16899aa7a6426310e42ee9090eef3158
これは私は物事が仕事をしたいかの写真です。私は各部がどのように個別に動作するのか知っていますが、すべてを一緒に動かす方法を理解することはできません。私は、これは長い記事で知っているが、任意の助けは全くいただければ幸いです
EDIT：
は、だから私はここにJavaScriptでPHPコードを再作成してきたが、私は
function generateEmployeeData(employees){
employees.forEach(function(d){
var containerDiv = document.createElement('div');
var informationDiv = document.createElement('div')
var ul = document.createElement('ul');
var br = document.createElement('br');
var br2 = document.createElement('br');
//form
var form = document.createElement('form');
form.setAttribute("action","editEmployee.php");
form.setAttribute("method","POST");
//labels
var yesLabel = document.createElement('label');
var noLabel = document.createElement('label');
yesLabel.setAttribute("for","YesEmployed");
noLabel.setAttribute("for","NotEmployed");
//Radio buttons
//buttons need to have the same name so only one is selected
var yesButton = document.createElement('input');
var noButton = document.createElement('input');
yesButton.setAttribute("type","radio");
yesButton.setAttribute("name","Employee");
yesButton.setAttribute("id","YesEmployed");
noButton.setAttribute("type","radio");
noButton.setAttribute("name","Employee");
noButton.setAttribute("id","NotEmployed");
if(d.isEmployee == 1){
yesButton.setAttribute("checked","checked");
}
else{
noButton.setAttribute("checked","checked");
}
//submit button
var submit = document.createElement('input');
submit.setAttribute("type","submit");
submit.setAttribute("name","updateButton");
submit.setAttribute("name","updateButton");
submit.setAttribute("value","Update User");
containerDiv.setAttribute("id","employeeContainer");
// containerDiv.setAttribute("class","employeeContainer");
informationDiv.setAttribute("id","employeeInformation");
// informationDiv.setAttribute("class","employeeInformation");
document.getElementById('results').appendChild(containerDiv)
document.getElementById('employeeContainer').appendChild(informationDiv)
document.getElementById('employeeInformation').appendChild(ul)
var li = document.createElement('li');
li.innerHTML = "User Name: "
var li2 = document.createElement('li');
li2.innerHTML = "User ID: ";
var li3 = document.createElement('li');
li.innerHTML = "User Email: "
//generating the header for item card
var employeeHeaderDiv = document.createElement("div");
employeeHeaderDiv.setAttribute("class", "employeeHeader");
//generating the name div for the header
var employeeNameDiv = document.createElement("div");
employeeNameDiv.setAttribute("class", "employeeName");
var employeeNameTextNode = document.createTextNode(d.user_name);
var employeeEmail = document.createTextNode(d.user_email);
//prevent issues with display if the name for an item is too long
// if(employeeNameTextNode.length > 15){
// employeeNameTextNode = document.createTextNode(d.employeeName.slice(0,13) + "...");
// }
// employeeNameDiv.appendChild(employeeNameTextNode);
ul.appendChild(li);
ul.appendChild(li2);
ul.appendChild(li3);
li.innerHTML = li.innerHTML+ d.user_name;
li2.innerHTML = li2.innerHTML+ d.user_id;
li3.innerHTML = li3.innerHTML+ d.user_email;
ul.appendChild(form);
form.appendChild(noLabel);
noLabel.innerHTML = "Not Employee";
form.appendChild(noButton);
form.appendChild(br);
form.appendChild(yesLabel);
yesLabel.innerHTML = "Employee";
form.appendChild(yesButton);
form.appendChild(br2)
form.appendChild(submit);
});
}
これは、それがこれまでのようになります。だから私はいくつかの進歩を遂げてきましたhttps://gyazo.com/c5cb9cd6cae92ccba502a9d0efe82076
、この機能は、検索バー内のすべてのkeyUpイベントにとても基本的に私のAJAX呼び出しの成功関数に呼び出されています。しかし、私はいくつかの問題があります。
私は両方のラジオボタンを選択できますが、一度に1つしか選択できないようにする必要があります。 各ラジオボタンに同じ名前を付けることで解決します。
入力を続けると、私が持っているものを更新するのではなく、すでに新しい結果が追加されています。
あなたは、そのユーザを更新する必要があり、従業員または非従業員はそれだけではないのですか？ – Jana
あなたはフォームの中でそれを設定しません。ちょうど別のajax関数としてやってください...そのサブミットボタンを設定して、そのユーザーIDをパラメータとしてajax関数を呼び出してください... – Jana
すべてのそれらの 'html' JSのコンテンツパラメータ従業員 'data'（json）を除いていくつかのJS関数を作成します。各従業員のJSループでこの関数を呼び出します。それから、それをHTML DOMにダンプ（追加）します。 – Jigar