Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Please advise AJAX -  (XMLHttpRequest() function)

Posted on 2009-05-18
2
Medium Priority
?
621 Views
Last Modified: 2012-06-27
To
Expert Exchanges Advisors:

Hello, I do appreciate if you could advise me what to do.
I am writing a simple PHP page with AJAX element -  "XMLHttpRequest()":
The idea was to display a Car Show Registration List (Data retrieved from MySQL table "registrations") after user clicked the "Enter Passowrd" form's button.

When clicked, it displayed the hidden layer "dwindow3" with Registration List.
It is working fine.

But the problem is that it is working fine OK on IE browser ONLY.

It did not work on Mozilla Firefox browser and Safari browser.
( no display of hidden layer "dwindow3"). After clicked, page went back to initial page. (did not go to Registration page)

May be my XMLHttpRequest() function is not working on Fire Fox and Safari (I am not sure)
I have been trying to figure it out for hours and still have no clue.

If you have time please take a look at the codes attached below
and let me know what is wrong with the code.
thank you for your time.Please advise.

Code of two seperate pages are attached below in the Code section.





//The following is code of the page in question.
//Codes of  another related page (reg_display_process.php)  is pasted at the bottom as well for  reference.Thanks
 
 
<?
ob_start();
?>
<?
//another string of declaraing session
$previous_name = session_name("BobConsani");
session_start(); 
 
?>
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>View Registration</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
<script type="text/javascript">	
<!--
 
 var xmlHttp
 
 
function viewRegistration(){
	
      var password2=document.pwd.password
 
	if ((password2.value==null)||(password2.value=="")){
		alert("Please Enter Your Password!  ")
		password2.focus()
		
		document.getElementById("dwindow").style.display=''
		document.getElementById("overlayer").style.display=''
		document.getElementById("dwindowcontent").style.display=''
		document.getElementById("dwindow3").style.display="none"
		//return false
                return ;
		
	   }
	   
	   
	   
	   
	   checkPWD(password2) ;      		
	  //return true
	  
	  
	  
 
       function checkPWD()
       {
	     
         xmlHttp=GetXmlHttpObject();
        
 
	     if (xmlHttp==null)
	      {
		   alert ("The Browser is not compatible for ajax")
		   return;
	      } 
	      var pwds = document.getElementById("password").value ;
	      var url="reg_display_process.php"
	      url=url+"?pwd="+pwds
	
	      xmlHttp.onreadystatechange=stateChanged ;
	      xmlHttp.open("GET",url,true)
	      xmlHttp.send(null)
       } 
	
 
 
		function stateChanged() 
		{    
		   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
			
		       document.getElementById("dwindow").style.display="none"; 
		       document.getElementById("dwindow3").style.display='';		     		
 		       document.getElementById("dwindow3").innerHTML=xmlHttp.responseText 
    	           }else{
    	               document.getElementById("dwindow").innerHTML= '<div align="center" style="text-align:center"><br><img src ="Graphics/bar.gif" border=0><br /><font color="red" face="tahoma" align="center" valign="middle"><b>Please wait... page loading...</b></font><br></div>';
                   }    
	        }
 
 
 
		
		function GetXmlHttpObject()
		{ 
		var objXMLHttp=null
		// for Mozilla, Safari, IE 7+ ....
		if (window.XMLHttpRequest)
		{
		objXMLHttp=new XMLHttpRequest() ;
		}
		//I.E 5 7 6 .....
		if (window.ActiveXObject)
		{
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") ;
		}
		return objXMLHttp ;
		} 
 
 
 
 
 
 
 
 
 
 
 
 }
 
 
 
 
 
 
 
//-->
 </script>
 
 
<script type="text/javascript">	
<!--
// AJAX Window scripts that prompt Pop-Up window without blue title bar and Close "x" button
 
 
var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
 
function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}
 
function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}
 
function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
/*document.getElementById("dwindowcontent").style.display="none" //extra*/
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)
 
dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}
 
 
function Deinitializedrag(de){
// To prevent unwanted Cache-Dragging on FireFox Browser ....
dragapproved=false
}
 
 
 
 
 
 
 
// This triggered action of Popup window .....
function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=0")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left="45%"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+180+"px" : iecompattest().scrollTop*1+180+"px"
/*document.getElementById("cframe").src=url */
document.getElementById("dwindowcontent").style.display=''
document.getElementById("overlayer").style.display=''
/*document.getElementById("cart").src=url*/
/*showOverlay(); */
}
}
 
 
 
function closeit(){
document.getElementById("dwindow").style.display="none"
document.getElementById("overlayer").style.display="none"
document.getElementById("dwindowcontent").style.display="none"
/*$('overlay').hide();*/
 return;
}
 
 
 
		  function closeit2(){
		  document.getElementById("dwindow").style.display="none"		  
                  document.getElementById("dwindow3").style.display="none"
		  document.getElementById("overlayer").style.display="none"
		  document.getElementById("dwindowcontent").style.display="none"
		 		
		   return;
		  }
 
 
 
 
function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display="" //extra
}
 
 
 
 
 
//-->
 </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<style type="text/css">
