[RESOLVED] progress bar drawing

I recommend you to read the article below if you want to understand the server side work. it is the whole work that i handle.

http://www.brc-electronics.nl/ethernet

By the way i have tried this but it doesnt work.

Code:

---

<progress id = "progressBar" max = "100" value = "%! port-adc2"></progress>

---

I didn't read it all, but it seems, that it should execute a pre-defined function, if it finds the %! symbol combination. I don't know, why it doesn't work. Maybe try to omit the doublequotes or make a space after it, so the %! stands alone surrounded by whitespace. Or maybe it will do it only once on the page. However, they encouraged that meta-tag approach, too. It appears, you can even omit the URL part and it will refresh itself. Did you try the JS method with setTimeout line?

yes i have tried with setTimeout line but then the links on the webpage doesnt work. my webpage sends data to the circuit by these links. with the settimeout line the page refreshes and these links doesnt work.

by the way i have learned ajax alittle bit, and edited the code like below:

Code:

---

<script>
  function updateStatus( pString ) {
                document.getElementById( "status" ).childNodes[ 0 ].nodeValue = pString;
                }
            var amountLoaded = 0,
                interval;
            window.onload = function() {
                interval = setInterval( function(){
                                        amountLoaded = parseInt( document.getElementById( "demo" ).childNodes[ 0 ].nodeValue, 10 );
                                    if ( amountLoaded === 512 ) {
                        clearInterval( interval );
                        updateStatus( "done :-)" );
                        } else {
                            updateStatus( amountLoaded + "%" );
                            }
                    document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
                    }, 100 );
                };
          </script>
<script>
function loadXMLDoc()
{
       
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("demo").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","adc.shtml",true);
xmlhttp.send();

}
</script>
<div id="demo2"><h2>%! port-adc2</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

---

after the first click on the chage buton the progress bar disappears and doesnt go back?

Ok, if there's some more stuff on the page, then probably AJAX is the way. I'm guessing trouble with adc.shtml, what are the exact contents of it? If it is a whole webpage with headers and stuff, that might be the culprit. By using innerHTML you force the browser to parse again all the contents of it. If you want to add just text, you should go with nodeValue:

document.getElementById("demo").childNodes[ 0 ].nodeValue=xmlhttp.responseText;

also, you don't have to worry about IE5/6/7, as these do not support <progress> anyway. You could replace it with just variable width <div> (rectangle), if you need to support them.

the exact contents of adc.shtml is %! port-adc2 .

ok , i have edited the code and it works now. the last thing is how to omit the change buton and load this function forever auto :)

Code:

---

<script>
function loadXMLDoc()
{       
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("demo").childNodes[ 0 ].nodeValue=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","adc.shtml",true);
xmlhttp.send();
}
</script>

---

Well, i'd go with the setInterval again, since you can decide when to stop sending the requests. Use the exact same JS as in post #18, but add the function call to the else branch:

...
updateStatus( "done :-)" );
} else {
updateStatus( amountLoaded + "%" );
loadXMLDoc();
}
document.getElementById( "progressBar" ).setAttribute( "value", amountLoaded++ );
...

But you should probably change the interval itself, too, because every 100ms is way too much requests. Change it to 1000 or 2000 or so...

your last reccomend solved the last problem. thank you for precious helps. :)

On top of those comments there is a button Thread tools, mark this as Resolved.

Also - you are welcome :)