Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[http://stackoverflow.com/questions/16722356/jquery-ajax-progress-deferred/21974664#21974664 your bin description]" />
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
​
</head>
<body>
​
Loading <output id="output">0%</output>
<br>
Loading <progress id="progress" value="0">0%</progress>
​
<script>
    (function() {
​
        function getSource() {
            var deferred = $.Deferred();
​
            $.ajax({
                url: 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.countries%20where%20place%3D%22North%20America%22&format=json&diagnostics=true&callback=',
                success: deferred.resolve,
                error: deferred.reject,
                xhrFields: {
                    onprogress: function (e) {
                        if (e.lengthComputable) {
                            deferred.notify(parseInt(e.loaded / e.total * 100), 10);
                        }
                    }
                }
            });
​
            return deferred.promise();
        }
​
​
        $.when(
            getSource()
        ).then(
                function(json) {
                    console.log(json);                                           },
                function() {
                    console.log('error');
                },
                function(value) {
                    $('#output').text(value + "%");
                    $('#progress').attr('value', value);
                }
            )
​
    })();
​
</script>
​
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers