echo "<tbody";
echo "<tr>";
echo "<td>{$id}</td>";// display customer Id
echo "<td> {$firstname} {$lastname}</td>"; //display customer title,firstname,lastname
echo "<td>{$date->format('h:i A')}</td>";//display the time customer joined the queue
echo "<td><a href='#' onclick='delete_user({$id});'
class='btn btn-danger'>btn</a> ";// Delete Record Link
echo "<td><a href='#' onclick='delete_user2({$id});'
class='btn btn-danger'>btn</a> ";// Delete Record Link
echo "<td align='center'>" . '<input type="button" value="Accept" name="txtaccept" onclick="Accept(this)"> <input type="button" value="Reject" name="txtreject" onclick="Reject(this)">' . "</td>";
echo "</tr>";
echo "</tbody";
} // End while()
echo "</table>";
<style type="text/css">
table { border-collapse: collapse; } //to remove cell spacings
table td { padding: 2px; }
tr.accepted, tr.accepted td { background-color: green; }
tr.rejected, tr.rejected td { background-color: red; }
</style>
<script type="text/javascript">
function Accept(el)
{
var tr = el.parentNode.parentNode; //tr
tr.className = "accepted";
}
function Reject(el)
{
var tr = el.parentNode.parentNode; //tr
tr.className = "rejected";
}
</script>
Hello there is my code that works fine,to explain,when I click button accept it changes color to table row in green and clicking reject changes color to red,my problem is that when I refresh page results are refreshing too,How can I save this result I get by clicking these buttons? I am really new,Its silly question may be but you can save my day.
Put you logic when you printing row. For example:
Change
echo "<tr>";
To
echo "<tr ".($value ? ($value == 'accepted' ? "class='accepted'" : "class='rejected'") : "").">";
$value -> your column in database where you save if it is accepted or rejected.
Related
I'm trying to use jquery to click a link in one div and have it open an HTML document in another div (named infoblock) that sits beside the original div. I found an example here but I can't get it to work. I found a couple other variations on the net, but still no luck. Part of the link needs to transmit a variable so I'm not sure if that's part of the problem. I tried attaching the click function to a div surrounding the link with an ID of "nav" as well as the link itself with an ID of "details". When I click on the link, it opens the correct page in the full window, not in the div it's supposed to go to. Thank you in advance for any help.
$(document).ready(function() {
$("#reservename").click(function() {
$("#infoblock").load("createhandle.html");
});
$("#uploadpic").click(function() {
$("#infoblock").load("uploadpic.php");
});
$("#deletechar").click(function() {
$("#infoblock").load("selectdelete.php");
});
$("#nav").click(function() {
$("#infoblock").load($(this).find("a").attr("href"));
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="charlist" class="block">
<b>Your Characters:<b>
<br>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
<button id="deletechar">Delete</button>
<?php
$result5 = mysqli_query($con,"SELECT * FROM handle WHERE user='$handle' ORDER BY charname ASC");
while($row = mysqli_fetch_array($result5))
{
echo "<table>";
echo "<tr>";
echo "<td rowspan=5 align=left><img src='../pictures/" . $row['face'] . "' border=3></td>";
echo "<th align=left><a href='chat.php?charname=" . $row['charname'] . "'>" . $row['charname'] . "</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><a href='choosepic.php?charname=" . $row['charname'] . "'>Choose Picture</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><div id='nav'><a id='details' href='../details.html?charname=" . $row['charname'] . "'>Details</a></div></th>";
echo "</tr>";
if ($row['type'] == 'new'){
echo "<tr>";
echo "<th align=left><a href='createsheet.php?charname=" . $row['charname'] . "'>Create</a></th>";
echo "</tr>";
}
echo "<hr>";
echo "</table>";
}
?>
</div>
<p id="infoblock" class="block"></p>
You have to prevent the default behaviour when anchor tag is clicked In order to do that that you have to be listen for click on the anchor itself not div and return false in order to prevent its default behaviour. So your code will become like this
$('#details').click(function(e){
{
e.preventDefault(); //instead of this you can also return false
$("#infoblock").load($('#details').attr("href"));
}
});
This works for me:
$(document).ready(function(){
$('#details').click(function(e){
e.preventDefault();
$("#infoblock").html('<object type="text/html" data="'+$('#details').attr("href")+'" >');
});
});
i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}
Each of the cells in the table below, generated by php/mysql (cells generated by a loop through dates foreach employee. Each cell is clickable other than the headings.
When the user clicks on a cell I want a dropdown box to appear with a number of options which depending on whether the cell has a shift in it or not.
At the moment if I click an empty cell on any employees row it will open the dropdown in the first employee's first empty cell.
How can I name or identify these drop down lists in a dynamic way so that the javascript function will open the correct dropdown for the correct cell?
I know that use of an array/list would be most appropriate, but can't figure out how get js to identify it.
The complete code for the timetable at the bottom will put:
echo "<td onclick='myFunction()' class='dropbtn'>";
echo "<div class='dropdown'>";
echo "<div id='dropdown' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
echo "</td>;
As each empty cell on an employee's row (not the unassigned ones).
Javascript:
function myFunction() {
document.getElementById("dropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
PHP to generate timetable
$week = $_POST['week'];
$year = $_POST['y'];
for($i=0;$i<7;$i++){
$gendates = new DateTime();
$gendates->setISODate($year,$week,1 + $i);
$datesarray[$i] = $gendates->format('Y-m-d');
}
echo "<table class='editweektable'><tr>";
echo "<th>Employee</th>";
foreach($datesarray as $key => $date){
echo "<th>".date("D", strtotime($date))."<br>".date("d-m", strtotime($date))."</th>";
}
echo "</tr>";
$getunassigned->execute();
while($row = $getunassigned->fetch(PDO::FETCH_ASSOC)){
echo "<tr><td>Unassigned</td>";
foreach($datesarray as $key => $date){
echo "<td>";
if($row['date'] == $date){
echo date("H:i", strtotime($row['starttime']))." - ".date("H:i", strtotime($row['finishtime']));
} else {
//empty cell
}
echo "</td>";
}
echo "</tr>";
}
$getemployees->execute();
while($row1 = $getemployees->fetch(PDO::FETCH_ASSOC)){
echo "<tr><td>".$row1['fname']." ".$row1['lname']."</td>";
foreach($datesarray as $key => $date){
echo "<td onclick='myFunction()' class='dropbtn'>";
$eid = $row1['eid'];
$getemployeeshifts->execute();
$row2 = $getemployeeshifts->fetch(PDO::FETCH_ASSOC);
$count = $getemployeeshifts->rowCount();
if($count == 0){
echo "<div class='dropdown'>";
echo "<div id='myDropdown' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
} else {
echo date("H:i", strtotime($row2['starttime']))." - ".date("H:i", strtotime($row2['finishtime']));
}
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
I changed the id of the dynamically generated dropdowns to something related to the cell (date and employee)
echo "<div class='dropdown'>";
echo "<div id='MyDropdown".$eid.$date."' class='dropdown-content'>";
echo "<a href='#'>Link 1</a>";
echo "<a href='#'>Link 2</a>";
echo "<a href='#'>Link 3</a>";
echo "</div>";
echo "</div>";
And then javascript
function myFunction(eid, date) {
document.getElementById("MyDropdown"+eid+date).classList.toggle("show");
}
Never duplicate the id of a element and to solve the reference of the DOM element you can pass this to the function :)
Update: added online example: https://jsfiddle.net/gdn5mfvo/
Example table, dont duplicate id
<table style="width:500px">
<tr>
<td onclick='myFunction(this)' class='dropbtn'>
<div class='dropdown hide'>
<div id='myDropdown1' class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
click here
</td>
<td onclick='myFunction(this)' class='dropbtn'>
<div class='dropdown hide'>
<div id='myDropdown2' class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
click here
</td>
</tr>
</table>
Example JS
<script>
function myFunction(elem) {
// elem points to the td clicked
// elem.firstChild.nextSibling refernce to <div class='dropdown hide'> of the clicked td
console.log(elem.firstChild.nextSibling.classList.toggle('hide'));
}
</script>
Example css
<style>
table, th, td {
border: 1px solid black;
height:10px;
}
.hide{
display:none;
}
</style>
I haven't worked much with php and javascript and was hoping to get some help. I want to be able to detect which button was clicked exactly. I'm creating one button per row but I don't know how to figure out what row the click was made in. This is what I have so far...
# Get all the table data from the database
$getData = mysqli_query($conn, "SELECT * FROM `query_table`") or die ("Error occured while selecting!");
// echo '<form method="post" action="index.php">';
echo '<table border="1">';
echo '<tr>';
echo '<td>Questions</td>';
echo '<td>Likes</td>';
echo '<td></td>';
echo '</tr>';
# Loop through each row and print out the question
while ($row = mysqli_fetch_array($getData)) {
echo '<tr>';
echo '<td>';
echo $row['Question'];
echo '</td>';
echo '<td>';
echo $row['Likes'];
echo '</td>';
echo '<td>';
?>
<input type="button" id="myButton" value="Like" onclick="myFunc(<?=$row['ID']?>)" />
<?php
echo '</td>';
echo '</tr>';
}
echo '</table>';
// echo '</form>';
echo '<p id="text"></p>';
mysqli_close($conn);
?>
<script type="text/javascript">
function myFunc(id) {
document.getElementById("text").innerHTML = id;
}
</script>
So far this prints out the row id where the button was clicked, but I don't suppose I can assign that parameter value directly to a php variable that I can then use for mysql queries. How is stuff like this normally done, please help.
<input type="button" data-id="<?=$row['ID']?>" value="Like" onclick="myFunc(this)">
and
<script type="text/javascript">
function myFunc(button) {
document.getElementById("text").innerHTML = button.getAttribute('data-id');
}
</script>
In JavaScript the token "this" refers to the context in which the code is running which in this case is the button. Store custom data in attributes prefixed with data- to ensure they are not disturbed - standard practise.
Here i am collecting the category and area value from the search-form using get method. So as i m having 7 records into the database and i want to display only 4 records per page and when user clicks on Next button then the remaining records need to get displayed but here my code is displaying only first four records from the database but when i click on next button then the remaining 3 records are not getting displayed.
Consider area=Mumbai and category=lawn. and if there is only 7 records into the database then i want first four to get display in first page and remaining 3 into the same page on clicking the next button..
Here is my code:
<?php
$link=mysql_connect("localhost","root","");
mysql_select_db("celebration_db",$link);
$q="select count(*) \"total\" from hallinfo";
$ros=mysql_query($q,$link);
$row=(mysql_fetch_array($ros));
$total=$row['total'];
$dis=4;
$total_page=ceil($total/$dis);
$page_cur=(isset($_GET['page']))?$_GET['page']:1;
$k=($page_cur-1)*$dis;
$category = $_GET['category'];
$area = $_GET['area'];
//$category = 'hall';
//$area = 'nagpur';
echo $category;
echo $area;
$q="select * from hallinfo where category = '$category' AND area = '$area' limit $k,$dis";
//$q="select * from hallinfo limit $k,$dis";
$ros=mysql_query($q,$link);
while($row=mysql_fetch_array($ros))
{
$imageId = $row['id'];
echo '<div id="pattern">';
echo '<table>';
echo '<tr>';
echo '<td colspan="2" width="300px" height="200px">
<img src="image-show.php?id='.$imageId.'">';
echo '</td>';
echo '<td width="150px" height="200px">'.$row['description'];
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>'.$row['rent'];
echo '</td>';
echo '<td>'.$row['capacity'];
echo '</td>';
echo '<td>'.$row['area'];
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</div>';
}
//echo '</table>';
//echo '<br/>';
if($page_cur>1)
{
echo '';
}
else
{
echo '<input style="background-color:green;border:1px black solid;border-radius:5px;width:120px;height:30px;color:black;font-size:15px;font-weight:bold;" type="button" value=" Previous ">';
}
for($i=1;$i<$total_page;$i++)
{
if($page_cur==$i)
{
echo ' <input style="background-color:green;border:2px black solid;border-radius:5px;width:30px;height:30px;color:black;font-size:15px;font-weight:bold;" type="button" value="'.$i.'"> ';
}
else
{
echo ' <input style="cursor:pointer;background-color:green;border:1px black solid;border-radius:5px;width:30px;height:30px;color:white;font-size:15px;font-weight:bold;" type="button" value="'.$i.'"> ';
}
}
if($page_cur<$total_page)
{
echo '<input style="cursor:pointer;background-color:green;border:1px black solid;border-radius:5px;width:90px;height:30px;color:white;font-size:15px;font-weight:bold;" type="button" value=" Next ">';
}
else
{
echo '<input style="background-color:green;border:1px black solid;border-radius:5px;width:90px;height:30px;color:black;font-size:15px;font-weight:bold;" type="button" value=" Next ">';
}
?>
It would seem your primary issue is in your count. While you are selecting only specific rows (in the above example rows with category = .. and area=.., you're initial count of the rows is returning the count of ALL rows in the database. So while there may be 7 rows in total, perhaps there are only 4 rows with the given filter.
As an aside, you should really be using mysqli: http://www.php.net/mysqli