[Ajax] Please wait and progress bar

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • MiguelRivero
    New Member
    • Apr 2011
    • 4
    #1

    [Ajax] Please wait and progress bar

    Hi all, I need ur appreciated help.

    This code no errors but not working because I don't see the `progressBarLon g.gif` (Please Wait), but I see instantly the alert `The server script has now completed` and redirect in the server-side page where right output of the form.

    Can u help me?

    Code:
     
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
 
<script language="javascript" type="text/javascript"> 
 
        var url = 'default-1.asp?rand=';
        
        function getHTTPObject()
        {
        try {
        req = new XMLHttpRequest();
          } catch (err1)
          {
          try {
          req = new ActiveXObject("Msxml12.XMLHTTP");
          } catch (err2)
          {
          try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (err3)
            {
	req = false;
            }
          }
	}
        return req;
	}
        
        var http = getHTTPObject();      
        
        function handleHttpResponse() {
        if (http.readyState == 4 && http.status==200) {
              document.getElementById('wait').style.visibility = "hidden";
              alert('The server script has now completed');
           } else {
              document.getElementById('wait').style.visibility = "visible";
            }
        }
 
        function longcall() {
        myRand=parseInt(Math.random()*999999);
        http.open("GET", url + myRand, true);
        http.onreadystatechange = handleHttpResponse;
        http.send(null);
        }
        
 
       
function PopUp() {
 
   var w = 400;
   var h = 400;
   var l = Math.floor((screen.width-w)/2);
   var t = Math.floor((screen.height-h)/2);
 
   finestra=window.open('mystartpage.asp','','width=' + w + ',height='+ h + ',top=' + t + ',left=' + l+',scrollbars=no,menubar=no,toolbar=no,status=no');
 
}
 
function atLeastOneChecked(form) {
 
   var inputs = form.getElementsByTagName('input');
   var i = inputs.length;
   while (i--) {   
      
      if(inputs[i].checked && !inputs[i].disabled)
      
         if(confirm("Confirm????.")) {
            PopUp();             
            return false;
            } else {
            return true; 
            }          
   }
   
   alert("ko!")
   return false;
 
}
 
 
</script>
 
</HEAD>
<title>Multiple checkbox select sample</title>
<BODY>
 
 
 
<form name=frmTest action="default-2.asp" method=POST onsubmit="return (atLeastOneChecked(this) && longcall());">
 
 
<input type=CHECKBOX name=chkParent1 value="3742">karla_c26<br>
 
<input type=CHECKBOX name=chkParent2 value="4430">AleAlvarez<br>
 
<input type=CHECKBOX name=chkParent3 value="3303">Alejandra<br>
 
<input type=CHECKBOX name=chkParent4 value="3720">Angio<br>
 
<input type=CHECKBOX name=chkParent5 value="3">gino<br>
 
<input type=CHECKBOX name=chkParent6 value="4606">Andrea<br>
 
<input type=CHECKBOX name=chkParent7 value="3962">alx<br>
 
<input type=CHECKBOX name=chkParent8 value="4095">ANGELADAUTO<br>
 
<input type=CHECKBOX name=chkParent9 value="7">chinga cas<br>
 
<input type=CHECKBOX name=chkParent10 value="8">assim<br>
 
 
<input type=HIDDEN name=txtCount value="10">
<input type=HIDDEN name=comments value=0>
 
<p><input type=SUBMIT value="Select"></p>
</form>
 
<div id="wait" style="background-color:white;position:absolute;top:240px;left:360px;width:70px;height:50px;visibility:hidden;border: 1px solid black;padding:20px;">
<img src="progressBarLong.gif" style="position:relative;top:0px;left:25px">
<br /><br />Please wait...
 
</div>
 
</BODY>
</HTML>
    Tags: None
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      Have you checked to ensure the path to your image is correct?

        Comment

        • MiguelRivero
          New Member
          • Apr 2011
          • 4
          #3
          Thanks Sir, I'm sure: the image path is correct.

          Try this:
          Pemeliharaan Permainan
          http://www.avia-it.com/bytes.com/default-1.asp

            Comment

            • NitinSawant
              Contributor
              • Oct 2007
              • 271
              #4
              have you tried re-writing all things using jquery

                Comment

                • MiguelRivero
                  New Member
                  • Apr 2011
                  • 4
                  #5
                  Thanks Sir.

                  No... I don't try jquery... Do u have some link to give me?

                    Comment

                    • MiguelRivero
                      New Member
                      • Apr 2011
                      • 4
                      #6
                      Thanks, I solved with Jquery:

                      index.asp
                      Code:
                      <html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>My page1</title>
 
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
 
<script> 
 
