Javascript does not show data obtained from PHP and SQL Server - javascript

I'm new to PHP and I have little knowledge of Javascript, I'm trying to create a chronometer that the time limit is obtained from a database (SQL SERVER), so when you get the value in PHP and assign it to a variable of Javascript function, I get a -1.
From what I read it appears to me that the PHP object type is not the same as in Javascript and this can be solved with json_encode (), however it keeps appearing -1.
<?php
require('db.php');
if ($connection)
{
$TimEva = 60;
$rs = odbc_exec($connection,"SELECT time FROM DBO.tablaCrono cr WHERE cr.id = '$EncIdx';");
while(odbc_fetch_row($rs))
{
$TimEva=odbc_result($rs,"TimEva");
}
echo "<div align='center'><h1><label id = 'tiempo'>".$TimEva."</label></h1></div>";
$rs = odbc_close($connection);
}
else
{
echo "<div align='center'>no se pudo conectar</div><br />";
}
?>
And in the Javascript function I have the following
var label = document.getElementById("tiempo"),
minutos = <?php echo json_encode($TimEva,JSON_HEX_TAG);?>,
I expect 60, which is the value in the database, it shows up well in html, but the value of the variable minutes, throws -1
I could be guided, help, use AJAX, I'm really a bit lost.

$rs = odbc_exec($connection,"SELECT `time` FROM DBO.tablaCrono cr WHERE cr.id = '$EncIdx';");
Change your query to this. time is a word used from the language so if you want to use it as a column you need to escape it.
Also modify your JS code to something like :
<script>
var label = document.getElementById("tiempo")
var minutos = <?php echo json_encode($TimEva,JSON_HEX_TAG);?>
console.log(minutes)
</script>
Then open your console window and see what is the value that your variable has.
Lastly ensure that you actually have a value in $EncIdx variable cause we don't see how you assign a value to it. I guess it's in a part of the code you did not share.

<script>
function tiempo()
{
var label = document.getElementById("tiempo"),
minutos = <?php echo json_encode($TimEva,JSON_NUMERIC_CHECK);?>,
segundos = 0,
intervalo = setInterval(function(){
console.log(minutos)
if (--segundos < 0){
segundos = 59;
minutos--;
}
if (!minutos && !segundos)
{
clearInterval(intervalo);
alert("Lo sentimos se termino el tiempo");
//document.evaluacion.submit();
}
label.innerHTML = minutos + ":" + (segundos < 10 ? "0" + segundos : segundos);
}, 1000);
}
</script>

Related

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 parse a PHP variable using a dynamic JS variable?

I have 5 PHP variables, $menu1 to $menu5, that each evaluate to a keyword. I'm trying to populate these 5 PHP variables in JavaScript, and display them. The below code doesn't work. What is wrong with my processing of the PHP variables?
var menu_populator = "";
for (var x = 1; x <= count; x++) {
menu_populator += '<li><a class="myclass" href="#link">' + '<?php echo $menu' + x + '?>' + '</a></li>';
}
$('#nav_menu').html(menu_populator);
Depending on how you are getting the menu data server-side you can try both methods below. One is for set $menu variables but if you are getting data from a database or the $menu variable are created within a loop you might find the second method better.
Method one- PasteBin
Echo your php variables into a javascript array.
var myarray=["<?php echo $menu1;?>","<?php echo $menu2;?>","<?php echo $menu3;?>","<?php echo $menu4;?>","<?php echo $menu5;?>"];
Method Two- PasteBin
Create this array server-side, this will be better if you are creating the current $menu variable in a loop, with this you can just use array_push() to push the values into the array.
<?php
// PHP Array
$menu = array('Home', 'Gallery', 'About');
// How to push new item into array
array_push($menu, 'Contact');
?>
Then just simply echo this array into your javascript myarray variable.
var myarray=<?php echo json_encode($menu);?>;
I have used the following javascript to test both methods and both seem to function just fine. I prefer the second method but I have decided to offer both as I don't know what your PHP looks like or how your $menu variables are being defined so this should cover both.
window.onload=function(){
for(var i=0; i<myarray.length; i++){
var link= document.createElement('a');
link.href="#";
link.innerHTML=myarray[i];
document.body.appendChild(link);
document.body.appendChild(document.createElement('br'));
}
}
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this help. Happy coding!
Something like this would do the trick
<?php
$menu = "menu";
echo '
<script>
var count = 10;
var menu_populator="";
for(var x=1;x<=count;x++)
{
menu_populator += \'<li><a class="myclass" href="#link">'.$menu.' \'+x+\'</a></li>\';
}
$(\'#nav_menu\').html(menu_populator);
</script>
';
?>

Issue with PHP and Javascript when building auto suggest text box

I'm trying to build a simple auto suggest input bar that connects to a MySql database and retrieves data. The issue that I'm running into is that when I type in the name of an object that I know exists in the databse, the text bar doesn't return any results, instead it just provides me with an empty dropdown box.
The best I can tell, the issue has to do with the javascript that is used within the PHP portion of the code. Unfortunately, I can't seem to figure out why it's causing an issue.
<?php
mysql_connect("host", "user", "passsword") OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db('DBName');
$query = 'SELECT Device_type FROM Device';
$result = mysql_query($query);
$counter = 0;
echo"<script type='text/javascript'>";
echo"this.nameArray = new Array()";
if($result) {
while($row = mysql_fetch_array($result)) {
echo("this.nameArray" .$row ['Device_type'] . "';");
$counter += 1;
}
}
echo("</script>");
?>
When I take out the echo"<script type='text/javascript'>"; and echo"this.nameArray = new Array()"; then It displays the Device_type content on the top of the page when the page is loaded. This obviously isn't what I want, but it does prove that the database connection is at least set up correctly. Since this chunk of PHP is referring to some javascript, I will also prove the function in which it's referring to.
function doSuggestions(text) {
var input = text;
//window.alert(text);
var inputLength = input.toString().length;
var code = "";
var counter = 0;
while(counter < this.nameArray.length) {
var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
code += "<div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'>" + x + "</div>";
}
counter += 1;
}
if(code == "") {
outClick();
}
document.getElementById('divSuggestions').innerHTML = code;
document.getElementById('divSuggestions').style.overflow='auto';
}
Any suggestions as to why the suggestion box isn't providing suggestions when I start typing? If I type A into the text box, the suggestion box should appear showing me all items in the database that start with A.
there are some errors in your js strings
`echo"var nameArray = new Array()";`
`echo("nameArray.push('" .$row ['Device_type'] . "');");`
that way you'll push device types into the nameArray var.

