Foros Club Delphi

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)
-   PHP (https://www.clubdelphi.com/foros/forumdisplay.php?f=15)
-   -   PHP y Javascript (https://www.clubdelphi.com/foros/showthread.php?t=85950)

darkamerico 29-05-2014 21:30:51

PHP y Javascript
 
Saludos estimados amigos: Estoy utilizando un script para que aparezca una ventana popup cuando haga clic sobre un texto, el código es el siguiente:

Código PHP:

<head>
    <meta charset="utf-8" />
    <title>Simple Modal Dialog</title>   
    <link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
    
    <?php
        $sql_NoticiaX
='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
                       FROM noticias
                       ORDER BY fecha_reg DESC
                       LIMIT 12'
;
        
$res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
        while(
$dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
    
?>
    <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
          $("modal<?= $dato['id_noticia'?>").addEvent("click", function(e){
                e.stop();
                var SM<?= $dato['id_noticia'?> = new SimpleModal({"btn_ok":"Ok"});
            SM<?= $dato['id_noticia'?>.addButton("Ok", "btn primary", function(){
                this.hide();
            });            
            SM<?= $dato['id_noticia'?>.show({
                  "model":"modal",
                  "title":"<?= $dato['title'?>",
                  "contents":"<p><img src=<?= $dato['thumb'?> width=100 border=0><?= htmlspecialchars_decode($dato['body']) ?></p>"
            });
          })
  });
    </script>
  <?php
      
}
  
?>
      <link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>

En el Body:

Código PHP:

<body>
<br><br>
    <?php
        $sql_NoticiaX
='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
                       FROM noticias
                       ORDER BY fecha_reg DESC
                       LIMIT 12'
;
        
$res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
        while(
$dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
    
?>
        <ul>
          <li id="modal<?= $dato['id_noticia'?>">
                <a href="#"><?= $dato['title'?></a>            
          </li>
        </ul>
    <?php
        
}
    
?>    

</body>

--------------------------------------------

El Codigo fuente resultante de esto es:

Código PHP:

<head>
    <
meta charset="utf-8" />
    <
title>Simple Modal Dialog</title>   
    <
link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <
link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <
link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <
script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
    
        <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
          $("modal2").addEvent("click", function(e){
                e.stop();
                var SM2 = new SimpleModal({"btn_ok":"Ok"});
            SM2.addButton("Ok", "btn primary", function(){
                this.hide();
            });            
            SM2.show({
                  "model":"modal",
                  "title":"Noticia 2",
                  "contents":"<p><img src=./uploads/thumb_imagen013-101124685.jpg width=100 border=0><p>Tu saes maestro asi son las cosas:</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul></p>"
            });
          })
  });
    </script>
      <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
          $("modal1").addEvent("click", function(e){
                e.stop();
                var SM1 = new SimpleModal({"btn_ok":"Ok"});
            SM1.addButton("Ok", "btn primary", function(){
                this.hide();
            });            
            SM1.show({
                  "model":"modal",
                  "title":"noticia sersa se jodio",
                  "contents":"<p><img src=./uploads/imagen013-101124685.jpg width=100 border=0><p>asasasas</p></p>"
            });
          })
  });
    </script>
        <link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
<br><br>
            <ul>
          <li id="modal2">
                <a href="#">Noticia 2</a>            
          </li>
        </ul>
            <ul>
          <li id="modal1">
                <a href="#">noticia sersa se jodio</a>            
          </li>
        </ul> 

-------------
El problema es que solamente aparece el ultimo popup y no hace nada en los anteriores.

Agradezco mucho la ayuda que puedan brindarme.

Saludos

Americo:o

darkamerico 29-05-2014 23:13:27

La BD para complementar
 
Estructura:

Código SQL [-]
CREATE TABLE sersaportal.noticias (
  id_noticia int(11) DEFAULT NULL,
  title varchar(100) DEFAULT NULL,
  body text DEFAULT NULL,
  foto varchar(255) DEFAULT NULL,
  thumb varchar(255) DEFAULT NULL,
  fecha_reg varchar(10) DEFAULT NULL,
  anio varchar(4) DEFAULT NULL,
  mes varchar(2) DEFAULT NULL
)
ENGINE = INNODB
AVG_ROW_LENGTH = 8192
CHARACTER SET latin1
COLLATE latin1_swedish_ci;

Datos:

