How to disable a href - javascript

How to disable a href link if there's value in PR row from database? Like my sample table below, if there PR disable the link.
Table
item_name | PR | < Add > |
ballpen | pr100 | <a> |
pencil | | <a> |
Paper | | <a> |
Clip | | <a> |
Codes,
<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a></td>
</tr>';
}
?>
I want to disable ballpen row <a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a> if there's PR in row

while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center">';
if (!empty($row['pr'])){
echo '<a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a>';
}
echo'</td></tr>';
}

You can use the following:
...
echo '<td align="center"><a class="fancybox" href="'.(($row['pr']!="")?'addpr.php?counts='.$row["id"]:'#'). '"></a></td>';

if you are trying to remove the modal (fancybox) functionality then you can do so by removing the class of the link with jquery or javascript..
example
$('a[href="PR100"]').removeClass('fancybox');
this checks each link on the page. if the link has an href attribute that is equal to PR100, we remove the fancybox class which would prevent the popup.
your question is pretty cryptic though. I'm guessing this is what youre asking..

<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
$url = $row['pr'] ? 'addpr.php?counts=' . $row['pr'] : '#';
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="{$url}"></a></td>
</tr>';
}
?>

Set the href attribute to "javascript:;"

Related

Refreshing DataTables table populated with loop

