Develop Reference

Getting HTML tag text by right-clicking on it - JavaScript

I created a PHP file that reads a directory and prints the files inside. The file names are written in a 'p' tag. Is it possible to get the text of the tag by right-clicking on it?
PHP Code
'''
<?php
$dir = "../dashboard/uploads/";
$content = scandir($dir);
foreach($content as $file) {
if ($file != "." && $file != "..") {
echo "
<div style='margin-left: 40%'>
<div style='display: flex;'>
<a href='../dashboard/uploads/$file' style='display: block; font-family: Open Sans; text-decoration: none; margin-bottom: 10px;' target='_blank'><p>$file</p><a>
<form action='delete.php' method='get' style='text-align: left;'>
<a href='delete.php?file=$file' type='submit' style='margin-left: 10px; text-align: right; color: red;'><p>Remove $file</p></a>
</form>
</div>
</div>
";
}
}
?>
'''

You can use
document.querySelector('a p').addEventListener("contextmenu", (ev)=>{
ev.preventDefault();
console.log(ev.target.textContent);
})

PHP Why is my while loop not assigning each row an individual ID from column in database

Im having an issue where i can't seem to assign an ID from a column in the database to each DIV respectively.
The Scenario: I have a page full of clients and next to each one is a vote up and vote down button. When i click one of them it simply adds +1 to either the positive or negative column.
What is the Issue? The issue is no matter which client i vote for it only updates the ClientID '1'
What have i done so far?
I am using a while loop to retrieve all the clients from the
database. I have given each div that comes through a data-clientid
for $_POST['ClientID'].
I have classes called voteup and votedown so i can reference them in
my JS script.
In my script i assign the clientid from data-clientid to variables
using the classes voteup and votedown
In the voteup/down php files i then use this clientid to use the
update sql to update the column.
What is my code?
My main page that displays the clients and the voting buttons (Shortened to the bit you need to see, connection to the database is included and all of that works fine)
<?php
$clientInfo = "SELECT * FROM Clients ORDER BY Client ASC";
$stmt = sqlsrv_query($conn, $clientInfo);
echo "<div style='width: 100%; display: inline-block;'>";
while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" .
"
<div style='width: 35%;'></div>
<div onclick=\"voteUp()\" style='display: inline-block; width: 5%;'>
<span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
</div>" .
"<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .
"<div onclick=\"voteDown()\" style='display: inline-block; width: 5%;'>
<span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
</div>
<div style='width: 35%;'></div>
</div>
<br />";
}
echo "</div>";
?>
This then links to my scripts file with my JQuery (I set it up to print the ID in the console so i can see which ID it is hitting. Im just going to take Vote Up as an example)
window.voteUp = function() {
var clientid = $(".voteup").data("clientid");
$.post("voteup.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
}
and then there is the voteup.php that i am referring to in my $.post
<?php
if (isset($_POST['clientid'])) {
$voteup = "UPDATE Clients SET Pos = (SELECT MAX(Pos) FROM Clients) + 1 WHERE ClientID = " . $_POST['clientid'];
$stmt = sqlsrv_query($conn, $voteup);
} else {
echo "Failed";
}
?>

Javascript issue
As stated in comments, your Javascript code is getting only the first voteup element in the DOM Tree.
you need to use a dynamic way to find the specific voteup div for the client that you are voting up (or down), try this:
while ($client = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
echo "<div class='clientid' style='height: 50px; font-size: 18px; vertical-align: middle; display: inline-block; width: 100%'>" .
"
<div style='width: 35%;'></div>
<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px;' class='hover-cursor fa fa-chevron-up vote-up'></span>
</div>" .
"<div class='hover-cursor hvr-underline-reveal voteup votedown' data-clientid='{$client['ClientID']}' style='width: 20%; display: inline-block;'>" . $client['Client'] . "</div>" .
"<div style='display: inline-block; width: 5%;'>
<span style='font-size: 20px; text-align: right;' class='hover-cursor fa fa-chevron-down vote-down'></span>
</div>
<div style='width: 35%;'></div>
</div>
<br />";
}
I've just removed the onclick event of your vote-up and vote-down buttons.
Now you need only one script:
<script>
$(".vote-up").click(function(){
var clientId = $(this).parents(".clientid").find(".voteup").data("clientid");
$.post("voteup.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
});
$(".vote-down").click(function(){
var clientId = $(this).parents(".clientid").find(".votedown").data("clientid");
$.post("votedown.php", {clientid: clientid}, function(data) {
console.log("Data:" + clientid)
});
return false;
});
</script>
Basically we are getting the top parent of vote-up button, the div.clientid, and with it, we search for the div.voteup that contains the clientid data
PHP Issue
Also, your UPDATE query is wrong, you are selecting the MAX(pox) from Clients through a subquery without the where clause, try this:
$voteup = "UPDATE Clients SET Pos = (SELECT MAX(Pos) FROM Clients WHERE ClientID = " . $_POST['clientid']. ") + 1 WHERE ClientID = " . $_POST['clientid'];
Later, try to transform your queries into parametrized queries, to avoid sql injection issues.

Using hide/show - on element at the time

I'm using php and jquery to print out articles on my webpage. And I want to be able to use show/hide jquery on one article at the time. As it is right now, when I press hide or show all <article> elements in my foreach loop is effected.
HTML and PHP code
<section class='col-md-8'> <!-- Div for content, images etc. -->
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div id='pub'>";
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article id='pub_art'>" . $sp['content'] . "</article>";
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button id='hide'>Hide</button>";
echo "<button id='show'>Show</button>";
echo "</div>";
}
?>
</section>
Jquery code
$(document).ready(function(){
$("#hide").click(function(){
$("article").hide();
});
$("#show").click(function(){
$("article").show();
});
});
CSS
#pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}

So, first of all, you're using the same id multiple times, changes these to class instead (as id's can only be used once, and classes can be used multiple times). like this:
$output = '';
foreach($gp as $sp){
$output .= "<div class='pub'>";
$output .= "<h4>" . $sp['title'] . "</h4>";
$output .= "<article class='pub_art'>" . $sp['content'] . "</article>";
$output .= "<p>" . $sp['created'] . "</p>";
$output .= "<p>". $sp['writer'] ."</p>";
$output .= "<button class='hide'>Hide</button>";
$output .= "<button class='show'>Show</button>";
$output .= "</div>";
}
echo $output;
As you can see i've concatenated every single echo into one variable and echo it all at once, which is a better aproach (performance wise)
now for the javascript, you're selecting every single article tag, instead of this we're gonna look for the sibling article which is inside the same div as the hide or show class.
$(document).ready(function(){
$(".hide").click(function(){
$(this).siblings('article').hide();
});
$(".show").click(function(){
$(this).siblings('article').show();
});
});
And your CSS (now also with the class selector)
.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}

