CODEWITHSUNDEEP
htmljquery
Joe Marie
Joe Marie

Reputation: 346

jquery progress bar not displaying

I want to have a progress bar for my poll results in my web app and i found this article about jquery progress bar http://www.asp.net/ajaxlibrary/jquery_ui_mvc_progressbar.ashx but my problem is the progress bar is not displaying, this is my code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/jscript">
    jQuery(document).ready(function () {
        jQuery("#progressbar").progressbar({ value: 37 });
    });
    </script>

and this is my div for progress bar

    <div id="progressbar"></div>

any idea what i am doing wrong?

EDITED: i also used this, and did not work also

<script type="text/javascript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>

Upvotes: 2

Views: 7133

Answers (3)

Bertus Kruger
Bertus Kruger

Reputation: 1355

Make sure you only load jquery once. I had this issue with generated code where two versions of jquery was loaded.

Upvotes: 0

Godsmith
Godsmith

Reputation: 2612

I also had the problem with the progress bar not showing up when just using the above jQuery code. But the progress bar showed up when I added

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
  background-color: #ccc;
}

to my style.css file. Obviously, the values can be changed to suit your purposes.

Upvotes: 2

Robusto
Robusto

Reputation: 31883

Make sure you have the jquery-ui.css file loaded correctly on the page. Otherwise it won't display anything. This was my problem way back when.

Upvotes: 7

Related Questions