<!--
 
 
#overlayer
{
	position: absolute;
	left: 0px;
	top: 0px;
	
	width: 100%;
	height: 100%;
	background-image:url(Graphics/bg_black.jpg);
	
        /*background: url(Graphics/bg_black.jpg); */
	background-color:#CCCCCC;
	
	/* Set both opacity and filter, for MSIE and firefox compatability */
	opacity: .7;
	filter: alpha(opacity=70);
	
	z-index: 1000;
}
 
 
 
 
 
 
-->
</style>
 
 
 
 
 
 
 
 
</head>
 
<body >
 
 
 
<div id="overlayer" style="display: none;  "></div>
 
 
<div id="dwindow" style="position:absolute; z-index: 2000; padding-bottom:30px; background-color:#cc9999; height: 300px ; border-width:thick; border-style:solid; border-color:#FF9999; cursor:hand;left:0px;top:0px;display:none" onMouseOver="Deinitializedrag(event)" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">	  
	
        <div align="center" style="background-color:#cc9999; height:auto;" > 	 
	    <div  style="width:276px; text-align:center; padding: 2px 2px 2px 2px; float:left; height:auto; background-color:#003399; margin-top:0px; "   >		  
                 	        
                 <span class="WHITE2"> ENTER  PASSWORD</span>
                 
	          <a href="javascript:" onClick="closeit()"><span class="ORANGE2">CLOSE</span></a>		  
	    </div>
 
 
	        <div id="dwindowcontent" style="height:auto; width:250px; "><!-- Begin of dwindowcontent -->
		
									
				
		   <div align="center">				        
			
		     <br />
		    <strong>Enter Password</strong><br />
                       
		       <form name="pwd" method="post" action="" onSubmit="viewRegistration();">
			
                       <div style="padding: 10px 15px 10px 15px;">
			<input name="password"  type="password"  size="10" maxlength="10" class="Form_Text_Field_style2_email" />                          
		       </div>
		       <div style="background-color:#cc9999; width:250px; margin-left:auto; margin-right: auto; float:center; " borber="1" >
		       
		       <input type="submit" name="submit" value="Submit" style=" background-color:#FFCCFF; font-size:10px; padding: 0px 3px 3px 5px; width:50px; " />
                       </div>
			</form>
		      
		   </div>	    	               
 
		  
 
	    </div><!-- End of dwindowcontent -->
		
		   <br /><br />
			    
      </div><!-- End of background-color:#cc9999 tag --> 
		
		 	
   </div><!-- End of id="dwindow" -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div id="dwindow3" style=" position:absolute;  width: 950px;  z-index: 3000; margin-left:15%; margin-right:auto; margin-top: 130px; background-color:#cc9999; border-width:thick; border-style:solid; border-color:#FF9999; cursor:hand;  display:none" onMouseOver="Deinitializedrag(event)" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">	  
</div><!-- End of id="dwindow3" -->
 
 
 
 
 
 
        <div id="main_wrapper" ><!-- Begin of "main_wrapper" tag -->	   
		   
			
            <a href="javascript:loadwindow('registration_list.php',280,120)"> View All Registrations</a>   
      
		
         </div><!-- End of  "main_wrapper" tag -->
 
 
</body>
</html>
<?   ob_end_flush(); ?>
 
 
//==================================================
 
