HTML5 Progress Bar

HTML5 progress bar example with fallback for unsupported browsers.

by Mike Green

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<a href="#modal-edit" id="btnEdit" class="btnEdit btn btn-green btn-sm"><i class="fa fa-pencil"></i> Edit </a>

<div id="modal-edit" class="modal fade" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h3 class="m-t-none m-b">Upload New Broadcast</h3>

                                            <p>Fill out the form below and upload audio file to create a new broadcast.</p>

                                            <form role="form" method="post" enctype="multipart/form-data" id="frmUpload" action="">
                                                <div class="form-group">
                                                    <label>Type*</label>
                                                    <select class="form-control m-b" name="type" id="type">
                                                        <option value="WCRT">WCRT</option>
                                                        <option value="Squatch Watch">Squatch Watch</option>
                                                        <option value="Welch's Grapevine">Welch's Grapevine</option>
                                                    </select>
                                                </div>
                                                <div class="form-group"><label>Title*</label> <input type="text" placeholder="Enter title" class="form-control required" name="title" id="title"></div>
                                                <div class="form-group"><label>Description*</label> <textarea placeholder="Enter a brief description of the audio broadcast." class="form-control required" name="description"...

JavaScript

$("#btnEdit").on('click', function() {
                //e.preventDefault();
                //e.stopPropagation();
                debugger;
                $.ajax({
                    type: 'GET',
                    url: '//d-smartcom.azurewebsites.net/api/RadioBroadcasts?ZUMO-API-VERSION=2.0.0',
                    data: data,
                    async: false,
                    beforeSend: function (xhr) {
                        if (xhr && xhr.overrideMimeType) {
                            xhr.overrideMimeType('application/json;charset=utf-8');
                        }
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                    },
                    error(textStatus, errorThrown) {
                        console.log("error");
                    }
                });
            });