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

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:)