I want to update table content without refreshing the page but I fill the table using a loop on the same page. Here is the code I use:
<div id="items_table">
<div class="table-responsive" id="table_allitems">
<table id="products_all" class="table-sm table-bordered table-hover" style="width: 100%;">
<thead class="table-secondary table-hover">
<tr>
<th scope="col">
<center>Код</center>
</th>
<th scope="col">
<center>Име</center>
</th>
<th scope="col">
<center>Баркод</center>
</th>
<th scope="col">
<center>Група</center>
</th>
<th scope="col">
<center>Мярка</center>
</th>
<th scope="col">
<center>Количество</center>
</th>
<th scope="col">
<center>Обект</center>
</th>
<th scope="col">
<center>Доставна цена</center>
</th>
<th scope="col">
<center>Продажна цена</center>
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="skladove_table">
<?php
$query_checkObekt = "SELECT * FROM obekti WHERE owner='$user_hash'";
$result_checkObekt = mysqli_query($conn, $query_checkObekt);
if(mysqli_num_rows($result_checkObekt) > 0) {
$query = "SELECT * FROM items WHERE owner ='$user_hash'";
$result=mysqli_query($conn, $query);
while($row = mysqli_fetch_assoc($result))
{
echo '<tr id="' . $row['unique_id'] . '" onmouseover=showItem(' . $row['unique_id'] . ');>';
echo "<td>" . "<center>" . $row['custom_id'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['name'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['barcode'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['grupa'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['quantity_type'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['quantity_number'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['obekt'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['price_delivery'] . "</center>" . "</td>";
echo "<td>" . "<center>" . $row['price_sale'] . "</center>" . "</td>";
echo "<td style='width: 1%; padding-left: 1%; padding-right: 1%;' onclick='deleteItem(" . $row['unique_id'] . ");'><i class='fa fa-close'></i>"."</td>";
echo "</tr>";
}
} else {
//no records found
}
?>
</tbody>
</table>
</div><br
To add new item I use iframe modal and what I want is after closing the modal or just pressing one button table to get refreshed (and if possible to stay on the same page) with the new info without refreshing the page.

How to use Javascript in a innerHTML inline css scenario?

I am new to html5 and php. I am wondering how to use javascript in the case of my written code.
I am outputting my database data in a table in HTML. I want the last to output a bit more to the right. But if I use inline css styling I am getting a parse error:
my code:
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('patientdb');
$query = "SELECT id, name, date, status FROM clients";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){ //looping through results
echo "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['name'] . "</td>
<td>" . $row['date'] . "</td>
<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> //my question is regarding this line!!!!
</tr>"; //$row['index'] the index here is a field name
}
mysql_close();
?>
</tbody>
</table>
My goal is to change the color of the output of the last <td> depending on wether the data my database according to this logic:
if (x > 60) {
echo: "orange output";
}elseif (x >50) {
echo: "red output";
}else{
echo: "green output";
}
****How can I use JS in my current case?****
EDIT: trying out solutions
<script>
$('#hoverTable td').css('background-color',function(){
var x = DATA FROM MY DATABASE;
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
});
</script>
Table code
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Naam Client</th>
<th>Laatste Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', ''); //The Blank string is the password
mysql_select_db('patientdb');
$query = "SELECT id, naam, datum, status FROM clients"; //You don't need a ; like you do in SQL
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$statusClass = 'class="green output"';
if($row['status'] > 60){
$statusClass = 'class="red output"';
}else if($row['status'] > 50){
$statusClass = 'class="orange output"';
}
echo
'<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle" style="color: grey; margin-left: 30%;" .$statusClass."></td>
</tr>';
}
mysql_close(); //Make sure to close out the database connection
?>
</tbody>
</table>
hello if you want to use in php and status is last "td" code can be like this:
while($row = mysql_fetch_array($result)){
$statusClass = 'green output';
if($row['status'] > 60){
$statusClass = 'red output';
}else if($row['status'] > 50){
$statusClass = 'orange output';
}
echo '<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle '.$statusClass.'" style="color: grey; margin-left: 30%;"></td>
</tr>'
}
make sure, that u have highest number in condition on first place, because if you use this code
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
and x is 65 it returns "orange output" instead of "red output" because first statement is true, x is greater than 50
and using jquery for this is simplest solution. comment above, only apply id for table instead of selector "table"
$("#hoverTable td")...
Straightforward , if you are using jQuery.
$('#hoverTable td:last-child').css('background-color',function(){
var x = /*your target argument*/;
if(x > 50){return 'orange '};
});
You can't break lines in PHP. Use this:
echo "<tr>".
"<td>" . $row['id'] . "</td> ".
"<td>" . $row['name'] . "</td> ".
"<td>" . $row['date'] . "</td>".
"<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> ".
"</tr>";
You need to concatenate the ends of each line, or use a heredoc.

JQuery preventDefault not working with .on click

I have a row of data, which when clicked, show information about the object.
But I also have a button on the row, which when clicked performs some jquery wizzardry.
Anyway, I can't seem to prevent the row click and just fire the button stuffs.
I've tried:
return false;
e.preventDefault();
e.stopPropagation();
This is the function.
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
I have all 3 in there at the moment, but that's just for example. Although I have tried all 3 in there, but I have also tried each one separately.
Heres the HTML
<div class="row" id="check_container">
<div id='table_holder' class="col-md-12" >
<table id="org_table" class="sortable table table-striped tablesorter">
<?php
if(empty($org_data2)) {
// if there is no data for the selected filter
echo "There are no organisations set up.";
} else {
echo "
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Sub Orgs</th>
<th>Locations</th>
<th>Users</th>
<th>Compliance</th>
<th>O/D Checks</th>
<th>O/D Training</th>
<th>Renewal</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
";
foreach ($org_data2 as $orgs) {
if(!$orgs->descendant) {
echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>";
echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>";
echo "<td data-title='Name'>" . $orgs->org_name . "</td>";
echo "<td data-title='Sub Orgs' class='text-center'></td>";
echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>";
echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>";
echo "<td data-title='Compliance' class='text-center'></td>";
echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>";
echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>";
echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>";
echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>";
echo "</tr>";
}
}
}
?>
</tbody>
</table>
</div>
</div>
What am I doing wrong?
When you delegate to a child element you need to use e.stopImmediatePropigation()
Jquery uses it's own event system and this will stop any execution on the elements delegated to from the parent. e.stopPropigation() will allow all events delegated from the same parent to fire
$('#check_container').on('click', '.show_sub_orgs', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
})

How to show all records using PHP function and Javascript

I am new to mvc and I want to populate my table from database and I am having trouble with showing the data with the use of javascript to show it on my index. I am using a php function to query the sql script and i am using PDO.
index.php
<tr>
<th>last_name</th>
<th>first_name</th>
<th>middle_name</th>
<th>gender</th>
<th>age</th>
<th>course</th>
</tr>
<tr>
<div id=content> </div
</tr>
profile.php
public function showProfileRecord(){
require_once 'app/lib/config/config.php';
$result = $conn->prepare("SELECT a.`first_name`, a.`middle_name`, a.`last_name`,a.`gender`,a.`age`, a.`course` FROM account a ORDER BY name ASC");
while ($rows = $result->fetch()) {
$records = $records . "<td>" . $rows["last_name"] . "</td> <td>" . $rows["first_name"] . "</td> <td>" . $rows["middle_name"] . "</td> <td>" . $rows["gender"] . "</td> <td>". $rows["age"] . "</td> <td>" . $rows["course"] . "</td>";
}
$returnData[]["records"] = $records;
echo json_encode($returnData);
}
functions.js
showProfileRecord = function(data){
data = JSON.parse(data);
$("#content").append("\
<tr>" + data[0].records + "</tr>\
");
}

Changing a Table Row's colour onload

So I'm working on a webpage where an admin can disable and enable users. I have it so when the admin disables or enables a user, the text in the user's table row will change colour accordingly. However, I can't seem to change the row's colour onload. So they all show up as the enabled colour (Black). Here's my code so far;
function loadRow(){
var check_array = document.getElementsByName("checkbox[]");
var array_size = check_array.length;
for(var i =0; i < array_size; i++){
if(check_array[i].checked){
var rowId = check_array[i].value;
document.getElementById(rowId).style.color = "#4D4A49";
}
}
}
My rows are all populated through a PHP connection to my database, and here's the code for that;
while($row = mysqli_fetch_array($result)){
$output .= '<tr id="row'. $row['id'] .'"><td>' . $row['name'] .'</td>
<td>'. $row['username'] .'</td>
<td>' . $row['email'] . '</td>
<td><input name="checkbox[]" type="checkbox" id="checkbox'. $row['id'] .'" value="' . $row['id'] . '" onchange="disableUser(this.value)" ' . ($row['disable'] == 0 ? 'checked' : '') .'/></td>
<td>Delete</td>
</tr>';
}
The HTML then looks like this;
<table border="1">
<tr><th>Name</th><th>Username</th><th>Email</th><th>Disabled</th><th>Delete</th></tr>
<?php echo $output; ?>
</table>
I am wondering if the onload is in the wrong place or not. Any suggestions? If I left something out, and am unclear, please let me know and I'll edit my post. Thanks.
You have used:
'<tr id="row'. $row['id'] .'">'
but
var rowId = check_array[i].value;
document.getElementById(rowId).style.color = "#4D4A49";
is using the value attribute from the checkboxes which are set to:
value="' . $row['id'] . '"
hence either change:
document.getElementById('row' + rowId).style.color = "#4D4A49";
or
'<input name="checkbox[]" type="checkbox" id="checkbox'. $row['id'] .'" value="row' . $row['id'] . '" onchange="disableUser(this.value)" ' . ($row['disable'] == 0 ? 'checked' : '') .'/>'

Categories