JQuery Progress bar and partialview on submit

Question

I have a working search functionality, but would like to include the jquery progress bar on submit. Sometimes the partialview can take up to 5 seconds to load. The progress bar is needed so the user will not keep pressing submit/enter key. And I would like to hide the progress bar until submit is pressed.

Is there a way for the percentage to actually measure the loading time?

Jquery progress bar: https://jqueryui.com/progressbar/#label

View:

@model Application.Web.ViewModels.BillingViewModel

@{
ViewBag.Title = "BillingLetterSearch";
Layout = "~/Views/Shared/_LayoutFullWidth.cshtml";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-progressbar {
 position: relative;
}
.progress-label {
 position: absolute;
 left: 50%;
 top: 4px;
 font-weight: bold;
 text-shadow: 1px 1px 0 #fff;
}
</style>

<div class="row">
<panel>
    <table class="table">
        <thead>
            <tr>
                <th>Search By Employee Number:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">
                    @Html.TextBoxFor(x => Model.EmployeeNumber, new { @class = "form-control", @id = "EmployeeNumber", @autofocus = "autofocus" })
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align:center;">
                    <br>
                    <div class="submit-holder">
                        <button id="SubmitButton" class="btn-mvc btn-mvc-large btn-mvc-green" onclick="DisplayBuyinInfo();">
                            Search
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</panel>
<div class="row" id="Results">
    @Html.Partial("_SearchByEmployeeNumber", Model.EmployeeNumber)
</div>

<script>
  function DisplayBuyinInfo() {
    $("#Results").load('@(Url.Action("_SearchByEmployeeNumber", "Bill", null, Request.Url.Scheme))?id=' + $("#EmployeeNumber").val());
};



$(document).ready(function () {
    $('#EmployeeNumber').keypress(function (e) {
        if (e.keyCode == 13)
            $('#SubmitButton').click();
    });
});


$(function () {
    //$('#progressbar').hide();
    //$('#SubmitButton').click(function () {
        //$('#progressbar').show();
        var progressbar = $("#progressbar"),
          progressLabel = $(".progress-label");

        progressbar.progressbar({
            value: false,
            change: function () {
                progressLabel.text(progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressLabel.text("Complete!");
            }
        });

        function progress() {
            var val = progressbar.progressbar("value") || 0;

            progressbar.progressbar("value", val + 2);

            if (val < 99) {
                setTimeout(progress, 80);
            }
        }

        setTimeout(progress, 2000);
    });
//});
</script>

PartialView: _SearchByEmployeeNumber

@model Application.Web.ViewModels.BillingViewModel


<div id="progressbar"><div class="progress-label">Loading...</div></div>



//...code left out for brevity

Controller

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult _SearchByEmployeeNumber(string id)
{
  //...code left out for brevity
}

Answer 1

The progress bar is needed so the user will not keep pressing submit/enter key

From my experience, a progress bar cannot stop users from keeping pressing submit/enter key. Besides, it will add more hard work for you to manage it.

The simple solution is disable the submit button until your work's done.

However, after the form has been submitted, users may re-submit it by refreshing the page. To prevent it, you should implement the PRG (Post-Redirect-Get) pattern. The Wikipedia writes about this problem very clearly.

THE PROBLEM

SOLUTION

Answer 2

There are two ways you can go about this:

Having a progress bar which simply displays some progress without it being an accurate or realistic value (.e.g, a spinner, or a loader).

And having an actual progress bar which updates a value.

The later (which I am guessing is what you want) normally function via an AJAX call, which gets the actual value from whatever backend you've called.

If for example you are using PHP, then you have to access that PHP uri with a mechanism which will let you know of a normalised (min-maxed) value for your progress, for a given interval or poll-time.

The problem with this approach, is that you don't always know how long a query is going to take, thus you can't have an accurate value.

I've used NProgress in the past, and really like it for its minimal and simple approach.

Because you are submitting something can you accurately measure its progress? If you can, then I would suggest you implement an AJAX call-back for that progress update, and then, you can use the progress bar.

If not, then simply display an overlay with a spinner, and remove it on success.

Answer 3

Having a proces-bar will add more overhead: The server has to regular send an estimated time/amount of how much still to download. An easier way is to disable the submit button after your form has been submitted.

    // jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};
// use it like

$('#myFormID').preventDoubleSubmission();

This is not my code,but coming from: http://technoesis.net/prevent-double-form-submission-using-jquery/

If it takes a long time before you see any result of the result, you can also use this:

So You could disable the submitbutton after being clicked the first time, but that is clientside and i never trust my clients (the visitor). Also it does not give any hints about waitingtime I myself prefer an immediate redirect to another page and inform the visitor to wait a few seconds, upto xx time and showing a spinner image. This is known as Post-Redirect-GET (PRG) pattern.

My answer is not about your progressbar question,but an answer for your "ultimate question" as you yourself called it:)