Ive got an problem. I have an button that sends an command to an perl script. For 60 seconds the page will just load and load. So i need an countdown to tell the user how much time until the perl script is finished. So i got his javascript from the web that automaticly counts down when the page loads. Is it possible to reverse this?
http://goo.gl/cYdKg
You see what happens, when you don't state your requirements correctly? Two people doing the same wrong thing (bad for us, we did not clarified before, tho).
$.fn.timedDisable = function(time, callback) {
if (time == null) {
time = 5000;
}
var seconds = Math.ceil(time / 1000);
return $(this).each(function() {
$(this).attr('disabled', 'disabled');
var disabledElem = $(this);
var originalText = this.innerHTML;
disabledElem.text( originalText + ' (' + seconds + ')');
var interval = setInterval(function() {
disabledElem.text( originalText + ' (' + --seconds + ')');
if (seconds === 0) {
disabledElem.removeAttr('disabled')
.text(originalText);
clearInterval(interval);
if (typeof callback !== 'undefined')
callback();
}
}, 1000);
});
};
$(function() {
$('#btnContinue').click(function() {
$(this).timedDisable(5000, function() {
window.alert('done');
});
});
});
Related
I am doing infinite ajax scrolling with php and api but my data is repeating. i don't want to load data when user is end of page(run perfectly) . What i want when user reach at certain div(check_onload) then load the data but in this case data is repeating.Here is below my code how i stop repeating data.
<div id="post-data"></div>
<div style="display:none;" class="ajax-load"></div>
<div class="check_onload"></div>
<script type="text/javascript">
///this run Perfectly
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var token = $(".tokenId").val();
GetMoreData(token);
}
});
///Repeating or duplication the data
$(window).on('scroll',function() {
if (checkVisible($('#check_onload'))) {
var token = $(".tokenId").val();
GetMoreData(token);
} else {
}
});
function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}
function GetMoreData(token){
$.ajax(
{
url: '/loadMoreData.php?token=' + token,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data.html);
$("#tokenId").val(data.token);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
You have 2 window scroll events being triggered, causing duplicates because you are requesting data from the server with the same token twice, each time the user scrolls the page. I will have to assume that removing 1 of them will fix your problem.
Without seeing your server code, this is the only solution.
I use the code below for sending ajax request to get more products on scroll down event. However it also sends ajax request when I scroll up, which is not intended. How can I modify it so that it will send a request only when I scroll it to the bottom?
_debug = true;
function dbg(msg) {
if (_debug) console.log(msg);
}
$(document).ready(function () {
$(".item-block img.lazy").lazyload({
effect: "fadeIn"
});
doMouseWheel = 1;
$("#result").append("<p id='last'></p>");
dbg("Document Ready");
var scrollFunction = function () {
dbg("Window Scroll Start");
/* if (!doMouseWheel) return;*/
var mostOfTheWayDown = ($('#last').offset().top - $('#result').height()) * 2 / 3;
dbg('mostOfTheWayDown html: ' + mostOfTheWayDown);
dbg('doMouseWheel html: ' + doMouseWheel);
if ($(window).scrollTop() >= mostOfTheWayDown) {
$(window).unbind("scroll");
dbg("Window distanceTop to scrollTop Start");
$('div#loadMoreComments').show();
doMouseWheel = 1;
dbg("Another window to the end !!!! " + $(".item-block:last").attr('id'));
$.ajax({
dataType: "html",
url: "search_load_more.php?lastComment=" + $(".item-block:last").attr('id') + "&" + window.location.search.substring(1),
success: function (html) {
doMouseWheel = 0;
if (html) {
$("#result").append(html);
dbg('Append html: ' + $(".item-block:first").attr('id'));
dbg('Append html: ' + $(".item-block:last").attr('id'));
$("#last").remove();
$("#result").append("<p id='last'></p>");
$('div#loadMoreComments').hide();
$("img.lazy").lazyload({
effect: "fadeIn"
});
$(window).scroll(scrollFunction);
} else {
//Disable Ajax when result from PHP-script is empty (no more DB-results )
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>No more styles</h1></center>");
doMouseWheel = 0;
}
}
});
}
};
$(window).scroll(scrollFunction);
});
You'll need to detect the direction of the scroll and add that as a boolean check. This post covers it.
The snippet they provide:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
So you'll probably do something like:
$(window).scrollTop() >= mostOfTheWayDown && st > lastScrollTop
I have changed the below line
if ($(window).scrollTop() >= mostOfTheWayDown)
to
if( $(window).height() + $(window).scrollTop() == $(document).height())
this worked for me. Hope this can help others too. Thanks
I'm using jQuery Multifile uploader (https://github.com/blueimp/jQuery-File-Upload) with PHP
and I want to refresh the uploads page once all files got uploaded, I'm using basic plus UI, please tell me if is there any easy way to achieve it
Use the done and fail events along with some counters. Found these events in the options documentation.
var fileCount = 0, fails = 0, successes = 0;
$('#fileupload').fileupload({
url: 'server/php/'
}).bind('fileuploaddone', function(e, data) {
fileCount++;
successes++;
console.log('fileuploaddone');
if (fileCount === data.getNumberOfFiles()) {
console.log('all done, successes: ' + successes + ', fails: ' + fails);
// refresh page
location.reload();
}
}).bind('fileuploadfail', function(e, data) {
fileCount++;
fails++;
console.log('fileuploadfail');
if (fileCount === data.getNumberOfFiles()) {
console.log('all done, successes: ' + successes + ', fails: ' + fails);
// refresh page
location.reload();
}
});
You can use the stop event. It is equivalent to the global ajaxStop event (but for file upload requests only).
stop: function(e){
location.reload();
}
I have used this code and so far it works well.
$('#fileupload').bind('fileuploadstop', function (e) {
console.log('Uploads finished');
location.reload(); // refresh page
});
I used ryan's code, but there was a problem. The value of data.getNumberOfFiles() was decreasing as the files were uploaded while fileCount was increasing, so my upload script got interrupted at the middle of my upload where data.getNumberOfFiles() was equal to fileCount.
Here is how i tweaked ryan's script and now it's working like a charm:
var fileCount = 0, fails = 0, successes = 0;
var _totalCountOfFilesToUpload = -1;
$('#fileupload').bind('fileuploaddone', function (e, data) {
if (_totalCountOfFilesToUpload < 0) {
_totalCountOfFilesToUpload = data.getNumberOfFiles();
}
fileCount++;
successes++;
if (fileCount === _totalCountOfFilesToUpload) {
console.log('all done, successes: ' + successes + ', fails: ' + fails);
// refresh page
location.reload();
}
}).bind('fileuploadfail', function(e, data) {
fileCount++;
fails++;
if (fileCount === _totalCountOfFilesToUpload) {
console.log('all done, successes: ' + successes + ', fails: ' + fails);
// refresh page
//location.reload();
}
});
I hope this will help other people as well as! :)
I have a pinterest style site and made a jquery script that spaces the cubes evenly no matter how big the browser is. For some reason on page load it has some overlapping cubes which didn't exist before. I talked with the guy that helped me make it and he said it's probly because of the code before the code that creates the blocks and positions them. It crashes the javascript.
I think it's because of the $(window).scroll ajax loading code but I can't seem to pinpoint the problem. I tried moving positionBlocks(); around and nothing changes. If you load the page in your browser and then change your browser size then it positions them correctly but obviously I want it to look right when the user first gets there.
function setupBlocks() {
windowWidth = $(window).width();
blocks = [];
// Calculate the margin so the blocks are evenly spaced within the window
colCount = Math.floor(windowWidth/(colWidth+margin*2));
spaceLeft = (windowWidth - ((colWidth*colCount)+margin*2)) / 2;
spaceLeft -= margin;
for(var i=0;i<colCount;i++){
blocks.push(margin);
}
positionBlocks();
}
function positionBlocks() {
$('.block').each(function(i){
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin+(index*(colWidth+margin));
$(this).css({
'left':(leftPos+spaceLeft)+'px',
'top':min+'px'
});
blocks[index] = min+$(this).outerHeight()+margin;
});
}
// Function to get the Min value in Array
Array.min = function(array) {
return Math.min.apply(Math, array);
};
var curlimit=<?php echo $curlimit; ?>;
var totalnum=<?php echo $num_rws; ?>;
var perpage=<?Php echo $perpage ?>;
var working_already=false;
$(document).ready(function() {
//($(window).scrollTop() + $(window).height() )> $(document).height()*0.8
// old ($(window).scrollTop() + $(window).height() == $(document).height())
$(window).resize(setupBlocks);
$(window).scroll(function() {
if(($(window).scrollTop() + $(window).height() )> $(document).height()*0.90 && totalnum>0 && working_already==false ) {
} else return false;
working_already=true;
$("div#loading_bar").fadeIn("slow");
curlimit=curlimit+perpage;
$("div#loading_data_location").html("");
$.get('get_cubes.php?page=<?php echo $_GET['page'] ?>&curlimit='+curlimit, function(response) {
$("div#loading_data_location").html(response);
$("div#ColumnContainer").append($("div#loading_data_location").html());
$("a#bigpic").fancybox({
'onComplete' : imageLoadComplete,
'onClosed' : imageClosed,
'type': 'ajax' });
if ($("div#loading_data_location").text()=="")
totalnum=0;
else
totalnum=<?php echo $num_rws; ?>;
$('.like:not(.liked)').click(like_box);
$('.save:not(.saved)').click(save_box);
$('.follow:not(.following)').click(follow);
$("div#loading_bar").fadeOut("fast");
$("div#loading_data_location").html('');
setupBlocks();
working_already=false;
});
});
I had to add this to the end of my script:
<script language="javascript">
$(window).bind("load", function() {
setupBlocks();
});
</script>
and then this to the end of the on scroll ajax load. Sometimes jquery just needs a little kick in the face haha:
setTimeout(function(){setupBlocks();},100);
I am trying to put this into ajax so everytime a person clicks a button in jquery, it creates a php session. Is it possible just using this?
var milisec=00;
var seconds=60;
function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds+=1
}
else {
milisec-=1
document.getElementById('counter').innerHTML= seconds+":"+"0"+milisec+"s";
setTimeout(display,100)
}
if (seconds < 10) {
document.getElementById('counter').innerHTML= "0"+seconds+":"+"0"+milisec+"s";
}
}
display()
I need to post the time it took for them to get to the next page using Php sessions, using ajax.
var seconds = 60;
var milisec = 0;
var stop_counter = false;
function display(){
if(milisec == 0)
seconds = seconds - 1;
milisec = milisec - 1;
if(milisec == -1)
milisec = 10;
$('#counter').html((seconds < 10 ? "0" : "") + seconds + ":0" +milisec+ "s");
if( (seconds == 0 && milisec == 0 && stop_counter == true) == false )
setTimeout(function(){ display(); }, 100);
}
$(document).ready(function(){
display();
$('#button').click(function(){
$.post('myphpfile.php', {time : $('#counter').text()}, function(data){
alert('Data from myphpfile.php: ' + data);
stop_counter = true; //stop counter now
});
});
});
myphpfile.php
echo 'you clicked button when counter was ' . $_POST['time'];
//you can do any php stuff here
this code should do what you want but I did not test it.
function $.post() from jQuery library will pass your data to php script and also can retrieve some data which you can display on your site or something.
btw, one second has 1000 miliseconds, not 100
sorry for my english
Yes you can do it by passing the value of "seconds" and "milisec" in the ajax call by
$(document).ready(function(){
$('#button').click(function(){
$.post('session_file.php', {secs : seconds,millisecs:milisec}, function(data){
});
});
});
So in the session_file.php you can write the values of the variables of secs and millisecs in a session