Develop Reference

change div backgroundcolor with js and php

i am working on my first own website. i try to display which cinema seats are already booked, by turning theire backgroundcolor red. i store the reservations in an sql database. i do get the correct value and i can display it on my website, but still the getById won t work.
This is how i create the divs i want to tune:
<?php
for ($i=0; $i < $saalinfo[2]; $i++) {
echo "<div class='rowsaal'>";
for ($j=0; $j < $saalinfo[3]; $j++) {
$k = $i+1;
echo "<a onclick='JavaScript:removeday($k$j)';>";
echo "<div id='$k$j' class='seat' >";
echo "</div>";
echo "</a>";
}
echo "</div>";
}
?>
This is the way i try to change the background color. I used the exact same js wording in other occasions and it did work so i am guessing my id value is not right:
function getres(){
var date = document.getElementById('labeldate').value;
document.getElementById('showdate').innerHTML = date;
var booked;
booked = "<?php echo $dis; ?>"; //$dis is one value i get back from mysqli_fetch_array in this case its 34
document.getElementById(booked).backgroundColor = "red";
document.getElementById('showdate').innerHTML = document.getElementById('showdate').innerHTML + booked;
}
For clarification: booked shows the correct value which is 34 in this case. In the database itself its saved as a txt value. if i look into the html source code i can see that the value 34 is assigned for booked.
booked = "34";
but the div id is set in the following pattern as it is limitted in the use of '' because they are formed in php
</a><a onclick='JavaScript:removeday(34)';><div id='34' class='seat' ></div></a>
i already had some issues where the use of "" and '' lead to different results. Is this the same case here? and how can i fix the issue? Many thanks in advance.

I have not checked all of your code but there is no "backgroundColor" on the element. You need the style property.
document.getElementById(booked).backgroundColor = "red";
should be
document.getElementById(booked).style.backgroundColor = "red";

how to transfer value one page to another use javascript

I want to open a comment page, When someone click on the image.
I'm getting all the images from database and added onclick event listener to open the comment page.
i also want to transfer image id (id of clicked img ) which is 'IDpic' in database as value for comment page. below is the code Snippet.
<?php
error_reporting (0);
$cat;
include 'dbcon.php';
$cat=$_SESSION["cat"];
$sql = "SELECT img FROM img WHERE cat LIKE '$cat'";
$result = mysqli_query($conn, $sql);
if($cat!=""){
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left onclick="clickedButton()" />';
}
} else {
echo "no pic upload ";
}
}
mysqli_close($conn);
?>
<script type="text/javascript" language="JavaScript">
function clickedButton() {
window.location = 'cmnt.php';
}
</script>
I want the solution without jQuery !

Why not just give:
<a href="cmnt.php?id=12">
No JavaScript also!

To do
Remove your onClick Event.
Remove JS Code (clickedButton Function).
Why should you remove it?
Your case doesn't require a JS method. Your image is enclosed by an Anchor tag that has your link. That will take care of your need.
Try the code below.
<?php
echo '<img src ="'.$row["img"].'"'.'alt="pic" height="200px" width="250px" align = left />';
?>

You can put your page in a form and set and store the link in hidden input type and retrieve it using GET , POST methods
You can use window variables if you want if page does not reload.
Use window.location = '/your_page?data=' + name;

cannot impliment infinite scroll with my code

I've read multiple examples on infinite scrolling, but I find it hard to implement it to my code. Here's the code, where data get shown from MySQL database :
<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php
$result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
while ($row = mysql_fetch_array($result))
{
extract($row);
$link=$row["linkas"];
echo "<div class='col-md-4'>";
$sites_html = file_get_contents($link);
$html = new DOMDocument();
#$html->loadHTML($sites_html);
$meta_og_img = null;
//Get all meta tags and loop through them.
foreach($html->getElementsByTagName('meta') as $meta) {
//If the property attribute of the meta tag is og:image
if($meta->getAttribute('property')=='og:image'){
//Assign the value from content attribute to $meta_og_img
$meta_og_img = $meta->getAttribute('content');
}
}
list($width, $height) = getimagesize($meta_og_img);
$skaicius = abs($width - $height);
if($width > $height) {
echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
}
else if($width < $height) {
if($skaicius < 100){
echo "<img src=\"$meta_og_img\" style='width:234px'
onclick='window.open(\"$link\", \"_blank\");'>";
}
else {
echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
onclick='window.open(\"$link\", \"_blank\");'>";
}
}
echo "</div>";
}
?>
Stored in the database is a link to, for example, a internet shop page. What the code does is it takes a image for facebook preview from the link stored in the db, which is tagged og:image and then positions it to center. The problem is that page tries to load every image and that takes a ton of time to load the page, thats why I want to somehow make it into a load on scroll page. Btw, Im using Bootstrap's grid system here. I hope you can help me. P.S. If you don't get what I mean because of my bad english, ask me and I'll try to answer it more clearly

