0

Estimados amigos y colegas de stack overflow les escribo porque tengo un problema en una pequeña web que estoy desarrollando; al diseñar el sito web decidí utilizar materialize css porque me parece que se adapta mejor al desarrollo de dispositivos móviles aunque en esto del desarrollo soy aun un bebe.

El caso es que con materialize css tengo dos códigos uno en ajax o jquery el primero ejecuta una sentencia permite cargar por ajax una consulta realizada a un archivo php que a su vez tiene un arreglo para consultar informacion en la base de datos; el caso es que al ejecutar solo la consulta sin el materialize la variable que inicializa los select es decir en html puro los select funcionan correctamente pero al inicializar las variables del materialize para ajustar los select los select se renderizan correctamente pero las listas dependientes dejan de funcionar.

Este es el código.

function CargarMarcas(val) {
  $('#respuesta').html("Por favor espera un momento");
  $.ajax({
    type: "POST",
    url: 'consulta.php',
    data: 'idmarca=' + val,
    success: function(resp) {
      $('#modelos').html(resp);
      $('#respuesta').html("");
    }
  });
};

$(document).ready(function() {
  $('select').material_select();
});
<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Autolavado JF 2006, C.A. - Solicitar Cita</title>

  <?php require('templates/head.php');?>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

</head>

<body>

  <?php include('templates/header1.php');?>

  <main class="container">


    <div class="row">
      <div class="col s12">
        <div class="card white darken-1">
          <div class="card-content black-text">
            <span class="card-title center">Planilla de Solictud de Cita</span>

            <p>Por favor rellene todos los campos solicitados tenga encuenta que para solicitar su cita y acceder al servicio de cambio de aceite debera presentarse con la planilla impresa y el carnet de circulacion del vehiculo el dia de la cita asignada;
              de lo contrario usted no podra ser atendido.</p>


            <p>


              <form action="<?php echo $editFormAction; ?>" method="POST" name="solicitarcita" id="solicitarcita">
                <p>


                  <input type="text" name="nombrecarnet" id="nombrecarnet">
                  <br>

                  <input type="text" name="identificacioncarnet" id="identificacioncarnet">

                  <input type="text" name="telefono" id="telefono">

                  <input type="text" name="correoelectronico" id="correoelectronico">

                  <input type="text" name="placa" id="placa">

                  <input type="text" name="numerocarnet" id="numerocarnet">

                  <!--Aqui se cargaran las marcas-->


                  <label for="idmarca"></label>
                  <div class="input-field col s12">
                    <select id="marcas" onchange="CargarMarcas(this.value);" name="marcas">
                      <option>-Selecciona una Marca-</option>
                      <?php
                      require('conexion.php');
                      $query = 'SELECT * FROM marca';
                      $result = mysqli_query($con, $query);
                      while($row = mysqli_fetch_array($result, MYSQL_ASSOC))
                      {
                          echo '<option value="' .$row["id_marca"]. '">' .$row["marca"]. '</option>';
                      }
                mysqli_close($con);
                      ?>
                    </select>
                    <div>

                      <!--Aqui se cargaran los modelos-->

                      <select name="modelos" id="modelos">
                        <option>-Seleccione un Modelo-</option>
                      </select>

                      <!--Aqui se cargaran los lubricantes-->

                      <select name="idlubricante" id="idlubricante">
                        <option value="">-Seleccione uno Lubricante</option>
                        <?php
          do {  
          ?>
                          <option value="<?php echo $row_activos['id_lubricante']?>">
                            <?php echo $row_activos['descripcionvassa']?>
                          </option>
                          <?php
          } while ($row_activos = mysql_fetch_assoc($activos));
            $rows = mysql_num_rows($activos);
            if($rows > 0) {
                mysql_data_seek($activos, 0);
              $row_activos = mysql_fetch_assoc($activos);
            }
          ?>
                      </select>

                      <input type="text" name="litros" id="litros">

                      <input name="id_usuario" type="hidden" id="id_usuario" value="<?php echo $row_usuario['ID_User']; ?>">
                      <input type="hidden" name="MM_insert" value="solicitarcita">

                      <button class="btn waves-effect waves-light green col s12" type="submit" name="action">Iniciar Secion
                    <i class="material-icons right">date_range</i>
                    </button>

              </form>

              </p>
              </div>
              <div class="card-action">
                <a href="index.php" class="red-text">Regresar al panel principal</a>
                <a href="consultarcita.php" class="blue-text float right">Consultar Cita</a>
              </div>
              </div>
          </div>
        </div>

  </main>
  <!--Incluye el pie de pagina-->
  <?php include('templates/footer1.php');?>
  <!--Inicializacion de variales para materializecss-->
  <?php include('templates/jscarga.php');?>



  <script>
    function CargarMarcas(val) {
      $('#respuesta').html("Por favor espera un momento");
      $.ajax({
        type: "POST",
        url: 'consulta.php',
        data: 'idmarca=' + val,
        success: function(resp) {
          $('#modelos').html(resp);
          $('#respuesta').html("");
        }
      });
    };
  </script>

  <script>
    $(document).ready(function() {
      $('select').material_select();
    });
  </script>


</body>

Me gustaría lograr que mi slect dependientes tambien funcionen junto con el materializecss como cuando funcionan sin los estilos y este fremework css.

2
  • Iván indica por favor qué es lo que no funciona en el código (qué select) y cuál es el comportamiento: da error, no hace nada, hace otra cosa distinta de la que esperas. Tú hablas de select dependientes, los cuales se manejarían en un evento change de Javascript (o sea, cuando un select cambia cambiaría el contenido del select dependiente). No veo que manejes en tu código eventos change ¿?
    – A. Cedano
    el 27 ene. 2019 a las 12:55
  • Hola buenas tarde gracias por tu respuesta te comento que entre pruebas y pruebas tuve que realizar lo siguiente en mi código, la idea era que al momento de ejecutar el select la lista dependiente del select 1 se filtrara y se mostrara en el select dos algo similar a marca y modelo. Resulta que el código de materialize css que causa que el select se active con el estilo del materialize interferia con mí método ajax para sacar la data del select dependiente entonces tuve que usar la condicion browser-default y no usar el codigo de inicializacion de los select.
    – Ivan Ruiz
    el 28 ene. 2019 a las 2:11

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.