We Keep Coding

Creating searching functionality in php page for html content

I have a php page which displays the F5 pool member status. I would like to create a search bar so that when you start typing something, it displays the pool name and pool member only with the text that has been typed. Can someone please recommend ?
Here is the part of the php code which displays the pool and member status-
echo "<center><table cellspacing='6' cellpadding='6' width='100%'
border='0'>";
echo "<tr><th><font size='6'><b>Pools</b></font></th></tr>";
echo "<tr><td valign='top' width='50%'>";
foreach ($pool_list as $index=>$pool)
{
$pool_name=trim($pool,"/Common/");
echo "<center><a name='$pool'></a>";
$availability_status=$poolstatus[$index]->availability_status;
$img = getgif($availability_status);
echo "<img src='$img'><b> &nbsp $pool_name</b>";
echo "<table border='1' cellpadding='5' width='100%'>";
echo "<tr>";
echo "<th bgcolor='#ADD8E6' width='25%'>Member IP</th><th bgcolor='#ADD8E6' width='25%'>Member Name</th><th bgcolor='#ADD8E6' width='25%'>Enable Status</th><th bgcolor='#ADD8E6' width='25%'>Current Connections</th></tr>";
foreach ($memberlist[$index] as $member_index=>$member_value)
{
$address=$member_value->member->address;
$name=$client3->get_screen_name(array($address));
if ($name[0] == "") { $name[0]=$address; }
$port=$member_value->member->port;
$member_name=trim($name[0],"/Common/");
$sess_status=$member_value->object_status->availability_status;
$enabled_status=$member_value->object_status->enabled_status;
$mon_status=$membermonlist[$index][$member_index]->monitor_status;
$stats=$client2->get_statistics(array($pool),array(array($member_value->member)));
$ccount=$stats[0]->statistics[0]->statistics[4]->value->low;
$tcount=$stats[0]->statistics[0]->statistics[6]->value->low;
echo "<tr>";
echo "<td bgcolor='#F5F5DC' align='center'> &nbsp $address</td>";
echo "<td bgcolor='#F5F5DC' align='center'>$member_name</td>";
$img = getgif_member($sess_status, $enabled_status);
echo "<td bgcolor='#F5F5DC' align='center'>";
echo "<img src='$img'>";
echo "</td>";
echo "<td bgcolor='#F5F5DC' align='center'>$ccount</td>";
echo "</tr>";
}
echo "</table>";
}

Datatable reorder issue

