PHP - PHP y Javascript

 
Vista:
Imágen de perfil de Americo

PHP y Javascript

Publicado por Americo (7 intervenciones) el 29/05/2014 03:28:14
Saludos amigos, Tengo una aplicacion en JavaScript para sacar una ventana PopUp cuando se hace click en un texto.

La aplicacion que quiero hacer tomará ese script como base para que ese texto salga a partir de una BD, ya que es el titulo de una noticia que esta en una tabla en MySQL.

El Script es este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript" charset="utf-8">
 
    window.addEvent("domready", function(e){
	/* Modal */
  	$("modal").addEvent("click", function(e){
   	 e.stop();
  	  var SM = new SimpleModal({"btn_ok":"Confirm button"});
        // Aggiunge Bottone Conferma
        SM.addButton("Confirm", "btn primary", function(){
            alert("Action confirm modal");
            this.hide();
        });
        // Aggiunge Bottone annulla
        SM.addButton("Cancel", "btn");
        SM.show({
          "model":"modal",
          "title":"Titulo",
          "contents":"<p ><img style='text-align:center' src='assets/images/simpleModalSmallWhite.png' />AA</p>"
        });
  })
  });
    </script>

Bien, dentro del body tengo esto:

<body>
<ul>
<li id="modal"><a href="#">Titulo de Noticia X</a></li>
</ul>
</body>

El codigo anterior funciona correctamente asi como esta, el problema viene cuando deseo integrar PHP / Mysql, con algo como esto:

1
2
3
4
5
6
7
8
9
10
$sql_Noticias='SELECT noticias.id_noticia, noticias.title
                           FROM noticias
                           ORDER BY fecha_reg DESC
                           LIMIT 12';
			$res_sqlNoticias=$mysqli2->query($sql_Noticias);
                       echo '<ul>';
			while($noticiax=$res_sqlNoticias->fetch_array()) {
				echo '<li id=modal>' .  $noticiax['title'] . '</li>';
			}
                       echo '</ul>';

EL problema como se ve es que no hay forma de saber en que Noticia hice click a fin de enviar el ID y mostrar en detalle correspondiente a la noticia en la ventana popup.

Agradezco mucho la ayuda prestada.

Atacho el script javascript completo.

Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.943
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

PHP y Javascript

Publicado por xve (6935 intervenciones) el 29/05/2014 10:11:28
Hola Americo, creo que hay algo que no me cuadra...

Cuando añades los titulos de las noticias a la lista (li), porque no pones en el id el id de la noticia?

La teoría dice que no se puede repetir ningún id, y tu siempre esta poniendo el id modal que no se que significa, pero si ahí pones el id de la noticia, ya lo tienes, no?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Americo

PHP y Javascript

Publicado por Americo (7 intervenciones) el 29/05/2014 17:12:21
Hola xve, gracias por contestar. Me quede pensando en lo que dijiste e hice varios cambios que a continuación te muestro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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><?= htmlspecialchars_decode($dato['body']) ?></p>"
        	});
  		})
  });
    </script>
  <?php
  	}
  ?>

Y en Body:

<?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
}
?>

Y en Body:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?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
		}
	?>

Con ello queda resuelto el tema de los ids, sin embargo cuando corro el script, solamente funciona la ventana en el ultimo enlace, los primeros no.

El código fuente resultante de este PHP es:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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><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><p>asasasas</p></p>"
        	});
  		})
  });
    </script>

Y en Body:

1
2
3
4
5
6
7
8
9
10
<ul>
		  <li id="modal2">
				<a href="#">Noticia 2</a>			
          </li>
	    </ul>
			<ul>
		  <li id="modal1">
				<a href="#">noticia sersa se jodio</a>			
          </li>
	    </ul>

Intuyo que la solución ya esta cerca.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.943
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

PHP y Javascript

Publicado por xve (6935 intervenciones) el 29/05/2014 18:01:55
Si modal1 y modal2 son id's, tienes que gestionarlo así, no? $("#modal...") con el #... que veo que no lo has puesto.

Puede ser ese el problema?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Americo

PHP y Javascript

Publicado por Americo (7 intervenciones) el 29/05/2014 18:39:18
negativo hermano, cuando agrego el # simplemente no me anda nada el script.

Ahí te envio el archivo para que le des una chequeada.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.943
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

PHP y Javascript

Publicado por xve (6935 intervenciones) el 29/05/2014 22:09:48
Hola Americo, gracias por adjuntarnos el código, pero al haber tanta mezcla de js con php, y sin tener la base de datos, la verdad es que no se que hace.

Te adjunto este simple código de ejemplo, haber si te sirve:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Simple Modal Dialog</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
		$(".evento").click(function(){
			window.alert("Has dado en el id: "+$(this).attr("id"));
		});
	});
    </script>
</head>
<body>
	<ul>
		<li id="modal1" class="evento">
			<a href="#">1</a>			
		</li>
		<li id="modal2" class="evento">
			<a href="#">1</a>			
		</li>
		<li id="modal3" class="evento">
			<a href="#">1</a>			
		</li>
	</ul>
</body>
</html>

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Americo

PHP y Javascript

Publicado por Americo (7 intervenciones) el 29/05/2014 22:49:27
En verdad valoro tu ayuda amigo xve, la verdad pocos foros ofrecen ayuda como aquí, por eso dejo todo el código necesario a fin de llegar a determinar cual pueda ser el error, ya que no doy en ello.

La Base de Datos, para información complementaria:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:

1
2
3
4
5
SET NAMES 'utf8';
INSERT INTO sersaportal.noticias(id_noticia, title, body, foto, thumb, fecha_reg, anio, mes) VALUES
(1, 'Titulo X', 'Cuerpo de la Noticia X', './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, 'Titulo Y', 'Cuerpo de la  Noticia Y', './uploads/imagen013-101124685.jpg', './uploads/thumb_imagen013-101124685.jpg', '29/05/2014', '2014', '05');
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar