Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties

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

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

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!

How are you fetching the JSON?

Pierre Poujade
Pierre Poujade
7,085 Points

I submit the form with AJAX

Pierre Poujade
Pierre Poujade
7,085 Points

I submit the form with AJAX

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

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

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.