PDA

View Full Version : Problems with jquery's progressbar



ilbo
07-19-2009, 11:18 PM
Hello, I get the following error (from Firebug) when I call the update_progressbar function. Any thoughts?

Error:
"F is undefined
[Break on this error] (function(){var l=this,g,y=l.jQuery,p=l....each(function(){o.dequeue(this,E)})}});\n"

Here is my code:

HEAD
<script type="text/javascript">
$(document).ready(function(){
$("#progressbar").progressbar({value: 50});
});
</script>

BODY
update_progressbar();

function update_progressbar(){
progress = $("#progressbar").progressbar('option', 'value');
$("#progressbar").progressbar('option', 'value', 10);
}

venegal
07-19-2009, 11:30 PM
I don't know which progressbar plugin you are using, but passing the strings "option" and "value" to the .progressbar method sure looks wrong.

ilbo
07-19-2009, 11:34 PM
I am following the directions provided by the jQuery UI documentation:

http://jqueryui.com/demos/progressbar/#option-value

venegal
07-20-2009, 12:00 AM
Ah I see. Did you include all the necessary Javascript files? Maybe you could show your whole page, that would make it easier.

ilbo
07-20-2009, 01:43 AM
Here it is.

<html>
<head>
<title>XXXXXXX.com: Retrieving results...</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="little icon" href="images/favicon.ico"/>
<link href="css/progressbar.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
</style>
<script type="text/javascript" src="includes/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="includes/jquery-ui-1.7.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#progressbar").progressbar({value: 50});
});
</script>

</head>

<body>

<script type="text/javascript">

var progress = null;

search("XXXX.php");
search("YYYY.php");

update_progressbar();

function update_progressbar(update){
progress = $("#progressbar").progressbar('option', 'value');
$("#progressbar").progressbar('option', 'value', 10 + update);
}

function search(method){
var httpObject = getHTTPObject();
if (httpObject != null)
{
httpObject.onreadystatechange = setOutput(httpObject);
httpObject.open("GET", method, true);
httpObject.send(null);
}
}

function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else
{
alert("Your browser does not support AJAX.");
return null;
}
}

function setOutput(httpObject){
if(httpObject.readyState == 4)
{
update_progressbar(10);
alert("Hello world!");
}
}

</script>

<div align="center" id="progressbar"></div>

</body>

</html>

venegal
07-20-2009, 01:55 AM
Please edit your post and put your code in code tags, so it's not so hard on the eyes.

Alright, the error is caused by that update_progressbar() call in the body. The progressbar is initialized in the document ready event, which is triggered way after you try to access the progressbar there.