change div backgroundcolor with js and php - javascript

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";

Related

Expanding the content by click it

When i click the more. I wanted the content should expand. I my page i have about 10 question with more option. The question content is coming through the php script.
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class=\"spanstyle\" id=\"fullquestion\">" . substr($question, 0, 170);
echo "...more</span><br>";
}
}
?>
I try to do that by javascript. ContectExpand() fire of when i click.
<script>
function contentExpand() {
var question = <?php echo $question; ?>;
document.getElementById("content").innerHTML = question;
}
</script>
Problem is, $question is changing the value as it is inside the loop. It doesn't have a fixed value.
Also I want to know that I can do that only along with php without javascipt.
For my solution you need some sort of $data['id'], which is unique for each question.. I think it cannot be done only in PHP, but you should try to use jQuery, it makes javascript much easier
<?php
$result = mysqli_query($conn, $query) or die("error: " . mysqli_error($conn));
//fetch the data.
if (mysqli_num_rows($result) > 0) {
while($data = mysqli_fetch_assoc($result)) {
$question = $data['question'];
echo "<span class='spanstyle' id='shortQuestion{$data['id']}'>" . substr($question, 0, 170).
"...<a href='#' onClick='return contentExpand({$data['id']});'>more</a></span>
<span class='spanstyle' id='longQuestion{$data['id']}'>{$data['question']}</span>
<br>";
}
}
?>
Javascript
<script>
function contentExpand( fullcontentId ) {
document.getElementById('shortQuestion'+fullcontentId).style.display = "none";
document.getElementById('longQuestion'+fullcontentId).style.display = "inline";
return false;
}
</script>
There are several issues with you code. Regarding your question, the most important are:
The while loop is generating several span elements with the same id.
The onClick function should content a reference to the element you want to expand.
You dind't include any code constraining the size of the span element, so there is nothing to be expanded.
How to fix them:
Modify the while loop
Create a $i variable that counts the rows and add it to the span id, to the link id and to the javascript function in this way:
$i = 0;
while($data = mysqli_fetch_assoc($result)) {
$i++;
$question = $data['question'];
echo "<span class='spanstyle' id='fullquestion_" . $i. "' >";
echo "<a href='#' id='link_" . $i . "' onClick='contentExpand(" . $i. ");'>more</a> ";
echo $question."</span><br>";
}
Create a javascript function that resize the span element:
You didn't tell us how you want to expand the content. There would be a lot of different ways to achieve it. This is just one that tries to respect your HTML markup, but surely not the best:
<script>
function contentExpand(id) {
var link = document.getElementById('link_'+id);
var span = document.getElementById('fullquestion_'+id);
if(link.innerHTML=='more')
{
link.innerHTML = 'less';
span.style.width = '100px';
}else{
link.innerHTML = 'more';
span.style.width = 'auto';
}
}
</script>
Modify the css of the span element:
A block element like a div would suit better anyway, but maybe you have very good reasons to use a span.
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
How to do it without javascript (just PHP):
It is certainly possible, but I guess you don't want to do it.
But if still you want to do so, generate the loop with just partial information about the related $question (as you do in the original code, substr($question, 0, 170)) but put the elements inside a form.
When the user click the more span element, submit the form to send from the client back to the server the information about the selected item.
Then, the PHP script would generate again the page but, this time, the selected item will load the full text of the question ($question instead of substr($question, 0, 170)).
So, you will have to make a new HTTP request call (that means to reload the page, AJAX is not an option if you don't want to use javascript).
Doing all this add a new layer of complexity and make it less efficient.
My advice is, if you don't have strong reasons to don't use javascript, use it.

Array value is replaced when second one stores in php

I am storing session values into array getting from URL and try to display it (getting size of product in a shopping cart).
But first value is replaced by second one.
My code:
if(isset($_POST['radio'])){
$_SESSION['sz']=$_POST['radio'];
$si=$_SESSION['sz'];
}
<a href="product_detail.php?pdt_id='.$pdid.'&add=' .$pdid .'&size='.$si.'"
class="cartBtn" onclick="return fun1()">Add to cart</a>';
?>
Display page:
$rt=$_GET['size'];
$_SESSION['wer']=$rt;
$array = $_SESSION['wer']; //Assigns session var to $array
//print_r($array);
echo $array[$x];
}
About First part mistakes :
<?php
if(isset($_POST['radio'])){
$_SESSION['sz']=$_POST['radio'];
$si=$_SESSION['sz'];
}
Add to cart';
?>
Your a tag is completely wrong as #Hearner said. It should be out of the php tag or inside with an "echo" like this :
echo "<a href='product_detail.php?pdt_id=".$pdid."&add=".$pdid."&size=".$si."' class='cartBtn' onclick='return fun1()'>Add to cart</a>";
You cannot access your $si variable out of your if statement. As written here over, if your $si isn't declared before (since you said that it was not your complete code...) then $si (in the link href) does not exist. You should therefore declare it before your if statement OR place your link (a tag) inside your if statement too!
What if your "$_POST['radio']" is NOT set ?? what happens? code missing... !! is $si declared anyway?
About Second part :
<?php
for( $x = 0, $max = count($array); $x < $max; ++$x ) {
$rt=$_GET['size'];
$_SESSION['wer']=$rt;
$array = $_SESSION['wer'];
echo $array[$x];
}
?>
I don't understand what you're trying to do here... need more code/information... cannot help more without your whole code...
EDIT :
Here is a very simple example to show you how to keep your get vars into a session array.
page one (pageOne.php):
<?php
session_start();
if(!(isset($_SESSION['myTest']))){
$_SESSION['myTest'] = "AWESOME";
$_SESSION['varToKeep'] = [];
}else{
echo "A session is already started. This is : ".$_SESSION['myTest']."<br/>";
if(count($_SESSION['varToKeep']>0)){
echo "There are ".count($_SESSION['varToKeep'])." vars in the array!<br/>";
for($i=0;$i<count($_SESSION['varToKeep']);$i++){
echo "Item ".$i." : ".$_SESSION['varToKeep'][$i]."<br/>";
}
}
}
echo "<br/>Click below to add a value in array<br/>";
$random = rand(1,100);
echo "<a href='pageTwo.php?mygetvar=STACKTEST".$random."'>Click here</a>";
?>
page two (pageTwo.php):
<?php
session_start();
echo "myTest value is : ".$_SESSION['myTest']."<br/><br/>";
$value = $_GET['mygetvar'];
$_SESSION['varToKeep'][] = $value;
echo "<a href='pageOne.php'>CLICK HERE TO RETURN ON PAGE ONE!</a>";
?>

