I would like create an event where users can post some content every 10 minutes.
So, the submit button must be allow during 1 minute for that. Moreover, users can check a countdown during the unallow period.
Is it possible with JavaScript/jQuery or PHP?
Yeah, when the page loads you can start with the submit button disabled by default in the html markup.
then use a coundown timer, here is a jquery one that I have used before
http://keith-wood.name/countdown.html
Click on the callbacks tab in the link provided for code examples, inside your callback/trigger function you will add the following javascript or something similar.
$('#submitButtonId').attr('disabled', 'false);
Try this:
In your php post method set the next time in a session var:
<?php
//intser post code
$_SESSION['next_post'] = time() + (10 * 60);
Then in your template print this js:
<script>
var nextPostTime = <?=$_SESSION['next_post']?>;
setInterval(function(){
if((new Date()).getTime() > nextPostTime ){
$('#newpostID').show(); // this is the element id of the form
setTimeout(function(){
$('#newpostID').hide();
nextPostTime = (new Date()).setMinutes((new Date()).getMinutes + 1)
}
,60000);
}
}, 1000);
Related
I am stuck again with a problem, let me explain it to you.
Inside the div I have fetched data with HTML SIMPLE DOM from other site. Like
<div id="data">.....</div>
It will refresh each and every time user will refresh the page. But I want something extra. What I wanna do is, refresh the div (inside which external data is fetched and added) periodically after 5 seconds.
Both the PHP SIMPLE HTML DOM script and this div is on same page.
Now I only need, any jquery or javascript code to refresh the div with data id after each 5 seconds with new data fron other site and all this without refreshing the whole page.
UPDATE:
I have used this code
$(document).ready( function() {
function getTheTime(){
$.get('http://your-domain/file.php',function(data,status){
$('#data').html(data);
});
}
var refresh = setInterval(
"getTheTime()",
5000
);
});
But the problem is very very strange, why it is not refreshing the div? Infact I have set alert for the interval but it also didn't worked. What the real problem is? Why it is not getting data from file.php and why actually it is not refreshing the div??
I am using latest jquery CDN. http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
$(function() {
setInterval(function(){
$('#data').load('site.php');
}, 5000);
});
Definitely a job for AJAX...
Since you say you're already using jQuery, I'll walk you through the steps quickly to get an AJAX function set up and run it on an interval.
Step 1: Create a PHP file which gets the data you want to put in the DIV...
Just make a PHP file and put the code in to get the data:
<?php echo "The time is " . date('Y-m-d H:i:s');
Step 2: Set up an AJAX function to get the data from that file...
function getTheTime(){
$.get('http://yourdomain.com/ajax/getthetime.php',function(data,status){
$('#data').text(data);
});
}
(It would be possible to use the .load function instead, but it's far less flexible if you want to do anything with the data before putting it in the DIV).
Step 3: Call that function on an interval...
Next, we need to set up an interval to call the new function every 5 seconds.
$(function(){
var refresh = setInterval(
getTheTime(),
5000
);
});
Instead of using setInterval to call the function every 5 seconds, you can use simple long polling technique to refresh your div every 5 seconds. The problem with setInterval is that if the ajax request doesn't complete in specified time (5 secs here) there will be the chain of ajax requests.
function getTheTime(){
$.ajax({
type: "POST",
url: "http://your-domain/file.php",
success: function(response) {
$('#data').html(response); //update your div
},
complete: function(){
setTimeout(
getTheTime, /* Refresh time */
5000 /* ..after 5 seconds */
);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//display you error message
},
timeout: 5000 //Timeout is necessary to prevent chaining of unsuccessful ajax request
});
}
I would like one DIV on my page to automatically refresh after 10 minutes. I don't want to reload the entire page, just the one part.
This is the PHP that I am using:
function fblikes() {
$pageID = $_GET['id'];
$pagename = json_decode(file_get_contents('http://graph.facebook.com/' . $pageID));
echo $pagelikes->likes;
}
And this is what I want to be refreshed automatically:
<div>
<span><?php fblikes(); ?></span>
</div>
Can somebody help me with this please?
Quoting myself:
You cannot 'reload a div'. A div is just a single element on an
entire webpage, and on its own it has no URL it was loaded from, so it
cannot be reloaded. You can set/replace the contents of a div with an
Ajax call, but that's definitely not 'reloading' - you'd need to
explicitly define the URL to load its new content from.
You need to write some Javascript, use setTimeout to schedule a function for execution in 10 minutes, and then use an Ajax call to retrieve JSON or HTML data that is then either parsed or placed in the relevant span element.
In your very specific situation you can make your own life easier by using the Facebook clientside Javascript API, and just issue a FB.api(...) call every 10 minutes since that appears to be what you want.
use JQuery/Ajax for that.
Example:
function reloadDiv() {
$.ajax({
url: URL_TO_YOUR_PHP_SCRIPT,
type: 'get',
success: function(result) {
if (result) {
$('#YOUR_DIV').html('<span>' + result + '</span>');
}
}
});
}
and use setTimeout to reload this div every 10 minutes like:
setInterval("reloadDiv()", 600000); // 60 * 1000 * 10
I am using a Speech-to-Text software to type in a field, since there is no screen or mouse or keyboard, I need to send this form after 3 seconds of no typing (actually talking) in this field but the field shouldn't be empty
I am using PHP but I guess the solution is JavaScript or jQuery, I dont know much in these two so I'd appreciate if you could explain how to use it too.
Fundamentally, you need to capture the keypress event and start a timer. If the timer runs out before another key is pressed, submit the form
Detecting key pressed with jQuery is done like this:
$('#ElementId').keypress(function() {
/* Your code */
});
You can use the setTimeout() method to time 3 seconds (See here)
and finally, use jQuery's submit() as shown here to submit the form
You may also want to use focus() to move the focus to the text input once the page has loaded so that SR is "typing" in the right place,
Additionally, this article is a good intro to timing events in JS, including how to cancel them
In short, you want something like this (tested):
$(document).ready(function(){
var Timeout; //For reference to timeout
var DelayInMs=3000;
$("#SRInput").focus(); //Give focus to input on document ready
//When input is received, (re)set the timer
$("#SRInput").keypress(function() {
if(Timeout) {clearTimeout(Timeout);} //Clear existing timeout, if any
Timeout = setTimeout(function(){$("#SRForm").submit();}, DelayInMs);
});
});
<form id="SRForm" method = ... >
<input type="text" name="SRInput" id="SRInput"/>
</form>
(These Timeout/DelayInMs vars are still in scope for the events thanks to closures)
Incidentally, this has the added bonus that the timer isn't started until after the first keypress - so you can take as long as you like to start talking).
$(function() {
var time = 0;
$("textarea").keyup(function() {
time = 0;
});
var int = self.setInterval(function() {
var s = $("textarea").val();
if (time++ == 3) {
if (s != "") alert(s);
time = 0;
}
}, 1000);
});
DEMO
UPDATE:
As #Tim Down has said,
The keypress event is designed for handling the a character typed by the user
rather than detecting keyboard activity and the delete and backspace keys
do not generate characters. Some browsers blur this line somewhat but
the general principle is that the keyup and keydown events are there to detect
any key being pressed and telling you about which key it is while keypress is
for detecting an actual character being typed.
So that would be better if you use keyup instead of keypress, then your timer clear works for any key.
I think you could use http://narf.pl/jquery-typing/jquery.typing-0.2.0.min.js
have a look at http://narf.pl/jquery-typing/
$(':text').typing({
start: function (event, $elem) {
// do nothing
},
stop: function (event, $elem) {
// send your form
},
delay: 3000
});
Hope this can help
So, I need to change the data representation after a couple of minutes since user did something (e.g. uploaded an image)
What I need is to change some div in page after some time?
How I can do it? What to use like a tool? PHP or JavaScript?
Thanks, But how does imgur do it after image upload?
You could take a look at ajax, and use that so the image is uploaded, and then displayed, or, you can use it to make calls to a page every x seconds, whatever takes your fancy.
You'll have to use JavaScript for this. An example is this:
function timeout_trigger() {
window.alert('Hello!');
}
function timeout_init() {
setTimeout('timeout_trigger()', 120000); // 2 minutes
}
setTimeout uses miliseconds. So 1 minute is 60.000.
Call the timeout_init() function on an event you like. So could be done onclick
You'd need to use Ajax. Here's an example of how to use Ajax with Jquery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval('load_stuff()', (1000 * 60 * 60 * 2)); // 2 minutes
});
function load_stuff() {
$.ajax({
url : 'http://www.yourdomain.com/ajax.php',
success:function(data) {
$('div#reload_conent').html(data);
}
});
}
</script>
Read more here about ajax.
i wrote myself a block of jquery codes to auto refresh a div
just want it to reload every 10 seconds . but problem is after the time i specified in my code script going crazy reload every second
<script>
var auto_refresh = setInterval(function(){
$(\'#showDIV\').slideUp(\'300\').load(\'movies.php\').slideDown(500);},10000);
</script>
I think you have to use setTimeout() and not setInterval()
read the difference between the two here.