Modal of materialize does not open in hosting

Question

Modal of materialize does not open in hosting

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I thank you for entering!
It happens that everything inside the while disappears, if I have a button inside the while and another outside the while, only the one that is outside the while is shown, this is the code that I have:

The HTML is this:

<?php
  include("php/conexion.php");
  while($v = mysqli_fetch_array($resultado)){
?>
<li class="dropdown3"><a href="#modal<?php echo $v['id'] ?>" class="modal-trigger"><?php echo $v['titulo'] ?></a></li>
<?php
  }
?>

The PHP:

<?php
    $host_name = 'asd';
	$database = 'db7185617051';
	$user_name = 'dbo7185617051';
	$password = 'dsa';
	$connect = mysqli_connect($host_name, $user_name, $password, $database);

	if (mysqli_connect_errno()) {
		die('<p>Failed to connect to MySQL: '.mysqli_connect_error().'</p>');
	} else {
		$query = "SELECT * FROM informacion";
		$resultado = mysqli_query($conexion,$query);
	}
?>

Thank you very much!

mysql html5 php materialize modal

asked by Gabriel Benitez 11.01.2018 в 23:16

source

2 answers

How to enter the local date in a mysql field I do not work the .load in laravel

score 0 · Answer 1

Try this in your js

$(document).ready(function(){
        $("#btnTriggerModal").on("click", function() { //Agrega un ID a tu botón
            $('.modal').modal();
            $('#modal2').modal('open');
        });
    });
});

score 0 · Answer 2

You can not assign the same id to several elements, the id must be unique, they can not be repeated. Within the while you always generate the same ìd so that each modal that is generated repeats the id :

<?php
  include("php/conexion.php");
  while($fila = mysqli_fetch_array($resultado)){
?>
<div id="modal2" class="modal">
  ...
</div>
<?php
}
?>

You could generate the link and the modal at the same time:

<?php
  include("php/conexion.php");
  while($fila = mysqli_fetch_array($resultado)){
?>

<a class="waves-effect waves-light btn modal-trigger" href="#modal<?= $fila['id'] ?>">Modal <?= $fila['id'] ?></a>

<div id="modal<?= echo $fila['id'] ?>" class="modal">
  <div class="modal-content info-modal">
      <img class="info-img" src="img.jpg">
      <h3 class="info-title"><?php echo $fila['titulo'] ?></h3>
      <ul class="collapsible" data-collapsible="accordion">
          <li>
              <div class="collapsible-header"><i class="material-icons">touch_app</i>¿Qué es esto?</div>
              <div class="collapsible-body"><span><?php echo $fila['que-es'] ?></span></div>
          </li>
          <li>
              <div class="collapsible-header"><i class="material-icons">help</i>¿Para que sirve?</div>
              <div class="collapsible-body"><span><?php echo $fila['para-que-sirve'] ?></span></div>
          </li>
          <li>
              <div class="collapsible-header"><i class="material-icons">build</i>¿Cómo se usa?</div>
              <div class="collapsible-body"><span><?php echo $fila['como-se-usa'] ?></span></div>
          </li>
          <li>
              <div class="collapsible-header"><i class="material-icons">dvr</i>Más comandos</div>
              <div class="collapsible-body"><span><?php echo $fila['mas-comandos'] ?></span></div>
          </li>
          <li>
              <div class="collapsible-header"><i class="material-icons">burst_mode</i>Más imágenes</div>
              <div class="collapsible-body"><span><?php echo $fila['imagenes'] ?></span></div>
          </li>
      </ul>
  </div>
  <div class="modal-footer">
      <a href="https://discord.gg/Gq8pjvc" target="_blank" class="modal-action modal-close deep-orange darken-2 white-text waves-effect waves-green btn-flat tooltipped" data-position="left" data-delay="50" data-tooltip="Soporte en el canal de Discord">Tengo un problema</a>
      <a href="#!" class="modal-action modal-close green darken-1 white-text waves-effect waves-green btn-flat">¡Gracias! :D</a>
  </div>
</div>

<?php
 }
?>

Staying something like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <!-- Compiled and minified CSS -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>

  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal 1</a>

  <div id="modal1" class="modal">
    <div class="modal-content info-modal">
        <img class="info-img" src="img.jpg">
        <h3 class="info-title">modal 1</h3>
        <ul class="collapsible" data-collapsible="accordion">
            <li>
                <div class="collapsible-header"><i class="material-icons">touch_app</i>¿Qué es esto?</div>
                <div class="collapsible-body"><span><?php echo $fila['que-es'] ?></span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">help</i>¿Para que sirve?</div>
                <div class="collapsible-body"><span><?php echo $fila['para-que-sirve'] ?></span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">build</i>¿Cómo se usa?</div>
                <div class="collapsible-body"><span><?php echo $fila['como-se-usa'] ?></span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">dvr</i>Más comandos</div>
                <div class="collapsible-body"><span><?php echo $fila['mas-comandos'] ?></span></div>
            </li>
            <li>
                <div class="collapsible-header"><i class="material-icons">burst_mode</i>Más imágenes</div>
                <div class="collapsible-body"><span><?php echo $fila['imagenes'] ?></span></div>
            </li>
        </ul>
    </div>
    <div class="modal-footer">
        <a href="https://discord.gg/Gq8pjvc" target="_blank" class="modal-action modal-close deep-orange darken-2 white-text waves-effect waves-green btn-flat tooltipped" data-position="left" data-delay="50" data-tooltip="Soporte en el canal de Discord">Tengo un problema</a>
        <a href="#!" class="modal-action modal-close green darken-1 white-text waves-effect waves-green btn-flat">¡Gracias! :D</a>
    </div>
  </div>


  <a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal 2</a>

    <div id="modal2" class="modal">
  <div class="modal-content info-modal">
    <img class="info-img" src="<?php echo $fila['img'] ?>">
    <h3 class="info-title">modal 2</h3>
    <ul class="collapsible" data-collapsible="accordion">
      <li>
        <div class="collapsible-header"><i class="material-icons">modal2</div>
        <div class="collapsible-body"><span><?php echo $fila['que-es'] ?></span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">help</i>¿Para que sirve?</div>
        <div class="collapsible-body"><span><?php echo $fila['para-que-sirve'] ?></span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">build</i>¿Cómo se usa?</div>
        <div class="collapsible-body"><span><?php echo $fila['como-se-usa'] ?></span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">dvr</i>Más comandos</div>
        <div class="collapsible-body"><span><?php echo $fila['mas-comandos'] ?></span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">burst_mode</i>Más imágenes</div>
        <div class="collapsible-body"><span><?php echo $fila['imagenes'] ?></span></div>
      </li>
    </ul>
  </div>
  <div class="modal-footer">
    <a href="https://discord.gg/Gq8pjvc" target="_blank" class="modal-action modal-close deep-orange darken-2 white-text waves-effect waves-green btn-flat tooltipped" data-position="left" data-delay="50" data-tooltip="Soporte en el canal de Discord">Tengo un problema</a>
    <a href="#!" class="modal-action modal-close green darken-1 white-text waves-effect waves-green btn-flat">¡Gracias! :D</a>
  </div>
  </div>

  <script type="text/javascript">
    $(document).ready(function(){
      // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
      $('.modal').modal();
    });
  </script>

</body>
</html>