1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Why doesn't work this Ajax code?

Discussion in 'JavaScript' started by piropeator, Feb 4, 2011.

0
  1. #1
    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.
     
    piropeator, Feb 4, 2011 IP
  2. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #2
    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&oacute;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 ??
     
    piropeator, Mar 5, 2011 IP
  3. ssmm987

    ssmm987 Member

    Messages:
    180
    Likes Received:
    4
    Best Answers:
    3
    Trophy Points:
    43
    #3
    only working in IE, that's new!

    Anyways, I recommend using Jquery for this kind of scripts, because it is much easier to create.
     
    ssmm987, Mar 6, 2011 IP
  4. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #4
    Jquery ? Can you recomend any site ?
     
    piropeator, Mar 6, 2011 IP
  5. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #5
    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
     
    hdewantara, Mar 7, 2011 IP
  6. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #6
    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:
     
    piropeator, Mar 7, 2011 IP
  7. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #7
    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
     
    Last edited: Mar 7, 2011
    hdewantara, Mar 7, 2011 IP
  8. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #8
    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.
    [​IMG]
    Only in IE8 show the other div
    [​IMG]
    In the FF and Chrome doesn't work, show this:
    [​IMG]
    The small square is the image for waiting.
    You run the code on your pc ?
     
    piropeator, Mar 8, 2011 IP
  9. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #9
    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/
     
    Last edited: Mar 9, 2011
    hdewantara, Mar 9, 2011 IP
  10. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #10
    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.
     
    piropeator, Mar 9, 2011 IP
  11. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #11
    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 :eek:

    ----
    Does it have to be on mouse hovering...
    I suppose it is better to use on mouse click ?

    Hendra
     
    hdewantara, Mar 10, 2011 IP
  12. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #12
    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.
     
    piropeator, Mar 10, 2011 IP
  13. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #13
    hdewantara, Mar 10, 2011 IP
  14. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #14
    piropeator, Mar 10, 2011 IP
  15. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #15
    It is not that hard, Piropeator.I share the files here for your review.
    Remember that they have been stripped for any MySQL.
     

    Attached Files:

    hdewantara, Mar 11, 2011 IP
  16. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #16
    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?
    :confused:
     
    piropeator, Mar 13, 2011 IP
  17. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #17
    Now that is a different topic I think.
    Start a new thread? You'll get more replies than just from me :eek:

    What is your website anyway?
    Hendra
     
    hdewantara, Mar 13, 2011 IP
  18. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #18
    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.
     
    piropeator, Mar 14, 2011 IP