Javascript timer not looping along with mysql_fetch_array results - php

<? while($row = mysql_fetch_array($result))
{
$result2 = $row['end_time'];
echo"<td><div id=defaultCountdown></div></td>";
?>
<script type=text/javascript>
$(function ()
{
var t = ('<? echo $result2; ?>').split(/[- :]/);
// Apply each element to the Date function
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
$('#defaultCountdown').countdown({until: d});
$('#year').text(austDay.getFullYear());
});
</script>
<? }
?>
So basically I wanted to launch the Javascript countdown timer for each row of results generated by mysql_fetch_array. However, in the code above, the timer only works for the first row of result. How do I make the timer work for every row of result?
EDIT
<td> 2012-12-17 13:12:22</td><td> <img src = Images/1324133424.jpg height=200 width=300 /> </td><td> active</td><td><div id=defaultCountdown0></div></td>
<script type=text/javascript>
$(function ()
{
var t = ('2012-12-17 13:12:22').split(/[- :]/);
// Apply each element to the Date function
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
$('#defaultCountdown0').countdown({until: d});
$('#year').text(austDay.getFullYear());
});
</script>
<td> 2012-12-01 13:12:22</td><td> <img src = Images/1322754818.jpg height=200 width=300 /> </td><td> active</td> <td><div id=defaultCountdown1></div></td>
<script type=text/javascript>
$(function ()
{
var t = ('2012-12-01 13:12:22').split(/[- :]/);
// Apply each element to the Date function
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
$('#defaultCountdown1').countdown({until: d});
$('#year').text(austDay.getFullYear());
});
</script>

In your PHP while loop, you are setting the same ID for all divs, which is probably why only the first row works. However, as I said in my comment, you need to add the actually JavaScript that is generated by your PHP code.
echo"<td><div id=defaultCountdown></div></td>";
EDIT:
Here's what the code should look like. Run it as it is and then try making small changes to get it to do what you want:
<?
while($row = mysql_fetch_array($result))
{
$i = 0;
$result2 = $row['end_time'];
echo "<td><div id=defaultCountdown$i></div></td>";
?>
<script type=text/javascript>
$(function ()
{
var t = ('<? echo $result2; ?>').split(/[- :]/);
// Apply each element to the Date function
var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
$('#defaultCountdown<?php echo $i; ?>').countdown({until: d});
$('#year').text(austDay.getFullYear());
});
</script>
<?
$i++;
}
?>

Related

Echo PHP value inside a jquery Function

I am trying to assign a php echo value to an input generated from a jquery function. But so far no luck. It breaks the function and no results are displayed along with the input field. What is the proper way for this scenario to display php value inside the query function.
PHP
$tablename = "table";
$next_increment = 0;
//$qShowStatus = "SHOW TABLE STATUS LIKE '$tablename'";
$qShowStatusResult = $db_con->prepare("SHOW TABLE STATUS LIKE '$tablename'");
$qShowStatusResult->execute();
$results = $qShowStatusResult->fetchAll(\PDO::FETCH_ASSOC);
foreach($results as $value){
$next_increment = $value['Auto_increment'];
}
var nextAutoIncrement = '"'<?php echo $next_increment; ?>'"';
Jquery
newSection.children(':nth-child(1)').children(':first').attr('id', 'auto_id_' + newNum).attr('name', 'auto_id_' + newNum).val(nextAutoIncrement).hide();
Try this
<script language="javascript" type="text/javascript">
var nextAutoIncrement = '<?php echo $next_increment;?>';
</script>
Try like this:
<script language="javascript" type="text/javascript"
var nextAutoIncrement = <?php echo $next_increment; ?>;
</script>
<script>
//if it is anumber
var nextAutoIncrement = <?php echo $next_increment; ?>;
// if ity is a string
var nextAutoIncrement = '<?php echo $next_increment;?>';
</script>
In JS code there is require to define the <script> tag:
$tablename = "table";
$next_increment = 0;
$qShowStatusResult = $db_con->prepare("SHOW TABLE STATUS LIKE '$tablename'");
$qShowStatusResult->execute();
$results = $qShowStatusResult->fetchAll(\PDO::FETCH_ASSOC);
foreach($results as $value){
$next_increment = $value['Auto_increment'];
}
<script type="text/javascript" >
var nextAutoIncrement = '<?php echo $next_increment; ?>';
</script>

how do I loop a php variable within a javascript script

