Solved

Please advise AJAX -  (XMLHttpRequest() function)

Posted on 2009-05-18
2
559 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 500 total points
Comment Utility
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
Comment Utility
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now