<?php
//ob_start();
?>
 
 
 
 
 
 
       <div align="center" style="width:950px; background-color:#cc9999; height:auto;" > 	 
	    <div  style="width:950px; text-align:center; padding: 0px 0px 0px 0px; float:left; height:auto; background-color:#003399; margin-top:0px; "   >		  
                 <img src="Graphics/10_10_pixels.gif" width="300" height="10" border="0">	        
                 <span class="WHITE2">CLASSIC CAR SHOW REGISTRATION</span>
                 <img src="Graphics/10_10_pixels.gif" width="230" height="10" border="0">
	          <a href="javascript:" onClick="closeit2()"><span class="ORANGE2"><strong>CLOSE</strong></span></a>		  
	    </div>
 
		<br /><br />
 
               <div class="clearFloat"></div> <!-- Pushing text block to the next line -->	
 
	      <?php
		
		
		$submitted_Passowrd=$_GET["pwd"];
 
 
		 $linkPWD = mysql_connect('mysql16.mywebhost.com', 'user', 'password')
  		 or die('Could not connect: ' . mysql_error());
		 mysql_select_db('database_name') or die('Could not select database');     
   		 $queryPWD = "SELECT *  FROM Passwords   ;";    
  		 $resultPWD = mysql_query($queryPWD) or die('Query failed: ' . mysql_error());      		    
 
		 $row = mysql_fetch_array($resultPWD,MYSQL_ASSOC) ;
		 $realPassword = $row['password'] ;                         
 
                 	        		
		   
           ?>
			
 
			
 
			<?php
			
			$i=0;
			 $bgcolor = ($i++ & 1) ? '#cc9999' : '#CCCCCC'; 
			  $counter = 1 ;
 
		      if($realPassword==$submitted_Passowrd)
		        {   
 
                        $linkPWD = mysql_connect('mysql16.mywebhost.com', 'user', 'password')
  		        or die('Could not connect: ' . mysql_error());
		        mysql_select_db('database_name') or die('Could not select database');     
   		        $queryPWD = "SELECT *  FROM Passwords   ;";    
  		        $resultPWD = mysql_query($queryPWD) or die('Query failed: ' . mysql_error());        
		
   			$query3 = "SELECT *  FROM registrations  ORDER BY Entry_Date DESC ;";    
  			$result3 = mysql_query($query3) or die('Query failed: ' . mysql_error());      
  			$TotalRecord3=mysql_num_rows($result3);
                         ?>
 
 
                         <div align="center">
			
			<span class="Burgandy">Total Record = <?php  echo $TotalRecord3 ;  ?></span><br />
			
			</div><div class="clearFloat"></div>
 
			<div style="width:950px; float:left; padding:0px 0px 0px 0px; margin-left:auto; margin-right:auto;    " > 
			<div style="width:30px; font-size:11px; font-weight:bold;  padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">No.</div>
			
			<div style="width:130px; font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Name</div>
			<div style="width:170px; font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Email</div>    
			<div style="width:200px; font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Address</div> 
			
			<div style="width:100px; font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Phone</div>
			<div style="width:60px;  font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">year</div>
			<div style="width:90px;  font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Make</div>
			<div style="width:90px;  font-size:11px; font-weight:bold; padding:5px 5px 5px 5px; text-align:left; float:left; color:#FFFFFF; background-color:#990000; ">Entry Date</div> 
 
			</div>
 
			<div class=\"clearFloat\"></div>
 
 
                        <?php
 
                         
 
 
                       while($row3 = mysql_fetch_array($result3,MYSQL_ASSOC)) 
                        { 
 
			// Display registration records from database ........	
 
 
			echo "<div style=\"width:950px; float:left; padding:0px 0px 0px 0px; margin-left:auto; margin-right:auto; background-color:#FA8072;  \" >  " ;
			echo "<div style=\"width:30px;  height:auto; font-size:11px; font-weight:normal; padding:5px 5px 0px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px; \">" . $counter ."</div> " ;
			
			echo "<div style=\"width:130px; height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['name'] ."</div> " ;
			echo "<div style=\"width:170px; height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['email'] ."</div> " ;   
			echo "<div style=\"width:200px; height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['address'] . "<br>" . $row3['city'] . ", " .  $row3['state'] . " " . $row3['zip']  . "</div> " ;
			
			echo "<div style=\"width:100px; height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['phone'] ."</div> " ;
			echo "<div style=\"width:60px;  height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['year'] ."</div> " ;
			echo "<div style=\"width:90px;  height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['make'] ."</div> " ;
			echo "<div style=\"width:90px;  height:auto; font-size:11px; font-weight:normal; padding:5px 5px 10px 5px; text-align:left; float:left; color:#333333; background-color:#FA8072; border-style: solid; border-width: 0px 0px 0px 0px;  \">" . $row3['Entry_Date'] ."</div> " ;
 
			echo "</div> " ;
			echo "<div class=\"clearFloat\"></div> " ;
			$counter=$counter + 1 ;
 
                       }					
 
		    } // End Loop  if($realPassword==$submitted_Passowrd) ........
 	
                      
  	         if($realPassword!=$submitted_Passowrd)
		   {
	                			// Warn user about Log-in Failure        
                         
                       echo "<div align=\"center\"><br /><br />";
                       echo "<br /><img src=\"Graphics/ERROR.gif\" width=\"116\" height=\"28\" border=\"1\"><br><span class=\"REDL\">Password did not Match! Try Again. </span>";                      
                       echo "<br /><br /></div>";                       
		   }
 
 
                 ?>		<br />
 
			 <a href="javascript:" onClick="closeit2()"><span class="Burgandy"><strong>CLOSE</strong></span></a>	
                                
                                 <br />
            </div> 	
 
 
 
 
<?  // ob_end_flush(); ?>

Open in new window

0
Comment
Question by:kingroland
2 Comments
 
LVL 2

Assisted Solution

by:divstar
divstar earned 2000 total points
ID: 24418426
Are you able to post the javascript error (if any) for firefox?
Go to Tools > Error Log in Firefox and press the button thats causing problems. See if there are any javascript errors.
0
 

Accepted Solution

by:
kingroland earned 0 total points
ID: 24428502
Hello Mr. Advisor....

Thanks your advice.
It is an important tip that I need to look for error by selecting on Firefox browser by going to Tool --> Error Console ...

I tried to do it and saw some error message on Firfox Error Console.
Most of them are Error Warning about my defined invalid CSS properties such as "Styling the Scroll Bar"
(Because Firefox browswers do not support Scroll bar propertes.

Unfortunately,'I did not see any arror related to Java scripts or PHP.
It looks like parsing process dropped when it reach to xmlHTTP Request function in my Java Scripts.
I still have no clue what is causing problem.

Anyway,
I do apprecaite for your  valuable advise and I will keep troubleshooting.

If any other advisors who came across my Request for advise,
please help. Thanks

I am junior programmer with only 5 years of experiences.
I am still learning.
Thanks







0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question