Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties

Pierre Poujade
Pierre Poujade
7,085 Points
Posted by Pierre Poujade
Pierre Poujade
7,085 Points

Make a progress bar's completion depend on JSON status

Hi,

I'm wondering if it is possible without any jQuery to make a progress bar depend on the values returned by an API in a JSON message.

Consider an API which has a few steps before reaching completion but these steps don't happen at a regular or otherwise 100% previsible interval. Would it be possible to pair each keyframe with a specific JSON message and allow for an accurate progress bar animation?

4 Answers

Devon Campbell
Devon Campbell
2,225 Points

I can't see a way to do this without doing any jQuery at all. This page shows how you might use a progress bar with an AJAX file upload or download by binding the progress event: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

UPDATE: I believe this progress event will fire for whatever AJAX calls you already have in place whether or not they involve large file uploads/downloads.

Otherwise, you can use jQuery's built-in AJAX events. https://api.jquery.com/Ajax_Events/

Pierre Poujade
Pierre Poujade
7,085 Points
Pierre Poujade
Pierre Poujade
7,085 Points

Hmm. Maybe I should rewrite the API in a RESTful way and take it from there. I'll try to come up with something and post back here if I'm stuck again.

Thanks for your help!

Devon Campbell
Devon Campbell
2,225 Points
Devon Campbell
Devon Campbell
2,225 Points

How are you fetching the JSON?

Pierre Poujade
Pierre Poujade
7,085 Points
Pierre Poujade
Pierre Poujade
7,085 Points

I submit the form with AJAX

Pierre Poujade
Pierre Poujade
7,085 Points
Pierre Poujade
Pierre Poujade
7,085 Points

I submit the form with AJAX

Devon Campbell
Devon Campbell
2,225 Points

Could you post the portion of your code that does the AJAXy stuff?

Pierre Poujade
Pierre Poujade
7,085 Points
Pierre Poujade
Pierre Poujade
7,085 Points 
$('#callMeForm').validate({
        rules: {
            callerNumber: {
                required: true,
                phoneUS: true,
            },
        },
        messages: {
            callerNumber: {
                required: '<strong>Woops!</strong> Your phone number is required.',
                phoneUS: '<strong>Woops!</strong> Your phone number must be in North America.',
            },
        },
        // prevents the input from receiving the errorClass
        highlight: $.noop,
        validClass: '',
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                dataType: 'json',
                success: function(jsonAnswer) {
                    console.log(jsonAnswer);
                    if (jsonAnswer.callSpooled) {
                        fadeFeedback('#callMeForm', '#phoneRingingAlert');
                    } else {
                        fadeFeedback('#callMeForm', '#errorAlert');
                    }
                },
                statusCode: {
                    500: function() {
                        fadeFeedback('#callMeForm', '#errorAlert');
                    },
                    404: function() {
                        fadeFeedback('#callMeForm', '#errorAlert');
                    },
                },
                error: function() {
                    fadeFeedback('#callMeForm', '#errorAlert');
                },
            });

        }
    });
Pierre Poujade
Pierre Poujade
7,085 Points
Pierre Poujade
Pierre Poujade
7,085 Points

i suspect I would have to change the JS code and the API as well to send the JSON as the steps happen because right now it is sending the resulting JSON after all steps are executed.