Nueva pregunta

Pregunta:

Fecha: 27-12-2017 12:12:43 (En Español)

Ayuda!!! Cómo cambiarle el nombre dinamicamente a un elemento tab (pestaña)?? Materializecss[Resuelta]

Hola a todos, veran estoy diseñando un formulario el cual formara parte del body de una pestaña (tab). Lo que yo deseo es que al darle doble click al nombre de la pestaña automaticamente se me coloque un campo de texto donde podre renombrar la pestaña y al darle en la tecla "Enter" automaticamente se establezca ese nuevo texto como el nombre de la pestaña. Ese nombre luego se guardara en una base de datos y desde ahi se llamara, esto es para que a la hora de actualizar la pagina no se pierdan los cambios realizados. Estoy utilizando el framework Materializecss, es un framework de diseño basado en Material design
Tengo este codigo con un script pero no me esta funcionando al 100% pues cuando le doy "enter" se queda el mismo campo de texto, la idea es que cuando le de enter se quite el campo de texto.

dejare el codigo para que lo puedan ver:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<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/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3" id="first"><a class="active" id="Tab1" href="#test1">New Filter</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="NEW FILTER"/></li>
        <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">
      texto de la primera pestaña</div>
    <div id="test2" class="col s12">Texto de la segunda pestaña</div>
  </div>



input1 = $("#inputTab1").val();
  text1 = $("#Tab1").text();

$("#Tab1").dblclick(function () {
        $("#Tab1").remove();
        $("#inputTab1").attr("type", "text");
        input1 = $("#inputTab1").val();
});

$('#Tab1').keyup(function(e) {
    if(e.keyCode == 13) {
      $("#inputTab1").attr("type", "hidden");
      $("#first").after('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
    }
});


en esta imagen se ilustra como son las tabs de materializecss...

No se que esta mal con mi codigo, tal vez no se configura bien la accion de la tecla "enter"... Alguna ayuda con este problema?
Etiquetas: Aporte - Array Javascript - CSS - CSS3 - CSS3 @media - Empezar a programar - Formulario - Framework - HTML - HTML5 - Javascript - Javascript JSON - JQuery - MySQL - PHP - Pregunta - Web Votos: 1 - Respuestas: 4 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 28-12-2017 15:57:04 Puedes realizarlo asi:

    <div class="row">
        <div class="col s12">
          <ul class="tabs">
            <li class="tab col s3" id="first"><a class="active" id="Tab1" href="#test1">Nombre Actual</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="Nuevo Nombre"/></li>
            <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
          </ul>
        </div>
        <div id="test1" class="col s12">
          texto de la primera pestaña</div>
        <div id="test2" class="col s12">Texto de la segunda pestaña</div>
      </div>
    


    //Obtengo el dobre clic en la tab
    $("#Tab1").dblclick(function () {
            $("#Tab1").remove();
            $("#inputTab1").attr("type", "text");
            $("#inputTab1").focus();
    });
    
    //Detecto el keyup para ver cuando den enter
    $('#inputTab1').on('keyup', function(e) {
        if(e.keyCode === 13) {
        		//Valor del imput
            var input1 = $(this).val();
            //Agrego el enlace antes del imput dentro de la li para que quede como al inicio
            $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
            //Limpio el campo
            $("#inputTab1").val("");
            //Oculto el campo
            $("#inputTab1").attr("type", "hidden");
            
            //Reinicio el monitoreo del doble clic o ciclo
            $("#Tab1").dblclick(function () {
            //Ya sabes el resto
              $("#Tab1").remove();
              $("#inputTab1").attr("type", "text");
              $("#inputTab1").focus();
            });
    
        }
    });
    


    MUESTRA

    Prueba y cuentanos. Saludos
      Votos: 2 - Link respuesta
     
  • Fecha: 28-12-2017 17:15:28 Wow me gusta mucho tu script la verdad me sirve muchisimo. Solo hay un pequeñito detalle, cuando se le da el doble click aparece el campo de texto vacio y un placeholder que dice "Nuevo Nombre", qu'e se le podria agregar para hacer que al darle doble click aparezca el nombre que ya tiene el campo se borre ese nombre, se escriba el nuevo y luego se le da el enter para que quede guardado?... agregarle algo para que cuando se le de doble click en vez de aparecer el campo de texto vacio aparezca el nombre que tiene actual y asi poder borrarlo uno mismo. De antemano muchisimas gracias por el aporte.   Votos: 0 - Link respuesta
     
  • Fecha: 29-12-2017 02:05:00
    //Obtengo el dobre clic en la tab
    $("#Tab1").dblclick(function () {
    				var texto = $("#Tab1").text();
            $("#Tab1").remove();
            $("#inputTab1").attr("type", "text");
            $("#inputTab1").val(texto);
            $("#inputTab1").focus();
    });
    
    //Detecto el keyup para ver cuando den enter
    $('#inputTab1').on('keyup', function(e) {
        if(e.keyCode === 13) {
        		//Valor del imput
            var input1 = $(this).val();
            //Agrego el enlace antes del imput dentro de la li
            $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
            //Limpio el campo
            $("#inputTab1").val("");
            //Oculto el campo
            $("#inputTab1").attr("type", "hidden");
            
            //Reinicio el monitoreo del doble clic o siclo
            $("#Tab1").dblclick(function () {
            //Ya sabes el resto
              var texto = $("#Tab1").text();
              $("#Tab1").remove();
              $("#inputTab1").attr("type", "text");
              $("#inputTab1").val(texto);
              $("#inputTab1").focus();
            });
    
        }
    });
    


    MUESTRA
      Votos: 1 - Link respuesta
     
  • Fecha: 29-12-2017 04:25:05 Excelente, funciona perfectamente. Muchisimas gracias por su ayuda!!.   Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com