Countdown JS+PHP, what's wrong? - javascript

I'm trying to make this function work but i don't know what's wrong and i'm not really good at js.
I want to do call my timer function with number of seconds to countdown from the span id "count".
Example:
<p id="hello">Wait <span id="count">5</span> secs</p>
<?php
echo '<script type="text/javascript">'
, 'timer(5);'
, '</script>';
?>
<script>
function timer(tiempo){
setInterval(function() {
tiempo--;
if (tiempo >= 0) {
span = document.getElementById("count");
span.innerHTML = tiempo;
}
// Display 'counter' wherever you want to display it.
if (tiempo === 0) {
window.location.reload();
clearInterval(tiempo);
}
}, 1000);
});
</script>
What's wrong?

Define the function before it's called:
<script type='text/javascript'>
function timer(tiempo){
setInterval(function() {
tiempo--;
if (tiempo >= 0) {
span = document.getElementById("count");
span.innerHTML = tiempo;
}
// Display 'counter' wherever you want to display it.
if (tiempo === 0) {
window.location.reload();
clearInterval(tiempo);
}
}, 1000);
}
</script>
<p id="hello">Wait <span id="count">5</span> secs</p>
<?php
echo '<script type="text/javascript">'
, 'timer(5);'
, '</script>';
?>

The problem here has nothing to do with the PHP.
In JavaScript in an HTML document:
Function declarations are hoisted
All scripts share the same working environment
However:
Functions are not hoisted from a later script to an earlier script
You are running a script that tries to run the timer function.
Then you are running a script that defines that function.
It doesn't exist in time.
Either:
Swap the order of the <script> elements or
Remove the first </script> tag and the second <script> tag

Check the demo.
HTML
<p id="hello">Wait <span id="count">5</span> secs</p>
<input type="button" value="start" id="start" />
Jquery and JS
$('#start').click(function(){
showTimer(5);
});
function showTimer(tiempo){
setInterval(function() {
tiempo--;
if (tiempo >= 0) {
span = document.getElementById("count");
span.innerHTML = tiempo+'.....';
}
// Display 'counter' wherever you want to display it.
if (tiempo === 0) {
// window.location.reload();
clearInterval(tiempo);
alert('movie starts......');
}
}, 1000);
}
DEMO
http://jsfiddle.net/nadeemmnn2007/jeps93gy/

Related

how to set value to field populated by php in Javascript

I'm using PHP to populate some anchor tags with data from the database. but after some time I want to change its value with Javascript. but the Javascript value don't change PHP value. any idea? how to achieve this with Javascript?
I don't want to make changes in the database. only change value of the field.
var distance = 0;
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
<?php
$invoice = find_by_id($_GET['job'], 'job_id', 'job_post_payments');
$address = $invoice['address'];
?>
<p id="valueName"><?php echo $address; ?></p>
// javascript code is below this ^^^
No Issue see fiddle -> http://main.xfiddle.com/bf1876ac/works.php
var distance = 0;
window.onload = function() {
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
if (distance > 0) {
document.getElementById("testValue").innerHTML = 'Changed by Javascript';
}
}
<div>
<p id="valueName">
<?php echo $address; ?>
</p>
</div>
<div>
<p id="testValue">
<?php echo $address; ?>
</p>
</div>
You need understand, php it's backend technology, and javascript it's frontend technology.
if you use javascript, you need wait while browser will render this HTML part. Browser must create a DOM tree. And only then you can manipulate with this DOM tree by javascript.
So this is example:
var distance = 0;
// wait while browser will create DOM tree
window.onload = function() {
if (distance <= 0) {
document.getElementById("valueName").innerHTML = 'Changed by Javascript';
}
}
<p id="valueName">Random Street</p>

Want to Click on a Website Button Programatically