I created a form with a text field that has Spry Validation (ie javascript). The user can select the number of rows in the form from 1 to 10. I need the code below to also expand but I'm not familiar enough with javascript to make it work.
$divkey is the variable that controls how many rows are in the form.
Original
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["change"], maxChars:20});
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
so I need the line 'var sprytextfield1...' to repeat based on $divkey with the next line being 'var sprytextfield2...' and so on. Can someone please rewrite this so it will work?
Trying to use php
<script type="text/javascript">
<?php for ($i = 0; $i < $divkey; $i++) { $num=$i+1; ?>
var sprytextfield<?php echo $num;?> = new Spry.Widget.ValidationTextField("sprytextfield<?php echo $num;?>", "none", {validateOn:["change"], maxChars:20});
<?php }?>
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
Trying to use javascript
<script type="text/javascript">
var numwrestler = <?php echo $wrestlerkey; ?>;
var sprytextfield = [];
for (var i = 0; i < numwrestler; i++) {
var num = i+1;
var sprytextfield[num] = new Spry.Widget.ValidationTextField("sprytextfield"+num, "none", {validateOn:["change"], maxChars:20});
}
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
I'd recommend that you use a Javascript array for this type of task.
Your code is mostly correct, but the var in your for loop is incorrect, and the creation of the num variable instead of just using i is redundant.
<script type="text/javascript">
var sprytextfield = new Array();
var numwrestler = <?php echo $wrestlerkey; ?>;
for(var i = 0; i < numwrestler; i++){
sprytextfield[i] = new Spry.Widget.ValidationTextField("sprytextfield"+(i+1), "none", {validateOn:["change"], maxChars:20});
}
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
Be sure that your PHP variable(s) are defined in the file before you include them in your script.
In your PHP code, you never define the variable divkey, by deafault the value will be 0.
Try:
<script type="text/javascript">
<?php $divkey = 10; for ($i = 0; $i < $divkey; $i++) { $num=$i+1; ?>
var sprytextfield<?php echo $num;?> = new Spry.Widget.ValidationTextField("sprytextfield<?php echo $num;?>", "none", {validateOn:["change"], maxChars:20});
<?php }?>
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
Please, note that the variable that you are using as index $num in every iteration of the loop will be increasing 2, because of the i++ and the $num=$i+1

PHP with javascript code, live clock

Hey I would to create a live clock to put it on my website. So I wrote a simple php with JavaScript code for that, here is it:
<?php
Function d1() {
$time1 = Time();
$date1 = date("h:i:s A",$time1);
echo $date1;
}
?>
<script type="text/javascript">
window.onload = startInterval;
function startInterval() {
setInterval("startTime();",1000);
}
function startTime() {
document.getElementById('qwe').innerHTML = '<?php d1();?>';
}
</script>
<div id="qwe">test</div>
When run this code the output like "2:40:17 PM", the div refreshed every second but the problem is the time never changed.
Get the initial time you want to start your clock with from PHP:
<script>
var now = new Date(<?php echo time() * 1000 ?>);
function startInterval(){
setInterval('updateTime();', 1000);
}
startInterval();//start it right away
function updateTime(){
var nowMS = now.getTime();
nowMS += 1000;
now.setTime(nowMS);
var clock = document.getElementById('qwe');
if(clock){
clock.innerHTML = now.toTimeString();//adjust to suit
}
}
</script>
For formatting the date there's a zillion options (MDN Date API: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date)
<script type="text/javascript">
function timedMsg()
{
var t=setInterval("change_time();",1000);
}
function change_time()
{
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();
if(curr_hour > 12)
curr_hour = curr_hour - 12;
document.getElementById('Hour').innerHTML =curr_hour+':';
document.getElementById('Minut').innerHTML=curr_min+':';
document.getElementById('Second').innerHTML=curr_sec;
}
timedMsg();
</script>
<table>
<tr>
<td>Current time is :</td>
<td id="Hour" style="color:green;font-size:large;"></td>
<td id="Minut" style="color:green;font-size:x-large;"></td>
<td id="Second" style="color:red;font-size:xx-large;"></td>
<tr>
</table>
use this way to display time........
enjoy the above script
You can use ajax to refresh the time:
Example:
<?php
if(#$_GET["action"]=="getTime"){
$time1 = Time();
$date1 = date("h:i:s A",$time1);
echo $date1; // time output for ajax request
die();
}
?>
<div id="qwe">test</div>
<script type="text/javascript">
window.onload = startInterval;
function startInterval() {
setInterval("startTime();",1000);
}
function startTime() {
AX = new ajaxObject("?action=getTime", showTime)
AX.update(); // start Ajax Request
}
// CallBack
function showTime( data ){
document.getElementById('qwe').innerHTML = data;
}
</script>
<script type="text/javascript">
// Ajax Object - Constructor
function ajaxObject(url, callbackFunction) {
var that=this;
this.updating = false;
this.abort = function() {
if (that.updating) {
that.updating=false;
that.AJAX.abort();
that.AJAX=null;
}
};
this.update =
function(passData,postMethod) {
if (that.updating) { return false; }
that.AJAX = null;
if (window.XMLHttpRequest) {
that.AJAX=new XMLHttpRequest();
}else{
that.AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (that.AJAX==null) {
return false;
}else{
that.AJAX.onreadystatechange = function() {
if (that.AJAX.readyState==4) {
that.updating=false;
that.callback( that.AJAX.responseText, that.AJAX.status, that.AJAX.responseXML, that.AJAX.getAllResponseHeaders() );
that.AJAX=null;
}
};
that.updating = new Date();
if (/post/i.test(postMethod)) {
var uri=urlCall+(/\?/i.test(urlCall)?'&':'?')+'timestamp='+that.updating.getTime();
that.AJAX.open("POST", uri, true);
that.AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
that.AJAX.setRequestHeader("Content-Length", passData.length);
that.AJAX.send(passData);
}else{
var uri=urlCall+(/\?/i.test(urlCall)?'&':'?')+passData+'&timestamp='+(that.updating.getTime());
that.AJAX.open("GET", uri, true);
that.AJAX.send(null);
}
return true;
}
};
var urlCall = url;
this.callback = callbackFunction || function (){};
}
</script>

Javascript - How to add a pause button in carousel?

I have found this script in Magento which is rotating images from a certain directory. This is working fine. But I need to add a "pause" button after the "1-6". I am not an expert on javascript so not sure how to do this. Can someone please help me with this?
The code:
<?php
$speed = 5000;//miliseconds
?>
<script type="text/javascript">
var timeoutID;
homeTileCount = 1;
$$('.home-tile-container img').each(function(e){
$(e).writeAttribute('id','home-tile-' + homeTileCount);
$(e).addClassName('home-tile');
homeTileCount++;
});
homeTileCount--;
var homeTileRemote = $$('.home-tile-remote')[0];
for (i=homeTileCount;i>=1;i--)
homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow">'+i+'</div>');
function switchTile(n)
{
//console.log(n);
clearTimeout(timeoutID);
$$('.home-tile-container img').each(function(e){
e.removeClassName('home-tile-active');
});
$$('.home-tile-remote > div').each(function(e){
e.removeClassName('home-tile-remote-active');
});
$('home-tile-remote-'+n).addClassName('home-tile-remote-active');
$('home-tile-'+n).addClassName('home-tile-active');
next = n+1;
if (next > homeTileCount)
next = 1;
timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>);
}
switchTile(1);
setTimeout('switchTile(2)', <?=$speed?>);
</script>
And this is how the carousel looks:
Maybe this:
<?php
$speed = 5000;//miliseconds
?>
<script type="text/javascript">
var paused=false;
var timeoutID;
homeTileCount = 1;
$$('.home-tile-container img').each(function(e){
$(e).writeAttribute('id','home-tile-' + homeTileCount);
$(e).addClassName('home-tile');
homeTileCount++;
});
homeTileCount--;
var homeTileRemote = $$('.home-tile-remote')[0];
for (i=homeTileCount;i>=1;i--)
homeTileRemote.insert('<div id="home-tile-remote-'+i+'" class="overflow">'+i+'</div>');
function switchTile(n)
{
if (!paused) {
//console.log(n);
clearTimeout(timeoutID);
$$('.home-tile-container img').each(function(e){
e.removeClassName('home-tile-active');
});
$$('.home-tile-remote > div').each(function(e){
e.removeClassName('home-tile-remote-active');
});
$('home-tile-remote-'+n).addClassName('home-tile-remote-active');
$('home-tile-'+n).addClassName('home-tile-active');
next = n+1;
if (next > homeTileCount)
next = 1;
timeoutID = setTimeout('switchTile('+next+')', <?=$speed?>);
}
}
switchTile(1);
setTimeout('switchTile(2)', <?=$speed?>);
</script>
<button type="button" onclick="paused=true;">Pause</button>