Assign value to textbox onchange of php while select

I'm slowly understanding PHP but this one has me stumped.
I am populating a 'select' HTML element with data from PHP using.....
while($row = mysql_fetch_array($result))
All is working fine and I understand why.
I just wanted to fill in other textboxes on the page when a selection is made.
There is a very helpful fiddle at http://jsfiddle.net/TPE9r/5/ but it does not use PHP.
This is part of my code...
while($row = mysql_fetch_array($result)){
echo '<option value=" ',$row['ContactID'],' ">', $row['ContactName'],' -- ', $row['BusinessName'],
'</option>';}
Sorry about the formatting - new on here also...
I have used similar JavaScript to the fiddle but I can't display $row['ContactName'] or $row['BusinessName'] in a textbox. I can do this with a normal HTML select but not when the rows are in a 'while loop'
because you try to do something, what should be done on other way.
In the while loop, you are putting out the options html tags.
To do this, i think, the best practice, if you build an array from your results, so you can use that later, if you want to do it in PHP.
The code is not tested.
echo '<select name="whatever">';
$results = array();
while($row = mysql_fetch_array($result)){
//Storing all the rows in an array
$results[] = $row;
}
for($i=0;$i < count($results); $i++) {
echo '<option value=" ',$results[$i]['ContactID'],' ">', $results[$i]['ContactName'],' -- ', $results[$i]['BusinessName']."</option>";
}
echo '</select>';
//And now you can youse your $resuls array more then one time.
$key = 0;
//The key is based on, wich data you need.
//Maybe you want to set it in the loop with an if condition
echo '<input type="text" value="'.$results[$key]['ContactName'],' -- ', $results[$key]['BusinessName'].'" />';
Trying to post my own answer - having trouble with formatting on here.
The loop should be
for($i=0;$i < count($results); $i++) {
echo ''. $results[$i]['ContactName'].
"";
OOPS!!!!! Done it again - the loop code is truncated - don't know why
Finally, solved this one - maybe not the best way but it may help others.
I used : $(this).find(':selected').data('id') .... in the onchange
and used data-attributes in the loop
for($i=0;$i < count($results); $i++) {
echo '<option data-id="'.$results[$i]['ContactID'],' " data-bn="'.$results[$i]['BusinessName'],' " >'. $results[$i]['ContactName'].
"</option>";
and 3 textboxes whose id is bb, cc, dd ....
price2= this.value;
price1 = $(this).find(':selected').data('id')
price3 = $(this).find(':selected').data('bn')
$('#bb').val(price1);
$('#cc').val(price2);
$('#dd').val(price3);
Just a bit tricky with single and double quotes in the loop but 'Hey that's what we do!'
Use this instead. You do not want the value of the option but the text.
$('#job_title').live('change', function(){
var b = $(this).text();
$('#catch_value').val(b);
return false;
});

Tooltip echo from PHP

I'm dealing with this problem since 2 days and I haven't found a solution.
Here's the tooltip script that I'm using: http://iamceege.github.io/tooltipster/
It works fine, I'm able to show data in HTML format, no problem.
But the problem comes when I want to echo a HTML code from a function that was written by me. The output of the function isn't showed in the tooltip, but outside it.
Here's my function:
public function showProducts($uId, $wid){
$sql1 = "SELECT pids FROM wishlists WHERE uid='$uId' AND id='$wid'";
$q = mysql_query($sql1) or die(mysql_error());
while($data=mysql_fetch_array($q)){
$dbprods = $data['pids'];
$prods = explode(",", $dbprods);
for($i = 0; $i < count($prods); $i++){
$id=$prods[$i];
$q=mysql_query("SELECT * from products where id='$id'");
while($bd = mysql_fetch_array($q)){
echo ''.$bd['name'].'<br />';
}
}
}
}
If I'm typing return $bd['id'];, the tooltip is fine. The problem comes only with that HTML output. The tooltip and function call is this echo '# <a class="tooltip" title="Products <br />'.$this->showProducts($uid, $wid).'">'.$data['name'].'</a><br />';
I have also tried to modify the my function into something like
while($bd = mysql_fetch_array($q)){ ?>
<?php echo $bd['name'];?><br />
<?php }
but still no result. Does anyone helps me out?

delete sql row after echo onClick

I am making a program for a quiz show in our school programme. I have a table that contains WHO asked the question (among the teachers), WHAT is the question and another table as to what the answer to that question is. So, I have a table with THREE COLUMNS.
Now, what I was trying to do is that when the page loads, it will display a number of links labeled . I echoed each link such that when you click any of them, a random row will be taken from MySQL table and the "Question" as well as who asked that particular question will be displayed publicly.
so far, i was able to do all that just fine. But here's the problem.
I want to do it in such a way that after clicking the question, (after displaying it, to be exact,) that specific row will be DELETED from the MySQL table. I didn't want to use a timer because the time allotted for each question differs. I was wondering if there is some kind of "after click" function (or some way to do it) in javascript and AJAX. or perhaps a PHP code?
sorry for the noobish question. History teacher here. :)
by the way, here is a part of my code:
<?php
$checkrow = $db->query("SELECT * FROM questions WHERE `who` = $teachers");
while ($row = $checkrow->fetch(PDO::FETCH_ASSOC))
{
$who = $row['who'];
$question = $row['question'];
$date =$row['date_asked'];
$ask = $db->query("SELECT COUNT(*) FROM teachers WHERE science = $from AND who = $teachers");
$count = $ask->fetch(PDO::FETCH_NUM);
if($count[0] == 0) {
echo ' MYSTERY QUESTION ';
$fromwho = "From science Department.";
echo "<br>";
} else {
echo ' MYSTERY QUESTION ';
$fromwho = "From your Arts Department.";
echo "<br>";
}
}
?>
and here is my javascript.
<script language="javascript">
function readmsg(){
var qst = "<?php echo $question; ?>";
var dte = "<?php echo $date; ?>";
var frm = "<?php echo $fromwho; ?>";
document.getElementById("displaymsg1").textContent = qst;
document.getElementById("displaymsg2").textContent = dte;
document.getElementById("displaymsg3").textContent = frm;
}
</script>
1st, you have to make page delete_question.php (or method like this):
<?php
$db->query(('DELETE FROM questions WHERE ID=' . $_GET['uid']); // make it safer
echo '{result:"done"}';
?>
2nd, make delete onclick handler function with ajax sends UID to specified
function delete_question(el) {
$.ajax({
url : 'delete_question.php',
dataType : 'json',
data : {
uid : el.dataset.uid
},
success : function(response) {
// remove line?
$(el).parent().remove();
alert(response.result);
}
});
3nd: add handler to element
<a href="#" onclick="delete_question(this)" data-uid="<?php echo $row['ID'] ?>">

Categories

Resources