CODEWITHSUNDEEP
phpjavascriptjquerycssajax
hellosheikh
hellosheikh

Reputation: 3015

jquery get data using jquery.load

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);

Upvotes: 1

Views: 1953

Answers (1)

Hanlet Escaño
Hanlet Escaño

Reputation: 17370

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.

Upvotes: 1

Related Questions