As you are producing invalid markup with php with having same ids for multiple instances of elements, so change the attribute id to class:
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div class='pub'>"; // <-----here
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article class='pub_art'>" . $sp['content'] . "</article>"; //<---here
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button class='hide'>Hide</button>"; // <------here
echo "<button class='show'>Show</button>"; // <------here
echo "</div>";
}
?>
css:
.pub article.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
Now you can use this script to work:
$(document).ready(function(){
$(".hide, .show").click(function(){
$(this).siblings("article").toggle(this.className === 'show');
});
});
The .hide and .show buttons are siblings of the element then you just need to use .siblings() to access the its sibling article as they all are been wrapped inside a div .pub.

You can ask Jquery to hide the first article above the element clicked by doing so :
$(document).ready(function(){
$("#hide").click(function(){
$(this).prev("article").hide();
});
$("#show").click(function(){
$(this).prev("article").show();
});
});
However i suggest you to change your PHP so that it generate unique IDs in order to create valid HTML.

HTML Input Type="url" for <a href =""> Effects

I need the following format
"<div><input type='url' id='link1' data-rowid='1' class='Link' value='here ...'/</div>"
for Jquery process.
But I want to achieve the appearance of "<a href =''>here ...</a>".
Is there any way to do it?

You could try styling the input via CSS in a way that mimics a regular <a> tag:
#link1{
display: inline-block;
background: transparent;
border: none;
text-decoration: underline;
// etc, etc...
}
That will retain the functionality of the original <input> tag, but with the appearance of a link.

You should use ajax to do that, for example
<div id="link" contenteditable="true"><?php echo $link; ?></div>
javascript:
$(function () {
var message_status = $("#status");
$("div[contenteditable=true]").blur(function () {
var projectid = $(this).attr("id");
var text = $(this).text();
$.post('update.php', linkid + "=" + text, function (data) {
if (data != '') {
message_status.fadeIn();
message_status.text(data);
setTimeout(function () {
message_status.fadeOut()
}, 5000);
}
});
});
});

Div height auto issue

