1

i have a problem similar to my previous question but now its different

jquery : progress bar show in html

  var auto_refresh = setInterval(
   function ()
  {
     $('#battery').load('https=://localhost/userinfo/battery_level/');

 }, 10000);

i dont want to load the div ... i want to get the result and want to display in my progress bar here 

 $('.demo-progress').progress(data);

i am geting a value here "10"

want to do something like this 

 var auto_refresh = setInterval(
   function ()
  {
    var data =  $('#battery').load('https=://localhost/userinfo/battery_level/');

 }, 10000);
      $('.demo-progress').progress(data);
Community
  • 1
  • 1
hellosheikh
  • 2,929
  • 8
  • 49
  • 115

1 Answers1

1

Try this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#progressbar").progressbar({ max: 100, value: 10 });
            $("#twenty").click(function () { loadFile("20"); });
            $("#fifty").click(function () { loadFile("55"); });
            $("#eighty").click(function () { loadFile("80"); });
        });


        function loadFile(file) {
            $.get(file + ".txt", function (data) {
                var value = parseInt(data, 10);
                $('#progressbar').progressbar("option", "value", value);
            });
        }
    </script>
</head>
<body>
    <div id="progressbar">
    </div>
    <input type="button" id="twenty" value="Load to 20%" />
    <input type="button" id="fifty" value="Load to 50%" />
    <input type="button" id="eighty" value="Load to 80%" />
</body>
</html>

From the jquery page:

This method (.load) is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function.

The reason why I am using .get is because of the last part, the implicit callback function, which let's me know when the function has ended, and I can then update the progressbar.

Hanlet Escaño
  • 17,114
  • 8
  • 52
  • 75
  • i dont want to use get .. as i want to show the real time data without page refresh .. and i think by using ur code i have to refresh the page for the result – hellosheikh Aug 16 '13 at 20:51
  • Why don't you try it first? This will not refresh the page. – Hanlet Escaño Aug 16 '13 at 20:52
  • oooookkk let me try it – hellosheikh Aug 16 '13 at 20:52
  • nope not working... well i think u should give some time interval .. dont u ... as yet it is not giving me the value without refresh – hellosheikh Aug 16 '13 at 20:56
  • are you sure you are calling .progressbar method correctly? You have it different in the other question `$(".demo-progress").progressbar("option", "value", 50);` so maybe its `$(".demo-progress").progressbar("option", "value", data);` – Hanlet Escaño Aug 16 '13 at 20:59
  • well the progress bar is working fine ... but if i change the value in db then the progress bar dont change until i refresh by using ur code .. so i am running write now both the codes for testing .. the code which is mine is changing the value without refresh .. but i dont know how can i add that into progress bar .. and in ur code the value didnt change until i refresh the page .. – hellosheikh Aug 16 '13 at 21:02
  • Then you just need to know how to change the value of a progressbar after it has been initialized. Gimme a minute to read the documentation of the plugin. – Hanlet Escaño Aug 16 '13 at 21:03
  • i have commented there that what works for me ...well progress bar is displaying correct but for example write now the progress bar has 50 % ... so if the value gets 90 .. the progess bar didnt increase until i reload .. and i think its only possible if i use jquery.load – hellosheikh Aug 16 '13 at 21:05
  • i want to explain u little more ... look by using jquery.load .. whatever value i change into db ... it just show on the page .. no need for refresh .. but in jquery.load the only problem is that i cant get or capture the result and save into some variable .. because if i am able to get the result then i will just the pass the value into progress barden its will work – hellosheikh Aug 16 '13 at 21:11
  • Look at this example: http://hamletsoft.net/progressbar/ I just created that with the .get function. I will upload all of the code here now. This gets a file with the .get function, gets its data and updates the progressbar. – Hanlet Escaño Aug 16 '13 at 21:22
  • sorry sir i think u didnt get it wat i want to say... ok let me ask u a question ... leave the progress bar .. for example if i use .get function and i in result i get data for example "hello world" ..hello world is displaying on the page right now .. and now u change the hello world to "world" from db .. will it change here without reloading the page – hellosheikh Aug 16 '13 at 21:29
  • certainly not .. u have to reload the page if u want to see the changes .. but in case of jquery.load u dont need to reload the page – hellosheikh Aug 16 '13 at 21:31
  • I am obviously not understanding... lets chat http://chat.stackoverflow.com/rooms/34705/lets-solve-this – Hanlet Escaño Aug 16 '13 at 21:31