Solved

Please advise AJAX -  (XMLHttpRequest() function)

Posted on 2009-05-18
2
568 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

937 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

9 Experts available now in Live!

Get 1:1 Help Now