I'm having some problems updating a jquery progress bar. This progress bar isn't in the document during the page load, I'm adding it just when the user click on a button, ding something like this:
$(this).parent().append('<div class="progressbar"></div>');
$(this).parent().children('div.progressbar').show();
$(this).parent().children('div.progressbar').progressbar({value: 20});
then, using a timeout, I'm trying to update it
function updateProgressBar() {
$('.progressbar').each(function() {
myNewValue = getNewValue();
$(this).progressbar('value', 50);
});
setTimeout('updateProgressBar()', 5000);
}
setTimeout('updateProgressBar()', 5000);
the debug console complains saying: "Uncaught: cannot call methods on progressbar prior to initialiaztion: attempted to call method 'value'"
Googling here I found that the problem could be related to the inizialization of the progress bar after the loading of the page
Could someone help me?
Thanks in advance
-- edit --
thanks Bryan, I'm trying your solution but i doesn't work for me
Now I've this code
function startProgress() {
$(this).parent().append('<div class="progressbar"></div>');
$(this).siblings('.progressbar').show();
$(this).siblings('.progressbar').progressbar({value: 0});
function updateProgress() {
$('.progressbar').each(function() {
myNewValue = getNewValue($(this).parent().parent().attr('id'));
$(this).progressbar('value', myNewValue);
});
setTimeout('updateProgress', 5000);
}
setTimeout('updateProgress', 5000);
}
The console is sayng there's no updateProgress defined
-- edit --
many many thanks!!!
Now i've a quite definitive version that works...
Here my current code
if($(this).siblings('.progressbar').size() == 0) {
$(this).parent().append('<div class="progressbar"/>');
$(this).siblings('.progressbar').progressbar({value: 0});
}
$(this).siblings('.progressbar').show();
function updateProgress() {
$('.progressbar').each(function() {
myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id')
myUrl = '/datacast/content_progress/?' + myParams;
theValue = $(this).progressbar('value');
$.get(myUrl, {}, function(aReply) {
myData = aReply.split(' ');
myItemId = myData[0];
myValue = parseInt(myData[1]);
try {
$(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue);
}
catch(myError) {
//alert(myError);
}
})
});
setTimeout(updateProgress, 5000);
}
setTimeout(updateProgress, 5000);
As you can see I've add a control if there is already a progress bar as i pass thorough that code several times.
The progress bar is updated every time, but the console complains saying "TypeError: Cannot call method 'apply' of undefined", so I had to add the try block with an empty catch body to drop the error. The page works but it could be interesting if you have an idea why there's that error
Had the same problem
Apparently you must use the format progressbar({value:30}) the first time
If you use progressbar(value,30) the first time then you get this exception.
Ok, I can't believe I missed that. The problem is that you're passing a string to the setTimeout function. This will cause it to lookup the name of the function in global scope, which it's not.
Change both of these calls:
setTimeout('updateProgress', 5000);
to
setTimeout(updateProgress, 5000);
Make sure that you're using the exact same selector in your update method as in the initialization method.
In the provided code, you're doing something like $(this).parent().children().find('.progressbar') and then in the update you're just doing $('.progressbar'). That second call could potentially return items that the first one didn't, and those items wouldn't have a progress bar initialized.
This code worked fine for me:
$(function(){
$('body').append('<div class="progress"></div>');
var val = 10;
$('.progress').progressbar({value:val});
function updateProgress() {
val += 10;
$('.progress').progressbar('value', val);
if(val < 100)
setTimeout(updateProgress, 1000);
}
setTimeout(updateProgress, 1000);
});
Also, remember that you don't actually need that call to each() as jquery methods should automatically apply to all elements matched with that selector.
Example:
$('.red').each(function(){ $(this).css({color:'red'}); });
is redundant, and the same can be achieved with:
$('.red').css({color:'red'});
Oh, and here's a freebie:
$(this).parent().children().find('.progressbar')
can be shortened to: $(this).siblings('.progressbar')
Related
I'm making a chat with the simple javascript:
<script>
function chatClick(messages_other_user) {
$('#chatBox').remove();
document.body.innerHTML += "<div id='chatBox' class='chatDiv'></div>";
$("#chatBox").load("subs/chat/chat.php?ou="+messages_other_user);
}
</script>
This function is called in several links with the variable "messages_other_user" changing.
In the file "chat.php" I get the variable of "ou" and I have a script that writes to the console:
if (isset($_GET['ou'])) { $otherUserChat = $_GET['ou']; } else $otherUserChat = 0; // get $otherUserChat
<script>
$(document).ready(function() {
var chatUpdateVar = setInterval(function() {
console.log("<?= $otherUserChat ?>");
}, 2000);
$.ajaxSetup({ cache: false });
});
</script>
But the .remove line doesn't quite get rid of the javascript in the chat.php file. When I click a link to call the javascript chatClick function, it works fine. But when I then click another link that calls chatClick with a different variable for "messages_other_user" the old one keeps firing along with the new one.
How can I destroy the old javascript completely so it doesn't run anymore?
I found the solution - and I was mistaken by the true culprit of the issue.
I thought a console.log would yield the same result as what I truly do - I just chose to replace with console.log in the code for simplicity. So I guess I've learned that's a stupid thing to do.
What is actually happening in the chat.php file in the document ready script is this:
$(document).ready(function() {
var chatUpdateVar = setInterval(function() {
$("#chatArea").load("subs/chat/chatContent.php?ou="+<?= $otherUserChat ?>);
console.log("updated");
}, 4000);
});
I figured out I didn't readlly need to use the document ready, so I instead, I just do this directly in my script:
var chatUpdateVar = setInterval(function() {
$("#chatArea").load("subs/chat/chatContent.php?ou="+<?= $otherUserChat ?>);
console.log("updated");
}, 4000); // CHECK FOR UNREAD: 1000 equals 1 second
$.ajaxSetup({ cache: false });
For closing the chat window, I now trigger this function:
function closeChat() {
clearInterval(chatUpdateVar);
$('#chatBox').remove();
}
And in the file that calls the above script (chat.php), I check if the function closeChat exists - and if it does, I run it. This is part of the cal to the chat.php:
function chatClick(messages_other_user) {
if (typeof closeChat === "function") {
closeChat();
}
document.body.innerHTML += "<div id='chatBox' class='chatDiv'></div>";
$("#chatBox").load("subs/chat/chat.php?ou="+messages_other_user);
}
I am creating a chat, everything works perfectly, it scrolls down when i click the "Send" button, but I want it to scroll all the way down when the document is ready. I have done this by adding the scrolling function to setInterval, but the problem with that is that the user basically cant scroll up to see previous chat messages because he gets scrolled down every 0.1 seconds. My code is:
$(function () {
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); Doesnt work at all
function updateChat(){
$("#messages").load('chat/ajaxLoad.php');
//$("#messages").scrollTop($("#messages").prop("scrollHeight")); This works but the user cannot scroll up anymore
}
setInterval(function () {
updateChat();
}, 100);
$("#post").submit(function(){
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
$("#messages").append('<div>'+data+'</div>');
$("#messages").scrollTop($("#messages").prop("scrollHeight")); // This works but only when the user presses the send button
$("#text").val("");
});
return false;
});
});
Add this to your code.
var chat = $("#messages").html();
setInterval(function () {
updateChat();
if(chat !== $("#messages").html()){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
chat = $("#messages").html();
}
}, 2000);
I think this should work (didnt test), but there are some better ways you can optimise this like not saving the whole .html() into a variable.
The idea here is that it checks if the content is changed every 2 seconds. If it is, it scrolls down.
I see what's your problem and I have 2 ideas for you :
You scroll down only when a new message is post, for example with an Ajax request you could check if number of messages is > in compare with the last 0.1s, if yes you scroll if not you ignore.
You scroll down every 1-2s only if the scroll is at the maximum bottom position. If the scroll is not at the maximum you do not scroll. I feel this solution is better.
You need to seperate the actions on your application,
also you missed many checks that can make the application work properly and will
make it easy to maintain.
How i suggestion the code will look:
$(function () {
function updateMessages(){
var messages_before_update = $("#messages").html();
$("#messages").load('chat/ajaxLoad.php');
var message_after_update = $("#messages").html();
if(messages_before_update !== message_after_update){
scrollToBottom();
}
}
function scrollToBottom(){
var scroll_height = $("#messages").prop("scrollHeight");
var scroll_top = $("#messages").scrollTop();
if(scroll_height !== scroll_top){
$("#messages").scrollTop($("#messages").prop("scrollHeight"));
}
}
function addMessage(message){
$("#messages").append('<div>' + message + '</div>');
}
setInterval(updateMessages, 100);
$("#post").submit(function () {
$.post("chat/ajaxPost.php", $('#post').serialize(), function (data) {
addMessage(data);
scrollToBottom();
$("#text").val("");
});
return false;
});
});
This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....
You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.
I simply wonder if it's possible to make a function where you have a timer/clock which ticks and when there is no time left, a text/image will be removed. There will also be a message/text displaying notifying the user. (JQuery or Java)
I have tryed this using replace.child but without any promising result.
I have also looked around for any similar object but none found.
-Thanks.
here you go:
(function(){
var secondsLeft = 10,
$timerElm = $('#timer');
function updateTimer () {
$timerElm.text(secondsLeft--);
if (secondsLeft < 0) timesUp();
else setTimeout(updateTimer, 1000);
}
function timesUp () {
$('#target').remove();
$('<p>works like a charm!</p>').prependTo('body').hide().fadeIn()
}
updateTimer();
})()
and here is a live demo too!
http://jsbin.com/aguyuw/1/edit
enjoy!
You can use setTimeout function...
setTimeout(function() { $('#some_id').fadeOut('slow');}, 2000);
here 2000 is an optional value... you can change as you concern... and if you want to fadeout fast you can use 'fast' instead of 'slow'...
For javascript you can use something like this....
setTimeout(function(){you_function();},3000);
I building website using following script. Sometime this javascript crash sometimes not. Weird thing is when I add alert box at third line after sliderLeft define, script never crash. Someone please help with this.
I am using same function twice for different output.
Even I remove Second similar function I am still getting error. Please help me with this.
$(window).load(function() {
var sliderLeft=$('#thumbScroller .container').position();
//alert(sliderLeft);
// padding=$('#outer_container').css('paddingRight').replace("px", "");
var sliderWidth=$(window).width()
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});
//alert(sliderLeft);
$('#thumbScroller').mousemove(function(e){
if($('#thumbScroller .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.6);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width());
sliderWidth=$(window).width();
});
I just remove second function as per suggestion, but still not work
removed few lines and script crash and doesn't display any error
You have 2 $(window).load(function() {...}); function definitions.
Try combing them into 1 $(window).load(function() {...}); call.
Just an idea...
Hard to say without seeing the problem (as said by 3dgoo try put your code into jsfiddle.net) but Are you sure your code executes when dom is ready ?
It'd explained that the 'alert' you put in your code 'solve' the problem by giving it time to finish loading.