Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Please advise AJAX -  (XMLHttpRequest() function)

Posted on 2009-05-18
2
Medium Priority
?
615 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog (http://scribblejava.wordpress.com). Introduction:       There are several technical issues a developer may face in his…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…

722 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