Ajax - Issue - Sending JavaScript Var to PHP script

I have not been able to find a simple example of ajax with single variable, everything on here is made way too complicated for an AJAX beginner. I've watched about 4 different YouTube videos on the topic, but can't seem to get it right.
I have the src of an image in a variable like so with a JavaScript..
<img alt="" src="blah.jpg" style="height: 276px; width: 200px" id="imgClickAndChange1" onclick="changeImage(this)" />
<script language="javascript">
function changeImage(imagePass) {
var num = Math.floor((Math.random() * 48) + 1);
var n = num.toString();
var numImg = n.concat(".jpeg");
var string = "/Images/Folder/"
var final = string.concat(numImg);
imagePass.src = final;
//(this is where I want to pass the variable imagePass.src or "final" to a php script w/ Ajax)
Here is my php script:
<?php>
include_once "code.php"; //connecting to database
$s = (this is where I want the variable to be posted);
$temp = explode('/', $s);
$temp2 = explode('.', $temp[count($temp) - 1]); //this is getting the variable I want from the variable sent(which is actually a number)
$float = (int)$temp2; //changing the number (which is a string) to an int
mysql_query("UPDATE Variable SET `upVote` = `upVote`+1 WHERE id= (variable here)) " //Making a row in my database w/ the id of the variable add 1 to the count
?>
How would I go about posting and sending this w/out a page refresh? AJAX is really confusing me so a working implementation to get me started on this would be great, Thanks a lot.
//Let's just assume the php page where the script is located is called 'hello.php'
To use ajax, try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function changeImage(imagePass) {
var num = Math.floor((Math.random() * 48) + 1);
var n = num.toString();
var numImg = n.concat(".jpeg");
var string = "/Images/Folder/"
var final = string.concat(numImg);
imagePass.src = final;
$.ajax({
url : 'hello.php',
type: 'post',
data : {'final':final},
success: function()
{
alert('Success!');
}
});
}
</script>
PHP script (hello.php):
<?php>
include_once "code.php"; //connecting to database
$s = $_POST['final'];
$temp = explode('/', $s);
$temp2 = explode('.', $temp[count($temp) - 1]); //this is getting the variable I want from the variable sent(which is actually a number)
$float = (int)$temp2; //changing the number (which is a string) to an int
mysql_query("UPDATE Variable SET `upVote` = `upVote`+1 WHERE id= (variable here)) " //Making a row in my database w/ the id of the variable add 1 to the count
?>

issues with ajax and javascript when trying to count marks

I am having an issue with my javascript. I am trying to count marks for each correct chosen answer which is determined from db. If incorrect answer then marks is '0', else mark is dependent on answer's mark in db.
But I am having issues with the javascript:
First of all where it says connect.php, this just simply navigates to page where it connects to db, but is this correct or am I suppose to link to page where it will run query looking up answer's marks?
Second it says I have undefined response in my code and I do not what this should be called.
My question is can I have clarification for the above 2. I am trying to use ajax and javascript and will appreciate if a strong programmer can tackle this issue I am having and be able to correctly set up the code so that it is able to count each correct answer marks.
I have a jsfiddle which I am trying to follow but if somebody can edit fiddle to have a dummy version working for counting marks and then be able to provide code snippet stating what the proper code should be, then this will help me very much.
At moment the jsfiddle determines if answers selected are correct or incorrect and fiddle is here: http://jsfiddle.net/bWthd/3/
Actual code:
PHP/HTML:
$qandaquery = "SELECT q.QuestionId, Answer, AnswerMarks, OptionType
FROM Question q
INNER JOIN Answer an ON q.QuestionId = an.QuestionId
INNER JOIN Option_Table o ON q.OptionId = o.OptionId
WHERE SessionId = ?
GROUP BY q.QuestionId
ORDER BY RAND()";
...
$qandaqrystmt->bind_result($qandaQuestionId,$qandaAnswer,$qandaAnswerMarks,$OptionType);
$arrQuestionId = array();
while ($qandaqrystmt->fetch()) {
$arrQuestionId[ $qandaQuestionId ] = $qandaQuestionId;
}
foreach ($arrQuestionId as $key=>$question) {
?>
<div class="queWrap" data-q_id="<?php echo $key; ?>">
$options = explode('-', $arrOptionType[$key]);
if(count($options) > 1) {
$start = array_shift($options);
$end = array_shift($options);
do {
$options[] = $start;
}while(++$start <= $end);
}
else{
$options = explode(' or ', $option);
}
if($arrReplyType[$key] == 'Single'){
foreach($options as $indivOption) {
echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="radio"
name="options_<?php echo $key; ?>[]" id="option-' . $indivOption . '" value="' .
$indivOption . '" /><span>' . $indivOption . '</span></label></div>';
}
}else if($arrReplyType[$key] == 'Multiple'){
foreach($options as $indivOption) {
echo '<div class="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options_<?php echo $key; ?>[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
}
}
<p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>
}
JAVASCRIPT/AJAX:
$(function() {
$('.queWrap .ck-button').change(function() {
var $ch_box = $(this),
$qwrap=$ch_box.closest('.queWrap')
q_id = $qwrap.data('q_id'),
val = $ch_box.val();
var dataToServer = {
q_id: q_id,
valueSelected: val
}
$.post('connect.php', dataToServer,function(){
var status=response.status
$qwrap.find('.status').text( status).addClass(status);
if( status=='correct'){
updateScore( response.points)
}
})
})
function updateScore( newScore){
var score= $points.data('score')+newScore;
$points.data('score',score).text( 'Score: '+score)
}
});
UPDATE:
Current code:
function update() {
var score = 0;
$('.queWrap').each(function(element) {
var $qwrap = $(element),
q_id = $qwrap.data('q_id'),
val = $qwrap.find('input:checked').val();
var dataToServer = {
q_id: q_id,
valueSelected: val
}
$.post('connect.php', dataToServer,function(response){
var status = response.status
$qwrap.find('.status').text(status).addClass(status);
if (status == 'correct'){
score += response.points;
$points.data('score', score).text('Score: ' + score);
}
})
});
}
...
//HTML
<div class="status"> </div>
Ok there is no errors but there is no marks appearing and calculating. Is it because of the connect.php I included in the javascript function. Do I need to navigate to page which connects to db connect.php or navigate to a page where it runs a query on finding answer marks for each selected answer? I am running out of time so can you please implement the code for me asap because I have to get this finished. I want the following to happen:
Count marks for each answer selected, if incorrect answer selected then value is 0 for those answers, if correct answer then it's marks are determined from database. Howcan I get each correct answer button to contain it's own answerId?
To determine answerId we can use the questionId displayed in text input (See PHP/HTML code snippet at top) and then depending on values of each answer button, retrieve the answerid matching the answer values for each question.
Below is example database showing Answer Table
AnswerId (auto PK) QuestionId Answer AnswerMarks
1 72 A 2
2 72 C 1
3 73 B 2
4 73 C 2
5 73 E 1
Your updateScore function works wrong. You should store the points for each question in a data element, and in the updateScore() function you should add all these up, and put the sum into the $points element. Something like this:
$(function() {
$('.queWrap .ck-button').change(function() {
update();
});
function update() {
var score = 0;
$('.queWrap').each(function(element) {
var $qwrap = $(element);
var q_id = $qwrap.data('q_id');
var val = $qwrap.find('input:checked').val();
var dataToServer = {
q_id: q_id,
valueSelected: val
};
$.post('connect.php', dataToServer, function(response){
var status = response.status
$qwrap.find('.status').text(status).addClass(status);
if(status == 'correct'){
score += response.points;
$points.data('score', score).text('Score: ' + score);
}
});
});
}
}
And this function should be invoked on every change of the answers. (I am not sure this works just an example).

Categories

Resources