I want to Click on a Website button that are already going on.
For example:
like url: www.google.com..
I want to Click Google Search button programmatically by using any method in PHP, Javascript, Jquery and Ajax.
if Anyone know Solution. Please tell my and provide the source code.
Note: We dn't need to create own button we want to click on a website button by using class and id.
I want to try this..look like this but not success..I want to click Learn HTML button that are show on iframe...in w3school website..
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<iframe src="http://www.w3schools.com" width="800" height="400"></iframe>
<script>
//setInterval(function () {$("#hand_1151079882").click();}, 3000);
function clime(){
setInterval(function () {document.getElementById("#w3-btn").click();}, 3000);
alert();
}
//using javascript
$(document).ready(function () {
$(".cli").on('click', function(event){
$("#w3-btn").trigger('click');
});
});
</script>
<input type="button" class="cli" name="clime" value="submit" onclick="clime()">
you need set id for iframe
var iframe = document.getElementById('w3schools-home');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
innerDoc.getElementsByClassName('w3-btn')[0].click();
[0] is for button Learn HTML, there 19 element have class w3-btn
Tested and Work on w3schools Try it Yourself ยป
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
as Requested, here example PHP for get Element and Recreated to your own sites.
<?php
$url='http://www.w3schools.com/css/default.asp'; // or use $_GET['url']
$scheme=parse_url($url)['scheme'];
$host=parse_url($url)['host'];
$domain=$scheme.'://'.$host;
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_HEADER, 0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_TIMEOUT,30);
curl_setopt($ch,CURLOPT_POST, 0);
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML(substr(curl_exec($ch), curl_getinfo($ch, CURLINFO_HEADER_SIZE)));
$xpath = new DOMXpath($dom);
$aElement = $xpath->query('//a');
$length = $aElement->length;
$links=array();
for ($i = 0; $i < $length; $i++) {
$element = $aElement->item($i);
if ($element->tagName=='a' && trim($element->textContent)<>'') {
foreach ($element->attributes as $attr) {
$attrName = $attr->nodeName;
$attrVal = $attr->nodeValue;
if($attrName=='href' && str_replace(';','',$attrVal)<>'javascript:void(0)'){
if(substr($attrVal, 0, 1)=='/'){
$links[trim($element->textContent)]=$domain.$attrVal;
}else if(substr($attrVal, 0, 4)=='http'){
$links[trim($element->textContent)]=$attrVal;
}
}
}
}
}
foreach ($links as $key=>$value) {
echo ''.$key.' | ';
}
You can create a javascript function to get URL from iframe and than request AJAX to PHP that have script ABOVE, you can use echo(but need foreach as example from my script) or json_encode to array $links, then reCREATED button from other url/website to your sites.
or just echo to your sites.
My script still need improvement to handle value of attribut href that use '../' or 'foldername/'
just reminder, for get access ELEMENTS on iframe that pointing to different domain is impossible.
You seem to be missing the element with the id w3-btn which gets clicked programmatically.
Also, it seems both of these are doing the same thing ...
function clime(){
setInterval(function () {document.getElementById("#w3-btn").click();}, 3000);
alert();
}
and
$(document).ready(function () {
$(".cli").on('click', function(event){
$("#w3-btn").trigger('click');
});
});
both are trying to click an element with id w3-btn, just in different ways. You only need one of them.
This might help:
<script>
jQuery(function(){
jQuery('#modal').click();
});
</script>
I got this answer from here.

Counter in Javascript closure not incrementing

