1 Replies - 1338 Views - Last Post: 03 October 2017 - 09:59 AM

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

How to set up progress bar using jquery ajax?

Posted 03 October 2017 - 09:44 AM

How to set up progress bar using jquery ajax?

I tried to do this just buy using javascript but turn out thats not possiable. so I have to use ajax.

I am using Bootstrap, jquery ajax, VB asp.net

I have a search bar. User can type in keywords and hit 'search button' (LinkedButton). On back end I am using VB asp.net to write my query and search the database. After that page refreshes and new results are display on page.

Soon as user hit LinkButton, I want the progress bar to run. progress bar is completed when page is refreshed.


File: Index.aspx

Progress bar - using bootstrap 
<div id="myProgress" style="width: 100%; background-color: #ddd;">
	<div id="myBar" style="  width: 0%;height:3px;" class="progress-bar-danger progress-bar-striped" role="progressbar"></div>
</div>

search bar + sumbit button 
<asp:TextBox ID="Search" runat="server"></asp:TextBox>
<asp:LinkButton  ID="SubmitBtn" runat="server" class="SubmitBtnC">Submit</asp:LinkButton>

		


<script type="text/javascript">
          $(document).ready(function () {
              $('.SubmitBtnC').click(function () {
                  move();
              });
          });

          function move() {
              var elem = document.getElementById("myBar");

              $.ajax({
                  xhr: function () {
                      var xhr = new window.XMLHttpRequest();

                      // Upload progress
                      xhr.upload.addEventListener("progress", function (evt) {
                          if (evt.lengthComputable) {
                              var percentComplete = evt.loaded / evt.total;
                              //Do something with upload progress
                              console.log(percentComplete);
                          }
                      }, false);

                      // Download progress
                      xhr.addEventListener("progress", function (evt) {
                          if (evt.lengthComputable) {
                              var percentComplete = evt.loaded / evt.total;
                              // Do something with download progress
                              console.log(percentComplete);
                          }
                      }, false);

                      return xhr;
                  },
                  type: 'POST',
                  url: "/",
                  data: {},
                  success: function (data) {
                      elem.style.width = width + '%';
                  }
              });
          }
  </script>



file name: Index.aspx.VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            BindGridData()
        End If
End Sub

 Protected Sub BindGridData()
	' Create query + bind with datagrid 
    ...
    If (String.IsNullOrEmpty(Request.QueryString("s"))) Then
		Dim query as string = "Select * from myTable""
	else
	  Dim SearchU as string = Request.QueryString("s")
	  Dim query as string = "Select * from myTable where col1 = '" & s & "'"
	end if 
	...
	GridView1.DataBind()
 End Sub
	
 Protected Sub SubmitBtn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SubmitBtn.Click
	Dim s As String = Search.Text

	Response.Redirect("AgingReport.aspx?s=" & Search)
End Sub


Is This A Good Question/Topic? 0
  • +

Replies To: How to set up progress bar using jquery ajax?

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: How to set up progress bar using jquery ajax?

Posted 03 October 2017 - 09:59 AM

First, Javascript, jQuery, and ajax are all Javascript. jQuery is a Javascript library or framework, and ajax is just a technique for using Javascript to send a request to the server and handle the response. It's all Javascript.

How do you expect a progress bar like that to work? It sounds like you want the progress bar to represent the database search, so how do you know how long the search is going to take? Is the lengthComputable property on the XHR object set to true when you send that request? It sounds like the response headers would need to include a content-length to tell the browser how large the content is, but in order for that to happen the response needs to be buffered, so the content-length would only be sent after the database search is finished. So that progress bar wouldn't measure the total time to send the request and search the database, it's only measuring the time for the browser to download the actual HTML response after the search is already finished.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1