I have a mini code using Ajax, this code worked in older versions of FF and IE. But now, doesn't work correctly. I try to run in FF 3.6 (Not), in Chrome 8 (Not) and IE8 (only work the list). Check the code, include images, db and php files. The code show records of Cliente table and when put the mouse in the explorer image show more data about that Cliente in other mini window. http://www.4shared.com/file/R6V1gEFA/Ficha.html I wait somebody can help me. Thanks.
This code doesn't work with Firefox, only works with IE8. index.html ======== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cliente Directorio</title> <script language="javascript" src="ajax.js"></script> <script language="javascript"> http = getXMLHTTPRequest(); function generalista(){ var myurl = 'cliente_lista.php'; myRand= parseInt(Math.random()*99999999999999999); var modurl = myurl + "?rand=" + myRand; http.open("GET", modurl, true); http.onreadystatechange = useHTTPResponse; http.send(null); } function useHTTPResponse() { if (http.readyState == 4) { if(http.status == 200) { var miTexto = http.responseText; document.getElementById('listacliente').innerHTML = (miTexto); } } else { document.getElementById('listacliente').innerHTML='<img src="procesando.gif">'; } } function verficha(idcliente){ var myurl = 'cliente_ficha.php'; myRand= parseInt(Math.random()*99999999999999999); var modurl = myurl + "?idcliente=" + idcliente + "&rand=" + myRand; http.open("GET", modurl, true); http.onreadystatechange = useHTTPResponse2; http.send(null); } function useHTTPResponse2() { if (http.readyState == 4) { if(http.status == 200) { var miTexto = http.responseText; document.getElementById('fichadatos').innerHTML = (miTexto); } } else { document.getElementById('fichadatos').innerHTML='<img src="procesando.gif">'; } } </script> </head> <body onLoad="generalista()"> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div id="listacliente"></div></td> <td> <div id="fichadatos"></div></td> </tr> </table> </body> </html> PHP: cliente_lista.php ============ <?php $cn=mysql_connect("localhost","root","clave"); mysql_select_db("pedidos"); $sql="SELECT * FROM cliente"; $rs=mysql_query($sql); $n=mysql_num_rows($rs); ?> <table width='400' border='0' cellspacing='0' cellpadding='0'> <tr> <td bgcolor= '#FFFFCC'>NOMBRES</td> <td bgcolor= '#FFFFCC'>TELEFONO</td> <td></td> </tr> <?php for($k=0;$k<$n;$k++){ $idcliente = mysql_result($rs,$k,"idcliente"); ?> <tr> <td> <?php echo mysql_result($rs,$k,"nombres") ?> </td> <td> <?php echo mysql_result($rs,$k,"telefono") ?> </td> <td> <a onMOuseOver="verficha(<?php echo $idcliente?>)">Ficha<img src="explorar.jpg"/></a></td> </tr> <?php } ?> </table> PHP: cliente_ficha.php ============= <?php $cn = mysql_connect("localhost","root","clave"); mysql_select_db("pedidos"); $idcliente = $_GET["idcliente"]; $sql = "SELECT * FROM cliente WHERE idcliente=$idcliente"; $rs = mysql_query($sql); $n = mysql_num_rows($rs); ?> <table width="42%" border="0" bgcolor="#FFFFCC"> <tr> <td colspan="2"> <div align="center"> <h4><b>FICHA PERSONAL</b></h4> </div> </td> </tr> <tr> <td width="22%"><b>Nombres:</b></td> <td width="78%"> <?phpecho mysql_result($rs,0,"nombres")?></td> </tr> <tr> <td width="22%"><b>e-mail:</b></td> <td width="78%"><?phpecho mysql_result($rs,0,"email")?></td> </tr> <tr> <td width="22%"><b>Dirección:</b></td> <td width="78%"><?phpecho mysql_result($rs,0,"direccion")?></td> </tr> <tr> <td width="22%"><b>Telefono:</b></td> <td width="78%"><?phpecho mysql_result($rs,0,"telefono")?></td> </tr> <tr> <td width="22%"><b>Fotografia:</b></td> <td width="78%"><?php$foto="fotos/".mysql_result($rs,0,"foto")?> <?phpecho "<img src='$foto'>"?></td> </tr> </table> PHP: ajax.js ===== function getXMLHTTPRequest() { var req; try { req = new XMLHttpRequest(); } catch(err1) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (err2) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (err3) { req = false; } } } return req; } PHP: Base de datos =========== CREATE TABLE IF NOT EXISTS 'cliente' ( 'idcliente' int(10) unsigned NOT NULL AUTO_INCREMENT, 'nombres' varchar(100) NOT NULL, 'email' varchar(100) NOT NULL, 'direccion' varchar(100) NOT NULL, 'telefono' varchar(20) NOT NULL, 'foto' varchar(20) NOT NULL, PRIMARY KEY ('idcliente') ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; INSERT INTO 'cliente' ('idcliente', 'nombres', 'email', 'direccion', 'telefono', 'foto') VALUES (1, 'Cesar Bustamante', 'cabg@librosdigitales.net', 'Av XYZ 123', '654654', 'cesar.jpg'), (2, 'Juan Perez', 'jperez@yahoo.es', 'Jr abc 7777', '987987', 'jose.jpg'), (3, 'Rocio Alvarez', 'ralvarez@yahoo.com', 'Calle 111', '3213211', 'rocio.jpg'), (4, 'Jessica Rodriguez', 'jessica@terra.com', 'Jr UNO 777', '984654', 'jessica.jpg'), (5, 'Silvia Sanchez', 'ssanchez@yahoo.com', 'Los tulipanes 484 - Cerro El Pino', '4523658', 'silvia.jpg'); PHP: Somebody knows what is the problem ??
only working in IE, that's new! Anyways, I recommend using Jquery for this kind of scripts, because it is much easier to create.
Hi, Try run cliente_lista.php through your new browsers without ajax, and see the source of it... does it give your proper XHTML/javascript result? Hendra
When I run only cliente_lista.php, the list is ok. This is the its code. <table width='400' border='0' cellspacing='0' cellpadding='0'> <tr> <td bgcolor= '#FFFFCC'>NOMBRES</td> <td bgcolor= '#FFFFCC'>TELEFONO</td> <td></td> </tr> <tr> <td> Cesar Bustamante </td> <td> 654654 </td> <td> <a onMOuseOver="verficha(1)">Ficha<img src="explorar.jpg"/></a></td> </tr> <tr> <td> Juan Perez </td> <td> 987987 </td> <td> <a onMOuseOver="verficha(2)">Ficha<img src="explorar.jpg"/></a></td> </tr> </table> PHP:
That seems good to me too. And your ajax is fine. This is strange... Is it possible that your <div id="listacliente"> hasn't been created yet, while your ajax generalista() is already executing? Your new browsers might be too fast... In that case, try load generalista() through <script> instead of <body> element, something like below (untested yet though): ... var timer_id = setInterval( function(){ var el = document.getElementById([COLOR="blue"]"listacliente"[/COLOR]); if (el){ clearInterval(timer_id); [COLOR="red"]generalista()[/COLOR]; } } ,100); </script> </head> <body> ... Code (markup): That script will loop each 100 msec, checking for "listacliente" HTML element readiness, then executes generalista(). Let me know, Hendra
I don't understand your code, is like a function in index.html ? This are the images about my problem: The list works in IE8, FF and Chrome. Only in IE8 show the other div In the FF and Chrome doesn't work, show this: The small square is the image for waiting. You run the code on your pc ?
Disregard my previous post, it was just a guess... sorry. I think the problem is in useHTTPResponse. Why? Let's go back when you first run index.html... All your browsers would display generalista() correctly, right? But when a mouse hovers <a onMOuseOver="verficha(<?php echo $idcliente?>)">Ficha<img src="explorar.jpg"/></a> Code (markup): unexpectedly not only verficha() is executed, but also a "still active" useHTTPResponse(). The useHTTPResponse2() hasn't been installed yet. That's why the last "successful" result of generalista() shown in <div id="listacliente"> is overriden by that small square image, indicating a "waiting". --- A way to overcome this is probably by resetting http.onreadystatechange to null right after successful run of generalista(). See an extra line in red, as follows: function useHTTPResponse() { if (http.readyState == 4) { if(http.status == 200) { var miTexto = http.responseText; document.getElementById('listacliente').innerHTML = (miTexto); [COLOR="red"]http.onreadystatechange = null;[/COLOR] } } else { document.getElementById('listacliente').innerHTML='<img src="procesando.gif">'; } } Code (markup): A clone of this, without MySQL: http://www.smokingscript.com/test/piropeator/
Excellent!!!! Now it works. But, why it was work in IE8 ? What's the diference? And how I do for not to move the list when mouse passes? Thanks for your time and your help.
Aw, a good question... and is difficult to answer. The 1st function to be executed within verficha() is http.open("GET", modurl, true). Following a W3C standard (http://www.w3.org/TR/XMLHttpRequest/#states), http.open() should then trigger a readyState event, and executes whatever function currently installed on onreadystatechange: the useHTTPResponse(). Eventually, useHTTPResponse2() will come after it. So what seems to be an error, is actually a result of following standard procedure. I'm afraid you have to dig down into MSDN why ActiveXObject("Microsoft.XMLHTTP") reacts differently ---- Does it have to be on mouse hovering... I suppose it is better to use on mouse click ? Hendra
A last question.... That code is well ? Can be better ? Obviously I need to learn more about javascript and Css. What do you think ? Thanks.
Well it is up to your taste Have a look again at the demo, updated: http://www.smokingscript.com/test/piropeator/
It is not that hard, Piropeator.I share the files here for your review. Remember that they have been stripped for any MySQL.
One question more, if you want... How I can do if I want to show the records with Generalist() and it displayed automatically when a new record will add in the database?
Now that is a different topic I think. Start a new thread? You'll get more replies than just from me What is your website anyway? Hendra
hhmm.... I think I will start a new thread. And, about my website, I don't have. all my codes run in localhost in my job.