I have a #val container div that stretches to accommodate Javascript content within a div called #cat-container.
cat-container has 4 tabs above it and are numbered 1 - 4, so if you click 1, it will load content from a php array, and similar for tabs 2 -3.
When you click on each tab, #val-container successfully stretches to the correct height, however I have set tab 1 and its content to display by default as the page loads. The problem is that the content from all the other tabs gets loaded into tab 1 onpage load.
<script type="text/javascript">
var i=1;
var tab;
document.getElementById('cat-container').style.position='relative';
document.getElementById('val-container').style.height='auto';
while(tab=document.getElementById('option'+i+'-body'))
{
tab.style.position='absolute';
tab.style.top='0';
tab.style.left='0';
i++;
}
var urllocation = location.href; //find url parameter
if(urllocation.indexOf("#") == -1)
{
displayTab(1);
}
else
{
if(urllocation.indexOf("#option1")>-1)displayTab(1);
else if(urllocation.indexOf("#option2")>-1)displayTab(2);
else if(urllocation.indexOf("#option3")>-1)displayTab(3);
else if(urllocation.indexOf("#option4")>-1)displayTab(4);
else displayTab(1);
}
</script>
Essentially I would like tab 1 to just show just its content on page load.
This line is the issue:
document.getElementById('val-container').style.height='auto';
So if the dispalyTab(1), just show its content!
The code that actually displays the tabs:
<script type="text/javascript">
function displayTab(num)
{
var tab,x;
x=1;
while(tab=document.getElementById('option'+x+'-body'))
{
if(num!=x)tab.style.display='none';
else tab.style.display='inherit';
x++;
}
}
</script>
<div class="category-tab" id="aoption1">Tab1</div>
<div class="category-tab" id="aoption2">Tab2</div>
<div class="category-tab" id="aoption3">Tab3</div>
<div class="category-tab" id="aoption4">Tab4</div>
<br><br>
Here is the PHP/HTML:
I have used tab 1 - 4 to simplify things but in actual fact they represent price ranges:
echo "<div id=\"cat-container\">";
echo '<div id=\"val-contain\">';
$cats=array(0,1000,5000,10000,100000);
for($ci=1;$ci<count($cats);$ci++)
{
if($ci==4)echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for over £100!</h3></a>";
else echo "<div class=\"category-body\" id=\"option".$ci."-body\"><a name=\"option".$ci."\"><h3>Gifts for under ".fixedToFloatCurrency($cats[$ci])."!</h3></a>";
$i=0;
for ($p = 0; $p < count($game); $p++ )
{
$game[$p]->getProduct();
if($game[$p]->price<$cats[$ci] && $game[$p]->price>=$cats[$ci-1])
{
if (($i % 3) == 0 )
{
if($i)echo "</tr></table>";
echo "<table id=\"newarrivals\" style=\"padding-top:5px;\"><tr>";
}
echo "<td>";
$game[$p]->getLink();
echo $game[$p]->link;
echo "<h2 class=\"section-tab-game2\">".$game[$p]->name."</h2>";
echo "<div class=\"container\" style=\"text-align:center;\"><div class=\"image-spacer\">";
echo $game[$p]->getImage();
echo $game[$p]->image;
echo "</div>";
echo "<div class=\"specialprice\" >";
if(!is_numeric($game[$p]->price)){
echo $game[$p]->price;
}
else
{
if($game[$p]->price < $game[$p]->maxprice)
{echo "From only: £".fixedtofloat($game[$p]->price);}
else
{echo "Only: £".fixedtofloat($game[$p]->price);}
}
echo "</div></div></a>";
echo "</td>";
$i++;
}
}
echo "</tr></table></div>";
}
echo "</div>";
echo '</div>';
?>
CSS:
#val-contain { }
#cat-container { }
.category-tab { width:125px;border:2px solid white; height: 50px; background:url('images/design- gac/valentines-navigation.png')0 0 no-repeat;float:left; text-align:center; font-family:Arial,sans-serif;font-size:12pt;font-weight:bold; color:white; padding-top: 7px;}
.category-tab a { color:white; }
.category-tab a:hover { color:#white; }
.category-body { width:515px; border:1px solid #3c2130; height: auto; overflow:hidden; background:url('images/design-gac/valentines-navigation-back.png')0 0 repeat-x;}
.category-body h3 { font-size:27pt; text-align:center; color: #ffffff; font-family: Arial,sans- serif;}
.container { background-color:white; }
.imgpad { margin-bottom: 10px; }
.vallinks {color: #c50f07; font-weight: bold; }
Hope someone can help?
Volterony

This is a pure html/inline css solution with one static tab.
<body>
<style>
html{
height: 100%;
}
body {
min-height: 100%;
}
</style>
<div style="max-height: 5%;min-height: 5%; background-color: #d9edf7;display: block">
<div class="category-tab" style="float: left" id="aoption1"><a href="#option1" onclick="displayTab(1);
return false;">Tab1</a></div>
<div class="category-tab" style="float: left" id="aoption2"><a href="#option2" onclick="displayTab(2);
return false;">Tab2</a></div>
<div class="category-tab" style="float: left" id="aoption3"><a href="#option3" onclick="displayTab(3);
return false;">Tab3</a></div>
<div class="category-tab" style="float: left" id="aoption4"><a href="#option4" onclick="displayTab(4);
return false;">Tab4</a></div>
</div>
<div style="max-height: 95%;min-height: 95%; background-color: red;display: block">
Tab 1 content
</div>
</body>

you used 'val-contain' as your div's id
echo '<div id=\"val-contain\">';
but you are trying to change it with
document.getElementById('val-container').style.height='auto';
change the div's id to val-container.