I am writing some JavaScript code, where I am using a closure for a counter. The code is given below:
function userHandler(){
var counter = 0;
var limit = "<?php echo ($_SESSION['limit']); ?>";
return function(){
var args = {
n : $('#name').val(),
s : $('#ssn').val(),
i : $('#id').val()
};
$.post("adduser.php",args,function(data){
var response = JSON.parse(data);
console.log(args);
if(response.status == 0){
counter += 1;
alert(counter);
if (counter == limit){
$('#limit').text(limit-counter);
}
}
console.log(data);
});
};
}
var opcall = userHandler();
$('#addUser').on("click", opcall);
I am using this guide to write the code. The problem is, my counter always shows 1 in the alert box. It does not increment. Am I not calling the inner method correctly?
EDIT: There's a span in the HTML which is receiving the limit-counter value:
<p>
<span>Add User</span>
You can add <span id="limit"></span> more users. <a href='<?php echo $root; ?>editaccount.php?action=addOp'>Add another operator?</a>
</p>
It always shows (20-1)=19 every time I submit the form which uses the Javascript.
UPDATE: Thank you for pointing out my mistake, after clicking the "addUser" button, another page was opening with a confirmation message, where a link had to be clicked to return to the original page. I moved the confirmation message to the original page and now it works fine!!

SetInterval is not working in javascript after sometime when its called a function for a perticular time interval

This is my html code, onclick event calling the:
<input type="button" id="btn" value="Submit" onclick="click_function()"/>
<div id="display"></div>
Upon clicking of button, the below script loads the data by calling the function for every one minute if the data came from the server the setinterval will stops calling the function, until the data is created in the server the function will call the check() function if the data is present then it will display the data.
<script>
function click_function() {
var ajax_load = "<img id='loading' src='loader.gif' alt='loading...' />";
$("#display").html(ajax_load);
check_interval();
function check_interval() {
var set_inter = setInterval(function(){
check();
}, 60000);
function check(){
if($("#display").val=="") {
$("#display").html(ajax_load);
} else {
$("#display").html(ajax_load).load("get_test.php",{},function(){});
clearInterval(set_inter);
}
}
</script>
But when I run the script for every 1 minute the function will refresh the other function, the setinterval is not working and stopping the whole script after the second minute.
I got an error message:
Something went wrong while displaying the webpage,To continue,reload or go to another page.
rewrite your code like this:
var set_inter = null;
function click_function(){
var ajax_load = "<img id='loading' src='loader.gif' alt='loading...' />";
$("#display").html(ajax_load);
check_interval();
}
function check_interval(){
set_inter = setInterval(function(){
check();
}, 60000);
}
function check(){
if($("#display").val==""){
$("#display").html(ajax_load);
}else{
$("#display").html(ajax_load).load("get_test.php",{},function(){});
clearInterval(set_inter);
}
}
It was a problem with scopes at first and you need to make variable set_inter global to use in other function.

Use existing javascript to trigger if else in php

I have the following script within a page on my site which adds + - buttons to a qty entry field:
<script language="javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
var $cartAdd = jQuery('#cartAdd')
, $quantity = $cartAdd.find('input');
$cartAdd.append('<div class="inc button">+</div><div class="dec button">-</div>');
jQuery(".back").change(function(){
$quantity.val(1).change();
});
$cartAdd.click(function(evt) {
var $incrementor = jQuery(evt.target)
, quantity = parseInt($quantity.val(), 10);
if($incrementor.hasClass('inc')) {
quantity += 1;
} else if($incrementor.hasClass('dec')) {
quantity += -1;
}
if(quantity > 0) {
$quantity.val(quantity);
xhr.getPrice();
}
jQuery(".back").change(function(){
xhr.getPrice();
});
});
});
</script>
I want to be able to hide/unhide a div when var $cartAdd goes above 1
I tried using something like
var $cartAdd = jQuery('#cartAdd')
, $quantity = $cartAdd.find('input');
<?php $trigger = "<script>document.write(quantity)</script>"?>
followed by
<?php echo $trigger;?>
and i expected that to echo the value in the entry box but it didn't.
Is it achievable?
You must understand that all php scripts are executed BEFORE the javascript.
What's wrong with simply grabbing the quantity and hiding if needed?
if( $('#cartAdd').find('input').val() > 1 )
{ $('#div_we_want_to_hide').hide() }
just put that inside a document.ready and it should work fine

Categories