0

Tengo un problema al cargar contenido a través de un enlace. Cuando presiono la opción de 'empleados' me carga el formulario que quiero pero cuando lo hago en la opción de 'cliente' no carga nada (tiene que cargar el mismo formulario). La pagina que tiene que cargar es un formulario para rellenar datos; igual para empleados y clientes. Adjunto el código.

$(document).ready(function(){
  $('.collapsible').collapsible();
});

$(document).ready(function() {
  $('#altaEmpCli').on('click', function() {
      $('.navega li').removeClass('active');
      $("#contenido").load('inc/emplcli.php');
        return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet">
<div class="row">
  <div class="col s3">
    <ul class="collapsible navega">
      <li class="active">
        <div class="collapsible-header"><a href="#">GESTIÓN EMPLEADOS</a></div>
        <div class="collapsible-body">
          <ul>
            <li><a id="altaEmpCli" href="#">Empleados</a></li>
          </ul>
        </div>
   	  </li>
	  <li>
        <div class="collapsible-header"><a href="#">GESTIÓN CLIENTES</a></div>
  	    <div class="collapsible-body">
  	      <ul>
   	        <li><a id="altaEmpCli" href="#">Clientes</a></li>
  	      </ul>
  	    </div>
      </li>
	</ul>
  </div>
  <div class="col s9">
    <div class="container" id="contenido"></div>
  </div>
</div>

Gracias!!

1
  • los ID deben ser únicos, sino sólo te va a tomar el primero que encuentre. tendrías que usar una clase así le asigna el click a todos el 15 ago. 2018 a las 6:20

2 respuestas 2

1

No se si es lo que buscas, pero si es un formulario, puedes tratar de colocarlo con JavaScript, con clases de manera de que ya el mismo exista en la pagina. Pondré un ejemplo...

Ahora, en cuanto al problema en si, esto pasa porque pones el #altaEmpCli como un id, los ids es el nombre único que se le pone a una etiqueta por lo tanto solo existe uno. Al ejecutarse el código si ya una etiqueta tiene un id sin importar cuantas veces la coloques abajo, siempre va a tomar la primera y va a ignorar las de mas etiquetas con este nombre.

La solucion es simple, cambia las etiquetas que quieras reutilizar para equis motivo, de id a class.

Dejo el código para que lo observes sin php.

$(document).ready(function(){
  $('.collapsible').collapsible();
});

$(document).ready(function() {
  $('.altaEmpCli').on('click', function() {
      $('.navega li').toggleClass('active');
      $("#formContent").toggleClass("formContent");
      $("#formContent").toggleClass("none");
      //$("#contenido").load('inc/emplcli.php');
        return false;
  });
});
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.formContent {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    position: relative;
}

.exit {

  height: 20px;
  width: 20px;
  border: none;
  border-radius: 50%;
  background-color: red;
  color: white;
  cursor: pointer;
  float: right;
  font-size: 10px;

}
.none {

display: none;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet">
<div class="row">
  <div class="col s3">
    <ul class="collapsible navega">
      <li class="active">
        <div class="collapsible-header"><a href="#">GESTIÓN EMPLEADOS</a></div>
        <div class="collapsible-body">
          <ul>
            <li><a class="altaEmpCli" href="#">Empleados</a></li>
          </ul>
        </div>
   	  </li>
	  <li>
        <div class="collapsible-header"><a href="#">GESTIÓN CLIENTES</a></div>
  	    <div class="collapsible-body">
  	      <ul>
   	        <li><a class="altaEmpCli" href="#">Clientes</a></li>
  	      </ul>
  	    </div>
      </li>
	</ul>
  </div>
  <div class="col s9">
    <div class="container" id="contenido">
    <!--edit-->
    <div id="formContent" class="none">
    <button class="altaEmpCli exit" type="button" class="exit">x</button>
  <form action="/pagina_destino.php">
    <label for="fname">Nombre</label>
    <input type="text" id="fname" name="firstname" placeholder="Tu nombre..">

    <label for="lname">Apellido</label>
    <input type="text" id="lname" name="lastname" placeholder="Tu apellido..">

    <label for="country">Pais</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
  
    <input type="submit" value="Enviar">
  </form>
</div>
    
    </div>
  </div>
</div>

1

El problema lo tienes aquí:

<li><a id="altaEmpCli" href="#">Empleados</a></li>

<li><a id="altaEmpCli" href="#">Clientes</a></li>

Cuando hay varios elementos con un mismo ID y le dices a JavaScript que realice una función con los elementos de ese ID, solo va a funcionar con el primer elemento del DOM que tenga ese ID (desde arriba hacia abajo en el código).

Por tanto, aquí lo que estás haciendo es llamar a una función SOLO PARA EL PRIMER ELEMENTO LLAMADO "#altaEmpCli". Por eso te funciona con el apartado "Empleados" pero no con "Clientes".

$('#altaEmpCli').on('click', function() {
      $('.navega li').removeClass('active');
      $("#contenido").load('inc/emplcli.php');
        return false;
  });

Solución: pon a cada elemento un ID distinto y llama a la función una vez por cada ID. Recuerda que nunca se debe nombrar a más de un elemento con el mismo ID, ya que este debe ser único. Si quieres tener varios elementos que se comporten igual utiliza class en vez de id.

Si por lo que sea estás obligado a usar id, aunque no es lo aconsejable, y siempre que el .php al que llames sea el mismo, puedes usar la función de jQuery .each, que recorre todos los elementos del selector utilizado y hace algo con cada uno de ellos.

https://www.anerbarrena.com/jquery-each-5297/

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.