I'm having an issue with the following code. What I'm trying to do is to populate a modal form with data from the row on which you pressed the edit button.
The script works fine until I try to reorder the table: when the table is reordered the script is getting the information of the pre-reordered table.
This is the script that get called when the edit button get clicked:
$(document).ready( function () {
//create datatable
//declaring a variable without var makes it global
table_movimenti = $('#movimenti').DataTable();
$('#movimenti table tbody tr td').on('click', function () {
$("#transaction_ID").val($(this).find("td:eq(6)").attr('id'));
$("#data_cont").val($(this).find("td:eq(0)").text());
$("#data_valuta").val($(this).find("td:eq(1)").text());
$("#importo").val($(this).find("td:eq(2)").text());
$("#divisa").val($(this).find("td:eq(3)").text());
$("#causale").val($(this).find("td:eq(4)").text());
var categoria=$.trim($(this).find("td:eq(5)").text());
$("#categoria option").each(function() {
if($(this).text() == categoria){
//$(this).prop("selected", true);
$(this).attr("selected", "selected");
return;
}
});
});
This is the table:
<?php
echo "<table id='movimenti' class='table table-bordered table-striped table no-margin'>";
echo "<thead>";
echo "<tr>";
echo "<th>Data contabile</th>";
echo "<th>Data valuta</th>";
echo "<th>Importo</th>";
echo "<th>Divisa</th>";
echo "<th>Causale</th>";
echo "<th>Categoria</th>";
echo "<th>Edit</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
echo "<tr class='table_row'>";
echo " <td>" . $row['Data_cont'] . "</td>";
echo " <td>" . $row['Data_valuta'] . "</td>";
echo " <td>" . $row['Importo'] . "</td>";
echo " <td>" . $row['Divisa'] . "</td>";
echo " <td>" . $row['Causale'] . "</td>";
echo " <td>";
foreach ($categories as $value){
if ($value['ID'] == $row['Categoria']){
echo " <span class='label label-success'>";
echo "". $value['Descrizione'] ."";
echo "<input type='text' class='label label-success' id='categoria' name='categoria' value='". $value['Descrizione'] ."'/>";
echo "</span></td>";
}
}

In the end I've completely change the approach and now I'm building my table using ajax option in datatable.
In this way I'm able to retrieve all the data in the row using the same ajax option.

How to pass PHP variable from a loop and use it as a Javascript variable

I have a while loop that displays some data into a table from a mysql table. Each table row has a button that is used to send data via ajax to another php page that insert the data into another table. My problem is that I want to get the values of specific rows by getting their ids but because I'm outside of the loop, I'm not able to the $row variable... How can I do such a thing?
Here is the portion of the code:
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['TROUBLE_TICKET_NUM'] . "<input type=\"hidden\" name=\"billet".$row['TROUBLE_TICKET_NUM']."\" id=\"billet".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['TROUBLE_TICKET_NUM']."\"></td>";
echo "<td>" . $row['CONCAT(Year(activites.ACTIVITY_CREATE_DTM),month(activites.ACTIVITY_CREATE_DTM))'] . "</td>";
echo "<td>" . $row['CUSTOMER_NM'] . "</td>";
echo "<td>" . $row['DEFAULT_WORK_GROUP_CD'] . "</td>";
echo "<td>" . $row['ACTIVITY_OWNER_NM'] . "<input type=\"hidden\" name=\"id".$row['TROUBLE_TICKET_NUM']."\" id=\"id".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['ACTIVITY_OWNER_NM']."\"></td>";
echo "<td>" . $row['groupe'] . "</td>";
echo "<td>" . $row['Technicien'] . "<input type=\"hidden\" name=\"technicien".$row['TROUBLE_TICKET_NUM']."\" id=\"technicien".$row['TROUBLE_TICKET_NUM']."\" value=\"".$row['Technicien']."\"></td>";
echo "<td>
<label for=\"date". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Date:</strong></label>
<input type=\"text\" name=\"date". $row['TROUBLE_TICKET_NUM'] ."\" id=\"date". $row['TROUBLE_TICKET_NUM'] ."\" onClick=\"ds_sh(this);\" value=\"".date("Y-m-d")."\">
<label for=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"><strong>Heure:</strong></label>
<input type=\"text\" class=\"timepicker\" name=\"heure". $row['TROUBLE_TICKET_NUM'] ."\" id=\"heure". $row['TROUBLE_TICKET_NUM'] ."\"></td>
<td><button type=\"button\" class=\"btn btn-success btn-block\" name=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" id=\"insert-data". $row['TROUBLE_TICKET_NUM'] ."\" onclick=\"insertData()\">Ajouter suivi</button>
<br>
<p id=\"message\"></p>
</td>";
echo "<tr>";
}
} else {
echo "<tr><td><div class=\"alert alert-dark\" role=\"alert\">Aucun résultat</div></td></tr>";
}
mysqli_close($conn);
?>
</tbody>
</table>
</div>
<!-- Script pour envoi donnée via ajax -->
<script type="text/javascript">
$(document).ready(function(){
$("#insert-data<?php echo $row['TROUBLE_TICKET_NUM']; ?>").click(function(){
var billet=$("#billet<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var technicien=$("#technicien<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var id=$("#id<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var date=$("#date<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
var heure=$("#heure<?php echo $row['TROUBLE_TICKET_NUM']; ?>").val();
// Debug
console.log(billet, technicien, tid, date, heure);
// AJAX
$.ajax({
method: "POST",
url: "insert-data.php",
data: {billet:billet,technicien:technicien,id:id,date:date,heure:heure},
dataType: "JSON",
success: function(data) {
$(".message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
});
});
</script>

If your intent is to allow the user to only insert values that come from existing rows, then don't pass the values you want to insert to the AJAX target. Otherwise, the user could manually call the AJAX target and simply provide any values they want. Instead, send the ID of the source row, and update the AJAX target to lookup that row and then copy the values from it.
You can do this by putting the row id into a data attribute for each row:
<tr data-id="<?= $row['id'] ?>">
Then use a jquery selector that fires on click of the button to get that value for the clicked row. Something like:
$(this).parent().data('id')

How to use jquery to loop through table rows echoed by php and select a specific row where a property is meet

I have a table dynamically created from a Mysql database. I am trying to create a modal dialog whereby if a user clicks on the view button a pop-up is displayed showing the values of that specific row. How do I loop through the table and select a specific row using jquery? I am using a Javascript library called bootbox.js I am able to display the pop-up however I cant get it to display the relevant row, it instead displays only the first row. The relevant PHP and the Javascript code I tried is shown below
echo "<table class='table table-hover table-responsive table-bordered'>";
echo "<tr>";
echo "<th>Payment Supplier</th>";
echo "<th>Payment Reference</th>";
echo "<th>Payment Cost rating</th>";
echo "<th>Payment Amount</th>";
echo "<th>Actions</th>";
echo "</tr>";
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
echo "<tr>";
echo "<td>{$payment_supplier}</td>";
echo "<td>{$payment_ref}</td>";
echo "<td>{$payment_cost_rating}</td>";
echo "<td>{$payment_amount}</td>";
?>
<div id="dom-target" style="display: none;">
<?php
$output = $payment_supplier; //Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<?php
echo "<td>";
echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>";
echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>";
echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>";
echo "</td>";
echo "</tr>";
$x++;
}
echo "</table>";
The Javascript code is
<script>
$(document).on('click', '.view-object', function(e) {
var div = document.getElementById("dom-target");
var myData = div.textContent;
bootbox.alert(myData, function() {
console.log("Alert Callback");
});
});
</script>
What am I missing here or is there a better way to achieve this?

As you had told , your code displays only the first row.
This is because you have not set different unique id to each row div to show on click of view.
Try using the code as :
echo "<table class='table table-hover table-responsive table-bordered'>";
echo "<tr>";
echo "<th>Payment Supplier</th>";
echo "<th>Payment Reference</th>";
echo "<th>Payment Cost rating</th>";
echo "<th>Payment Amount</th>";
echo "<th>Actions</th>";
echo "</tr>";
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
echo "<tr>";
echo "<td>{$payment_supplier}</td>";
echo "<td>{$payment_ref}</td>";
echo "<td>{$payment_cost_rating}</td>";
echo "<td>{$payment_amount}</td>";
//SET THE UNIQUE ID OF DIV TO SHOW ON CLICK OF VIEW//
?>
<div id="dom-target-<?php echo $payment_id;?>" style="display: none;">
<?php
$output = $payment_supplier; //Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<?php
echo "<td>";
echo "<a view-id='{$payment_id}' class='btn btn-default view-object'>View</a>";
echo "<a href='lib/Local/update_payment.php?id={$payment_id}' class='btn btn-default left-margin'>Edit</a>";
echo "<a delete-id='{$payment_id}' class='btn btn-default delete-object'>Delete</a></div>";
echo "</td>";
echo "</tr>";
$x++;
}
echo "</table>";
JS :
<script>
$(document).on('click', '.view-object', function(e) {
selectedId=$(this).attr('view-id'); //GET SELECTED ROW ID FROM ANCHOR TAG
var div = document.getElementById("dom-target-"+selectedId); //CALL THE SELECTED ROW DIV TO POP UP
var myData = div.textContent;
bootbox.alert(myData, function() {
console.log("Alert Callback");
});
});
</script>
This may helps you.

try this...
<script>
$(document).on('click', '.view-object', function(e) {
bootbox.alert($(this).val(), function() {
console.log("Alert Callback");
});
});
</script>

There are two main problems with your script:
You are recycling the dom-target ID. Remember that IDs have to be unique in your HTML document. You can change it from ID to a class instead.
<div> is not a valid child of <tr>. Browsers will attempt to fix this, which might involve the element being removed from the table, or sequestered in a <td>.
Your function lacks context — when .view-object is clicked on, you need to reference to the current element where the event originated from. Using $(this) will point you in the right direction.
I suggest that you store the value in dom-output as a HTML5 data- attribute associated with the specific row, i.e., instead of:
echo "<tr>";
echo "<td>{$payment_supplier}</td>";
echo "<td>{$payment_ref}</td>";
echo "<td>{$payment_cost_rating}</td>";
echo "<td>{$payment_amount}</td>";
?>
<div id="dom-target" style="display: none;">
<?php
$output = $payment_supplier; //Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
use:
echo "<tr data-domtarget='".htmlspecialchars($payment_supplier)."'>";
echo "<td>{$payment_supplier}</td>";
echo "<td>{$payment_ref}</td>";
echo "<td>{$payment_cost_rating}</td>";
echo "<td>{$payment_amount}</td>";
?>
You can use the following script:
$(document).on('click', '.view-object', function() {
var domTarget = $(this).closest('tr').data('domtarget');
bootbox.alert(domTarget, function() {
console.log("Alert Callback");
});
});

Hiding/Showing Drop Down menus depending on another option

I am trying to make it so when a person selects an option from a drop down menu, another drop down menu shows up. So if I have a drop down menu with 3 choices, "Vancouver, "Singapore","New York". When a user selects Vancouver a drop down menu shows up with a couple of options, if they select new york another drown down menu shows up. To make things complicated I am also using php as its going to be running things on the server side eventually.
echo "<script type=\"text/javascript\">";
echo "function getDropDown(sel){";
echo "hideAll();";
echo "document.getElementById(sel.options[sel.selectedIndex].value).style.display ";
echo "= 'block';";
echo "}";
echo "function hideAll(){";
echo "document.getElementById(\"vancouver\").style.display = 'none';";
echo "document.getElementById(\"singapore\").style.display = 'none';";
echo "document.getElementById(\"newyork\").style.display = 'none';";
echo "}";
echo "</script>";
echo "<tr>";
echo "<td align=\"right\">";
echo "<td>";
echo "<select name=\"optionDrop\" onChange=\"getDropDown(this)\">";
echo "<option value=\"\">Please Select</option>";
echo "<option value=\"vancouver\">Vancouver</option>";
echo "<option value=\"singapore\">Singapore</option>";
echo "<option value=\"newyork\">New York</option>";
echo "</select>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td align=\"right\">City</td>";
echo "<td>";
echo "<div id=\"vancouver\" style=\"display: none;\">";
echo "<select name=\"optionDrop\" >";
echo "<option value=\"\">Please Select</option>";
echo "</select>";
echo "</div>";
echo "<div id=\"singapore\" style=\"display: none;\">";
//echo "<select name=\"optionDrop2\">";
// echo "<option value=\"\">Please Select2</option>";
echo "Sing";
echo "</div>";
echo "<div id=\"newyork\" style=\"display: none;\">";
echo "New York";
echo "</div>";
echo "</td>";
echo "</td>";
echo "</tr>";
Right now when I select the option "Vancouver" a drop down menu does shot up, and when selected other options a text shows up. However if I uncomment the lines
//echo "<select name=\"optionDrop2\">";
// echo "<option value=\"\">Please Select2</option>";
Then nothing works anymore. No matter what option I select nothing shows up. I am completely stuck and cant figure out what is wrong with it.

Hum... first of all I'll give you a hint you might have begged for many years ago:
Closing a php tag within a php file won't break your code.
If you want to display only HTML like you are doing in the code you posted, just do the following:
<?php
$variable = "test";
// Some random things blabla.
?>
<span class="test">
<?php echo $variable; ?>
</span>
<?php
$something = "something_else";
// Some other php
?>
About your problem, there you go:
http://codepen.io/anon/pen/GxytE