Código SQL [-]
SET NAMES 'utf8';
INSERT INTO sersaportal.noticias(id_noticia, title, body, foto, thumb, fecha_reg, anio, mes) VALUES
(1, 'noticia sersa se jodio', '<p>asasasas</p>', './uploads/imagen013-101124685.jpg', './uploads/imagen013-101124685.jpg', '28/05/2014', '2014', '05');
INSERT INTO sersaportal.noticias(id_noticia, title, body, foto, thumb, fecha_reg, anio, mes) VALUES
(2, 'Noticia 2', '<p>Tu saes maestro asi son las cosas:</p>\r\n<ul>\r\n<li>Uno</li>\r\n<li>Dos</li>\r\n<li>Tres</li>\r\n</ul>', './uploads/imagen013-101124685.jpg', './uploads/thumb_imagen013-101124685.jpg', '29/05/2014', '2014', '05');

Cita:

Empezado por darkamerico (Mensaje 476997)
Saludos estimados amigos: Estoy utilizando un script para que aparezca una ventana popup cuando haga clic sobre un texto, el código es el siguiente:

Código:

<head>
    <meta charset="utf-8" />
    <title>Simple Modal Dialog</title> 
    <link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
   
    <?php
                $sql_NoticiaX='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
                      FROM noticias
                      ORDER BY fecha_reg DESC
                      LIMIT 12';
                $res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
                while($dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
        ?>
    <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
                  $("modal<?= $dato['id_noticia'] ?>").addEvent("click", function(e){
                            e.stop();
                            var SM<?= $dato['id_noticia'] ?> = new SimpleModal({"btn_ok":"Ok"});
                SM<?= $dato['id_noticia'] ?>.addButton("Ok", "btn primary", function(){
                    this.hide();
                });               
                SM<?= $dato['id_noticia'] ?>.show({
                          "model":"modal",
                          "title":"<?= $dato['title'] ?>",
                          "contents":"<p><img src=<?= $dato['thumb'] ?> width=100 border=0><?= htmlspecialchars_decode($dato['body']) ?></p>"
                });
                  })
  });
    </script>
  <?php
          }
  ?>
          <link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>

En el Body:

Código:

<body>
<br><br>
        <?php
                $sql_NoticiaX='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
                      FROM noticias
                      ORDER BY fecha_reg DESC
                      LIMIT 12';
                $res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
                while($dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
        ?>
                <ul>
                  <li id="modal<?= $dato['id_noticia'] ?>">
                                <a href="#"><?= $dato['title'] ?></a>                       
          </li>
            </ul>
        <?php
                }
        ?>       

</body>

--------------------------------------------

El Codigo fuente resultante de esto es:

Código:

<head>
    <meta charset="utf-8" />
    <title>Simple Modal Dialog</title> 
    <link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
   
        <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
                  $("modal2").addEvent("click", function(e){
                            e.stop();
                            var SM2 = new SimpleModal({"btn_ok":"Ok"});
                SM2.addButton("Ok", "btn primary", function(){
                    this.hide();
                });               
                SM2.show({
                          "model":"modal",
                          "title":"Noticia 2",
                          "contents":"<p><img src=./uploads/thumb_imagen013-101124685.jpg width=100 border=0><p>Tu saes maestro asi son las cosas:</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul></p>"
                });
                  })
  });
    </script>
      <script type="text/javascript" charset="utf-8">
    window.addEvent("domready", function(e){
                  $("modal1").addEvent("click", function(e){
                            e.stop();
                            var SM1 = new SimpleModal({"btn_ok":"Ok"});
                SM1.addButton("Ok", "btn primary", function(){
                    this.hide();
                });               
                SM1.show({
                          "model":"modal",
                          "title":"noticia sersa se jodio",
                          "contents":"<p><img src=./uploads/imagen013-101124685.jpg width=100 border=0><p>asasasas</p></p>"
                });
                  })
  });
    </script>
            <link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
<br><br>
                        <ul>
                  <li id="modal2">
                                <a href="#">Noticia 2</a>                       
          </li>
            </ul>
                        <ul>
                  <li id="modal1">
                                <a href="#">noticia sersa se jodio</a>                       
          </li>
            </ul>
               

</body>

-------------
El problema es que solamente aparece el ultimo popup y no hace nada en los anteriores.

Agradezco mucho la ayuda que puedan brindarme.

Saludos

Americo:o


Ñuño Martínez 03-06-2014 13:08:33

Supongo que el problema está en Mootools, en si lo usas bien o no. Por desgracia no parece que aquí haya mucha gente que lo use....


La franja horaria es GMT +2. Ahora son las 21:09:05.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Traducción al castellano por el equipo de moderadores del Club Delphi