how to make countdown timer for bidding website

I have to create a countdown timer for a bidding website. The timer works properly when I put it outside of the while loop. However, id does not work inside the loop. What am I doing wrong? Here is my code:
<script>
var before=""
var current="ended"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
function countdown(yr,m,d,id){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==0){
document.getElementById(id).value=current
return
}
else
document.getElementById(id).value="Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left "+before
setTimeout("countdown(theyear,themonth,theday,id)",1000)
}
</script>
<?php
include('../connection.php');
$rs = mysql_query("select * from datepic") or die(mysql_error());
if(mysql_num_rows($rs)){
while($row = mysql_fetch_array($rs))
{
$date = str_replace('-',',',$row['date']);
echo '<input type="text" id="'.$row['id'].'" size=80>';
?>
<script>
countdown(<?php echo $date.','.$row['id'];?>)
</script>
<?php
}
}
?>
change setTimeout with this:
setTimeout(function(){countdown(theyear,themonth,theday,id);},1000)
you can make your function to jQuery function like that:
jQuery.fn.countdown = function(yr,m,d){
$that = $(this);
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0 && dhour==0 && dmin==0 && dsec==0){
$that.val(current);
return
}
else
$that.val("Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left "+before);
setTimeout(function(){ $that.countdown(theyear,themonth,theday);},1000)
}
<?php
include('../connection.php');
$rs = mysql_query("select * from datepic") or die(mysql_error());
if(mysql_num_rows($rs)){
while($row = mysql_fetch_array($rs))
{
$date = str_replace('-',',',$row['date']);
echo '<input type="text" id="'.$row['id'].'" size=80>';
?>
<script>
$("?php echo $row['id'] ?>").countdown(<?php echo $date?>);
</script>
<?php
}
}
?>

Categories