0

i used the examples given in this link

here are my code for the .aspx page 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css"
rel="stylesheet" type="text/css" />

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery1.5/jquery  .min.js"></script>

<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

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

</asp:Content>

and the div for the progress bar is this one 

<div style="margin-left: 10px; margin-right: 10px;" id="progressbar">    </div>

i tried to follow the instructions given on the source page but nothing worked. can you tell me what i am missing here? thanx in advance. (Fixed this part.i made a mistake at placing my contntentplaceholder)

EDIT: how can i change the value in a way so that it animates when i press a button.... the button's code in the page is as follows :

<asp:Button ID="btnConfirm" CssClass="button" SkinID="Common" runat="server"Text="Confirm"OnClick="btnConfirm_Click" />
Monzir
  • 621
  • 4
  • 9
  • 29

1 Answers1

2

Try this:

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

$ is also used by asp.net for its own clientside javascript.

Consider us jQuery.noConflict()

You could encapsulate your jQuery code like this:

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: 37 });
    // more code using $ as alias to jQuery
  });
})(jQuery);

EDIT: To update the value surround your content above and the button with an UpdatePanel.

Refer how to use UpdatePanels

Assign the Progress percentage to an asp literal.

jQuery.noConflict();
(function($) { 
  $(function() {
    $(document).ready(function() {
    $("#progressbar").progressbar({ value: <asp:Literal runat="server" ID="ProgressPercentage" /> });
    // more code using $ as alias to jQuery
  });
})(jQuery);

On button click 

ProgressPercentage.Text = progress.ToString();
nunespascal
  • 17,584
  • 2
  • 43
  • 46
  • thanx for your feedback. i fixed my problem of not achieving a glowing a
    in the aspx page. bt now i am looking for a way to update the value from the C# code so that it would animate.
     – Monzir Aug 01 '12 at 08:23
  • Updating the value is a much larger question, you could emit a javascript vartiable that has the value and use that instead of 37. How would you update that value? UpdatePanel is on solution, Callbacks another. I suggest you create another question for that. – nunespascal Aug 01 '12 at 08:31
  • i have edited this question for my new problem. is that ok? P.S. i am new to Stackoverflow – Monzir Aug 01 '12 at 08:35
  • 1
    To keep questions and answers simple and useful to others too, people don't normal don't edit the same question. Since this second question was an enhancement to your earlier question its ok. I updated my answer. – nunespascal Aug 01 '12 at 08:48
  • thank you...... i will try this out and yes next time will definitely ask seperate questions. – Monzir Aug 01 '12 at 08:54
  • 1
    " }); // more code using $ as alias to jQuery }); })(jQuery); this didn't work – Monzir Aug 01 '12 at 09:27
  • its not valid javascript, the output will be valid javascipt. Did you try running it? – nunespascal Aug 01 '12 at 09:28
  • yes but that didn't give the desired output ...... using that makes the
    disappear/have no efect
     – Monzir Aug 01 '12 at 09:31
  • It would be impossible to figure the problem without seeing the javascript output. If you have assigned an integer value to progress it should work. Debug the script using something like firebug. – nunespascal Aug 01 '12 at 09:41
  • thanx for all of your feedback...... bt i think i would better ask a new question about this one.... – Monzir Aug 01 '12 at 09:50