php Javascript variable quoting error

I'm having trouble with quotes in a line of the attached code.
It is part of a picture viewer. Picture data url "PicNotes" is read from mysql. I am attempting to enhance the result by adding a picture info pop-up but can't get the quotes right.
I have added some rem statements around 3 versions (attempts) to get it working.
$data = mysql_query("SELECT * FROM $tbl_name WHERE type='$type' LIMIT $start, $limit_col_1");}
// Your while loop here
while($row = mysql_fetch_array($data))
{//REM If there is no info don't show the info link
if ($row[PicNotes]) {
// $icon= <img src='images/info.png'>; //REM This line was the original call for the pop-up script
// $icon = "<a href=notes/tempest_series.php><img src=images/info.png></a>"; //REM This line works but does not have any of the Jarvascript or URL variable from the DB
// $icon = "<a href=notes/$row[PicNotes]><img src=images/info.png></a>"; //REM This line doesn't crash but the URL is corrupted
$icon = "<img src=images/info.png>"; //REM This line crashes with an "Unexpected T_STRING error
}else{
$icon='';}
// Display LHS Thumbnail and Viewer Pic Data
echo "<a href='images/".$row['vfile']."' rel='enlargeimage::mouseover' rev='loadarea' title='<b>".$row['Title']."</b><br />".$row['Medium']." ".$row['iw']." x ".$row['ih']." cm. $icon'><img border='1' src='images/".$row['tnfile']."
' alt='' width='".$row['tnx']."' height='".$row['tny']."' class='tn' /></a><br />";
}
Please can somebody put me on the right track.

1) Escape the inner quotes:
$icon = "<img src=images/info.png>";
2) Use single quotes:
$icon = "<a href='JavaScript:Popup(notes/$row[PicNotes])'><img src=images/info.png></a>";

Use curly braces ({}) for better variable concatenation
$icon="<img src=\"images/info.png\">";

Delete specific uploaded file from folder on server and display remaining files

going a bit crazy trying to get this to work... I have a photo upload page that lets you upload multiple photos and displays all the uploaded photos of a specific user below the upload form. I also place a delete button next to each photo however once you delete a photo it keeps displaying that image (although with a broken link as the photo is deleted from the server). I start by looping through a table that holds the file dir and name and then displays those photos. I have a submit button that calls the unlink() function.
$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
$result = mysqli_query($dbcon, $photoQuery);
while ($photo_data = mysqli_fetch_array($result)){
echo "<form id=photo_Form action=listing_photos.php method=post> ";
echo "<input type=hidden name=photoDir value='$photo_data[Photo_Dir]' />";
echo "<input type=submit name=photoDel id=submit_but value=Delete />";
echo "</form>";
echo "<img src='$photo_data[Photo_Dir]' height=100px width=100px>";
}
Then here is the php that deletes the photo file and the row in the table that stored the photo info.
if (isset($_POST['photoDel'])){
$fh = fopen($_POST['photoDir'], 'a');
fclose($fh);
unlink($_POST['photoDir']);
$photoDel= "DELETE FROM photo_index WHERE Photo_Dir='$_POST[photoDir]'";
$result = mysqli_query($dbcon, $photoDel) or die(mysql_error());
echo "Photo Removed";
}
I had to open and close the file before using unlink because if I didnt I would always get a warning after the photo was deleted saying that unlink(images/somephoto.jpg) did not exist (because it had been removed from the server already)
Once the delete button is clicked it should refresh the page shouldn't it?? and when the page refreshes it should reload the query and only display the photos that are listed in the photo tabel?? For what ever reason it takes two refreshes to get that result. Any help would be very much appreciated, or any way to just do this better! Cheers.

First off, your code is vulnerable to SQL injection. You should look into that. Next, maybe you should use JS to find and remove the image from the document. So, have a <button> that runs a function which removes the image with that specific source from the document.
Here's a PHP snippet:
$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
$result = mysqli_query($dbcon, $photoQuery);
while ($photo_data = mysqli_fetch_array($result)){
echo "<form id=photo_Form action=listing_photos.php method=post> ";
echo "<input type=hidden name=photoDir value=". $photo_data[Photo_Dir] . "/>";
echo "<input type=submit name=photoDel id=submit_but value=Delete />";
echo "</form>";
echo "<img src=" .$photo_data[Photo_Dir]. " id = 'picture' height=100px width=100px>";
echo "<script>
var d = getElementById('submit_but');
var b = getElementById('pic');
d.onclick = function(){
pic.parentNode.removeChild(b);
return true;
}
</script>";
}
See here for the JavaScript:
http://jsfiddle.net/BUXBq/