Member Avatar for weeraa

I want to call jquery function (or something like that) from vb code.
This is what i need.
There is a VB function named Calculation(). It takes few seconds to complete the calculation. (Let's get it is taken 10 Seconds) In this 10 seconds the user don't know something is processing in behind. I want to add "spin" within this 10 seconds. Up to now I have code for start spin and stop spin using HTML button click event. ( http://html5-examples.craic.com/spin_js_example.html)
But It works when click the button. But I need to call it from VB code. You can understand My Problem properly from below pseudo code.

My vb code in Button click event

'In this place I should call jquery function which SPIN Start
Call Calculation() 'This takes 10 seconds for processing
'In here i want to stop SPIN

the code of ASP code

<html >
<head>
    <style type="text/css" >
    body {
      font-family: Helvetica;
      font-size:11pt;
      padding:5px;
      margin:0px
    }

.centered {
  text-align: center;
}

.spinner {
  position: fixed;
  top: 50%;
  left: 50%;
}

  </style>
    <script src="spin.js" type="text/javascript"></script>
    <script src="spin.min.js" type="text/javascript"></script>
    <script src="jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

var opts = {
  lines: 11, // The number of lines to draw
  length: 15, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb
  speed: 0.6, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};

var spinner = null;
var spinner_div = 0;



$(document).ready(function() {

  spinner_div = $('#spinner').get(0);

  $("#button1").click(function(e) {
    e.preventDefault();
    if(spinner == null) {
      spinner = new Spinner(opts).spin(spinner_div);
    } else {
      spinner.spin(spinner_div);
    }
  });

  $("#button2").click(function(e) {
    e.preventDefault();
    spinner.stop(spinner_div);
  });

});



  </script>

</head>
<body>
    <form id="form1" runat="server">

  <div id='spinner' class='spinner'></div>

  <input type="button" id="button1" value="START" />
  <input type="button" id="button2" value="STOP" />

    <asp:Button ID="cmd_cal" runat="server" Text="Button" Width="70px"  />
</form>
</body>
</html>

Please show me some direction for doing this....

Edited by weeraa because: spelings mistake
  • 2 Contributors
  • 4 Replies
  • 2K Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

So, you really dont want to execute or stop the spin from vb (server side). What you want to do is when you click on the button (cmd_cal), that is going to cause a post back and the delay of approx 10 seconds before the page is refreshed.

So, what you want to do is start the spin when that button is clicked. there is no point in stopping the spin because when the page refreshes, there is no spin at that time. Update lines 56 and 57 to be...

  $("#cmd_cal").click(function() {
Edited by JorgeM
Member Avatar for JorgeM

Here is a complete working example you can look at.
Some things to note..

1) I am referencing an online jQuery file.
2) You only need to reference one file for spin.js
3) I included a function to simulate 10 seconds of work.

If you click on the button, you will see that the spinner will start, and continue to spin while waiting for the reload of the page. When the page finally reloads, the spinner is no longer being displayed.

        <%@ Page Language="VB" %>

        <!DOCTYPE html>

        <script runat="server">
            Protected Sub cmd_cal_Click(sender As Object, e As EventArgs)
                System.Threading.Thread.Sleep(10000)
            End Sub
        </script>

        <html >
        <head>
        <style>
        body {padding:5px; margin:0px}
        .centered {text-align: center;}
        .spinner {position: fixed;top: 50%;left: 50%;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="spin.min.js"></script>
        <script>
              var opts = {
                  lines: 11, // The number of lines to draw
                  length: 15, // The length of each line
                  width: 10, // The line thickness
                  radius: 30, // The radius of the inner circle
                  corners: 1, // Corner roundness (0..1)
                  rotate: 0, // The rotation offset
                  direction: 1, // 1: clockwise, -1: counterclockwise
                  color: '#000', // #rgb or #rrggbb
                  speed: 0.6, // Rounds per second
                  trail: 60, // Afterglow percentage
                  shadow: false, // Whether to render a shadow
                  hwaccel: false, // Whether to use hardware acceleration
                  className: 'spinner', // The CSS class to assign to the spinner
                  zIndex: 2e9, // The z-index (defaults to 2000000000)
                  top: 'auto', // Top position relative to parent in px
                  left: 'auto' // Left position relative to parent in px
              };
              var spinner = null;
              var spinner_div = 0;
              $(document).ready(function () {
                  spinner_div = $('#spinner').get(0);
                  $("#cmd_cal").click(function() {
                      if (spinner == null) {
                          spinner = new Spinner(opts).spin(spinner_div);
                      } else {
                          spinner.spin(spinner_div);
                      }
                  });
              });
          </script>
        </head>
        <body>
            <form id="form1" runat="server">
          <div id='spinner' class='spinner'></div>
            <asp:Button ID="cmd_cal" runat="server" ClientIDMode="Static" Text="Button" Width="70px" onclick="cmd_cal_Click" />
        </form>
        </body>
        </html>
Edited by JorgeM
Member Avatar for weeraa

First of all thanks for the reply JorgeM. Actually I just put 10 Seconds getting for the calculation. Some times it takes 30seconds. (There are categories in my programme and according to the category, time is vary)

I know there is a code for call JS function from VB.

                        ScriptManager.RegisterClientScriptBlock(Me.Page,Me.Page.GetType(),Guid.NewGuid.ToString(),"jsFunction()",True)

if I can do this like this in cmd_cal click event,

'Above JS code for start spin( Line A)
Call Calculation() '(Line B)
'Above JS code for stop spin (Line C)

When executing the code 1st Line A executed. It means call to JS and start spin. Then My calculation.(in Line B). After that for stop Spin call JS in Line C.

Actually this is what i need. For the caculation I can't tell exact time.

Member Avatar for JorgeM

Ok so I am not familiar with your approach. In the example I gave you the ten second timer was only for demonstration purposes.

When the button is clicked, javascript runs client side until the page reloads. There is no need to worry about when the process completes to have to stop the spin.

Hmm.. If you absolutely want to use script manager, and handle this server side, I think it makes sense to use update panels...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.