1 (edited by luismarcelo 2009-07-14 6:09:52 PM)

Topic: progress bar for xajax function during the function execution

I would like your help with this point about what is xajax progress bar, the truth never did something similar, someone could indicate me some idea?, As they did? Thanks for your help.

Re: progress bar for xajax function during the function execution

Hi luis,

I think you want the xajax callback function.

This goes in your page head tag:

<script>
xajax.callback.global.onRequest = function() {xajax.$('loading').style.display='block';}
xajax.callback.global.beforeResponseProcessing = function() {xajax.$('loading').style.display='none';}
</script>

This goes in your page's HTML:

<div id="loading" style="display:none; position: absolute; top:100; left: 200;"> {* Processing message *}
<span style="font-size: 2em">Processing...</span>
</div>

Now, when the xajax function call is started, the div with "Processing..." will appear and it will hide when the call completes.

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

3 (edited by luismarcelo 2009-07-15 12:23:44 AM)

Re: progress bar for xajax function during the function execution

Thanks for responding.
Have with it that I do not have a lot of practice in this type of bar-progressors.
To understand what might be done this way?

Well what you try to do, is that by showing what is the schedule (and we were talking about it before I hope you remember), which is showing progress bar.
The bar will display something like this:

<?php
  require ('xajax/xajax_core/xajax.inc.php');
  $xajax = new xajax();
  $xajax->configure("javascript URI", "xajax/");
  $xajax->setCharEncoding('ISO-8859-1');

  $xajax->registerFunction("pacienteNuevo");
  function pacienteNuevo()
  {
    $objResponse = new xajaxResponse();
    $objResponse->script("
        xajax.callback.global.onRequest = function() {xajax.$('loading').style.display='block';}
        xajax.callback.global.beforeResponseProcessing = function() {xajax.$('loading').style.display='none';}");
    //$objResponse->script("xajax.$('subbtn').disabled = true");
    $numIDhist=1;
    $tabla='';
    $tabla.="<form name=\"form_paciente\"  id=\"form_paciente\" onsubmit=\"return false;\">";
    $tabla.='<table>';
    $tabla.='<tr><td>';
    $tabla.='Fecha Nacimiento: ';
    $tabla.="<input type=\"text\" name=\"fechaReportL1\" id=\"campo_fecha\" />
             <input type=\"button\" id=\"lanzador\" value=\"...\" />";
    $tabla.="</td></tr>";
    $tabla.="</table>";
    $tabla.='</form>';
    $objResponse->includeScript("javascript/calendar.js");
    $objResponse->includeScript("javascript/lang/calendar-es.js");
    $objResponse->includeScript("javascript/calendar-setup.js");
    $objResponse->assign("loading","innerHTML",$tabla);
    $csetup = "Calendar.setup({inputField:'campo_fecha', ifFormat:'%Y/%m/%d',  button:'lanzador' })";

    $objResponse->script("setTimeout(\"$csetup\",100)"); //<<<The fix is inserting a small delay.
    return $objResponse;
   }

  $xajax->processRequest();

?>

<html>
<head>
<?php $xajax->printJavascript();

?>
<style type="text/css">@import url(javascript/calendar-blue.css);</style>

</head>

<body>
    <div id="form11"></div>
    <script language="javascript" type="text/javascript">
        xajax_pacienteNuevo();
    </script>

    <div id="loading" style="display:none; position: absolute; top:100; left: 200;">
       procesando
        <span style="font-size: 2em">Processing...</span>
    </div>


</body>

</html>

My intention is to show something like this:
|== 10%
then
|============ 60%
and finally
|====================| 100%
where they disappear and show the calendar, when fully implemented the "pacienteNuevo ()",which shows just what, not if I explain.
Or something similar to progressors bar, google chorme, when downloading any domumento.

Re: progress bar for xajax function during the function execution

luis,

This won't work that way. It just appears and disappears when the event is over.

Maybe someone else has an idea?

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: progress bar for xajax function during the function execution

Sorry if I did not explain well
If I have one, I was watching as it can be done but is done with images using CSS, is that the only way? I guess not, but it will be useful to use xajax?.

Code html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress Bar</title>
<meta name="description" content="Css Progress Bar">
</meta>

<style>

/* SINGLE PROGRESS BAR */

.progressBar{
    width:216px;
    height:41px;
    background:url(bg_bar.gif) no-repeat 0 0;
    position:relative;
}
.progressBar span{
    position:absolute;
    display:block;
    width:200px;
    height:25px;
    background:url(bar.gif) no-repeat 0 0;
    top:8px;
    left:8px;
    overflow:hidden;
    text-indent:-8000px;
}
.progressBar em{
    position:absolute;
    display:block;
    width:200px;
    height:25px;
    background:url(bg_cover.gif) repeat-x 0 0;
    top:0;
}

</style>
</head>
<body>
    <h1>Pure CSS progress bar</h1>            
    <p class="progressBar">
        <span><em style="left:200px">200px is the 100%</em></span>
    </p>

</body>
</html>

fuente: http://cssglobe.com/post/1468/pure-css- … ogress-bar
As it would be to pass an xajax function, so that is dynamic.

Re: progress bar for xajax function during the function execution

luis,

Sorry. I thought you wanted to control the progress bar from the server... Silly me! smile

I'll play with this a bit and get back to you.

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: progress bar for xajax function during the function execution

luis,

Here's a working model:

<?php
/*
    Simple XAJAX Progress bar example...
*/
require_once("xajax/xajax_core/xajax.inc.php"); 
$xajax = new xajax(); 
$xajax->configure('javascript URI', 'xajax/');        

function test($dta='')
{
    $resp=new xajaxResponse();
    sleep(3);    
    return $resp; 
}
//$xajax->setflag('debug', true);  //Uncomment to turn on xajax debugging.
$xajax->register(XAJAX_FUNCTION,"test"); 
$xajax->processRequest(); 
?>
<html>
<head>
<title>Progress Bar</title>
<style>
/* SINGLE PROGRESS BAR */
.progressBar{
    width:216px;
    height:41px;
    background:url(bg_bar.gif) no-repeat 0 0;
    position:relative;
}
.progressBar span{
    position:absolute;
    display:block;
    width:200px;
    height:25px;
    background:url(bar.gif) no-repeat 0 0;
    top:8px;
    left:8px;
    overflow:hidden;
    /*text-indent:-8000px;*/
}
.progressBar em{
    position:absolute;
    display:block;
    width:200px;
    height:35px;
    background:url(bg_cover.gif) repeat-x 0 0;
    top:5px;
}
</style>
<? $xajax->printJavascript(); ?>
<script>
xajax.callback.global.onRequest = function() {xajax.$('loading').style.display='block';}
xajax.callback.global.beforeResponseProcessing = function() {xajax.$('loading').style.display='none';}
</script>

</head>
<body>
<div id="loading" style="display:none; position: absolute; top:200; left: 400;">
    <p class="progressBar">
        <span><em >Processing...</em></span>
    </p>
</div>
<input type="button" value="Go" onclick="xajax_test()"/>   
</body>
</html>

This is actually a pretty cool effect. Be nice if the span width could be adjusted based on the expected time for the function to run.

Ed

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

8 (edited by luismarcelo 2009-07-15 11:20:16 PM)

Re: progress bar for xajax function during the function execution

big_smile if it works successfully, now we adecuare to my needs ... and was very good.
Exactly as you said at the end, it would be nice if it were consistent with progress in the implementation of a function. Similarly, thank you very much for your help.

9 (edited by luismarcelo 2009-07-15 11:36:42 PM)

Re: progress bar for xajax function during the function execution

I was testing, but has a small conflict that is .... Part of click again after the second time in "GO", which shows me the bar full of progressors without the event. But if I update the page (F5) no problem, then what could be the problem? maybe ... cache page?
I have a similar problem on the cache, and not how to solve it ... try to put in the header of my page and I do not work.

header ("Cache-Control: no-cache, must-revalidate"); 
header ("Pragma: no-cache"); 

10 (edited by Anais 2009-07-16 6:01:06 AM)

Re: progress bar for xajax function during the function execution

Good, in the nights...

I am raw using the xajax ... and one presented a problem on having tried to codify, and it is the following one ... did I want that the function registered in xajax sends the information to a class, which can return different types of information, (as it is the case) and that the function registered in xajax shows the information returned  for the class???

I am grateful in advance for his help...

Re: progress bar for xajax function during the function execution

For the newbies i just wanted to add to Ed's very interesting post #2:
The lines which go into the head tag have to be tagged with <script type="text/javascript">..</script>

Re: progress bar for xajax function during the function execution

For sure...

If you ever stop learning you may as well dig a hole, crawl in and pull the top over yourself.

Re: progress bar for xajax function during the function execution

Thanks guys.

        I learn more from this post.This is my website how is it.


Ealing Minicab