function PopUp() {
 
   var w = 400;
   var h = 400;
   var l = Math.floor((screen.width-w)/2);
   var t = Math.floor((screen.height-h)/2);
 
   finestra=window.open('pageAdd.asp','','width=' + w + ',height='+ h + ',top=' + t + ',left=' + l+',scrollbars=no,menubar=no,toolbar=no,status=no');
 
}
 
function atLeastOneChecked(form) {
 
   var inputs = form.getElementsByTagName('input');
   var i = inputs.length;
   while (i--) {   
      
      if(inputs[i].checked && !inputs[i].disabled)
      
         if(confirm("Confirm?.")) {
            PopUp();             
            return false;            
            } else {
            return true;
            }          
   }
   
   alert("ko!")
   return false;
 
}
 
function loadingAjax(div_id)
{
	$("#"+div_id).html('<img src="ajax-loader.gif"> saving...');
	$.ajax({
		type: "POST",
		url: "script.asp",
		data: "name=John&id=28",		
		success: function(msg){
			$("#"+div_id).html(msg);
		}
	});
}
</script>
 
<title>Multiple checkbox select sample</title>
</head>
 
<BODY>
 
 
 
<form name=frmTest action="script.asp" method=POST onsubmit="return (atLeastOneChecked(this) && loadingAjax('myDiv'));">
 
 
<input type=CHECKBOX name=chkParent1 value="3742">karla_c26<br>
 
<input type=CHECKBOX name=chkParent2 value="4430">AleAlvarez<br>
 
<input type=CHECKBOX name=chkParent3 value="3303">Alejandra<br>
 
<input type=CHECKBOX name=chkParent4 value="3720">Angio<br>
 
<input type=CHECKBOX name=chkParent5 value="3">gino<br>
 
<input type=CHECKBOX name=chkParent6 value="4606">Andrea<br>
 
<input type=CHECKBOX name=chkParent7 value="3962">alx<br>
 
<input type=CHECKBOX name=chkParent8 value="4095">ANGELADAUTO<br>
 
<input type=CHECKBOX name=chkParent9 value="7">chinga cas<br>
 
<input type=CHECKBOX name=chkParent10 value="8">assim<br>
 
 
<input type=HIDDEN name=txtCount value="10">
<input type=HIDDEN name=comment value=0>
 
<p><input type=SUBMIT value="Select"></p>
 
</form>
 
 
<div id="myDiv"></div>
 
</body>
 
</html>
                      script.asp
                      Code:
                      <%@ Language=VBScript %>

<%

  Function Sleep(sec)
     Dim Start:Start = Timer:While (Timer-Start<sec):Wend
  End function   

  Sleep 5
  
%> 

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title>Checkbox selection</title>
</HEAD>
<BODY>

<%
iCount = Request("txtCount")

response.write Request("commento") & "<br><br>"

if Request("comment") > "0" then
   strComment = Split(Request("comment"), "-")
   response.write strComment(0) & "<br>" &_
                  strComment(1) & "<br>" 
end if   

%>
<p>
There were <%=iCount%> checkboxes
</p>
<p>
<%
for i = 1 to iCount
    sID = Request("chkParent" & i)
    if sID = "" then
        Response.Write "Item " & i & " was NOT checked<br>"
    else
        Response.Write "Item " & i & " was checked, it's ID is " & sID & "<br>"
    end if
next
%>
</p>
</BODY>
</HTML>
                      pageAdd.asp
                      Code:
                      <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>

<script language="javascript" type="text/javascript">
<!--

function insertf1(f1) {

      var re = /[^a-zA-Z0-9\''\,\.\;\:\ ]/g,             
      result = re.exec(Qform.TextareaS1.value);
            
for ( var n = 0 ; n < Qform.elements.length ; n++ ) {
      var field = Qform.elements[n];
 
      if (field.value.length <= 0) {
          window.alert('KO');
          field.focus();
          field.select();   
          return;            
        }
    }

      if (!Qform.TextareaS1.value.match("^[a-zA-Z0-9\.;,:' ]{1,100}$")) {
          window.alert(' + ( result.index + 1 ) + ' "' + result + '".');
          Qform.TextareaS1.focus();
          Qform.TextareaS1.select();
          return;
    }
                              
      else {   
 
          window.opener.document.frmTest.comment.value=f1;
          window.alert("OK."); 
          window.opener.document.frmTest.submit();
          setTimeout("self.close()",300);
          window.opener.loadingAjax('myDiv');
           
    }  
}

//-->
</script>

</head>

<body>

<form name="Qform">
	<p>Data scadenza<input type="text" name="DataT1" size="20"></p>
	<p>Commento<textarea rows="10" name="TextareaS1" cols="40"></textarea></p>
	<p><a href="javascript:insertf1(document.Qform.DataT1.value+'-'+document.Qform.TextareaS1.value);">
    <img border="0" src="get_ff.png" width="84" height="16"></a></p>
</form>

</body>
</html>

                        Comment

                        Previous template Next
                        Working...