Web Connection
Progress Bar or Equivalent Method
Gravatar is a globally recognized avatar based on your email address. Progress Bar or Equivalent Method
  Serge
  All
  Feb 13, 2020 @ 12:25pm

I have a project where we are managing a query manager - essentially users access a series of data tables where they can build their query logic and then send the job for execution.

I have another separate server process handling the queries, where I have designed it to be able to provide status information as the queries are fulfilled.

In the past I handled this through the header of the web page coupled with the WC process class that checks on the status as shown below:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Async Data</title>
    <meta http-equiv="Refresh" content="1; URL=AsyncDataRequest.c1?Skoylka=<%= inlp %>&kneega=<%= cReportReference %>&Shtoh=<%= txt_cpk %>"/>

    <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/lib/fontawesome/css/all.min.css" rel="stylesheet" />
    <link href="~/css/application.css" rel="stylesheet" />

    <link href="css/westwind.css" rel="stylesheet" type="text/css" />

    <%= RenderSection("headers") %>
</head>

The AsyncDataRequest is a function in the process class. It checks the build status, if ready it redirects to a report page, otherwise it would go to the page with the header shown above.

This has worked in the past but has proven problematic in the latest WC passing values between pages and functions (values are getting dropped when moving from this page to the URL in the .

Would anyone have any ideas how to illustrate the progress during these query development.

thx Serge

Gravatar is a globally recognized avatar based on your email address. re: Progress Bar or Equivalent Method
  Rick Strahl
  Serge
  Feb 13, 2020 @ 01:15pm

These days it's probably better to use a AJAX callbacks and some client side code to check for progress information. If you're tracking progress in a database, you can just use a timer to refresh via an AJAX (HTTP) call from JavaScript to. Basically a Are you done yet? while you are sitting on the current page without actually refreshing it. Instead you can show progress with a percentage or spinning icon display.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Progress Bar or Equivalent Method
  Serge
  Rick Strahl
  Feb 13, 2020 @ 02:06pm

Hey Rick,

That sounds just fine - would we have something in the WC libraries for reference or as a guide?

I remember a progressbar.wcsx as provided with the older WC packages - would I find what I require there? I don't remember seeing anything in the WebConnect demo...

thx Rick,

Serge

Gravatar is a globally recognized avatar based on your email address. re: Progress Bar or Equivalent Method
  Rick Strahl
  Serge
  Feb 14, 2020 @ 12:37pm

You can use wwRestService or CallbackHandler on the server to handle the AJAX callbacks. On the client you can use ww.jquery.js and ajaxJson() to make the callback calls to send and retrieve the server responses. Creating a progress bar in HTML is as easy as creating a <div> with another nested div inside for the progress bar. Then set the color of the inner bar, and set the width to a percentage - voila progress.

<h3>Progress</h3>
  
<div style="width:800px;  background: #eee">
  <div id="pbar" style="height: 20px; background: steelblue; width: 0"></div>
</div>

<script>  
var count = 0;
  
setInterval(function() {
    count += 2;
    if (count > 100)
      count = 0;    
    
    var el = document.getElementById("pbar");   
    el.style.width = count + "%";
    
},300);
</script>

Here's a codepen that demonstrates:

https://codepen.io/rstrahl/pen/mdJVgJY

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Progress Bar or Equivalent Method
  Serge
  Rick Strahl
  Feb 14, 2020 @ 01:20pm

Hi Rick,

That's perfect - I can take the calls to the query server that act as the means to follow progress and essentially work it into your example!

I also noted your help section on "using jQuery.get for very simple Data Requests" - great write up with good ideas.

Thanks again Rick!!! Serge

© 1996-2024