How can I rename the name of a tab element in materializecss?

Question

How can I rename the name of a tab element in materializecss?

Navigation

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

1

Hello Stackoverflow people, I hope you have a great day. I'm working on a project and I have to use the tabs elements of the Materializecss framework (a material design framework). Basically I want to achieve the following behavior in the tab element: the user must be able to edit the name of the tab element by double clicking on the current name, you must be able to edit the name as many times as you want by double clicking on the name you already have. The materialize tab element is shown in the following image:

In this image, you can see that there are two tabs (also called tabs), well, I want that by double clicking, for example, in the name "NEWFILTER" (name of the first tab) you unlock or automatically appear a text box with the current name "new filter" and the possibility to delete that text and enter a new name. When the user finishes, press the enter key and the new name should automatically be placed as the name of the current tab. They understand me??? How can I do that with jquery or javascript? Any ideas? Here is the code of the materializecss tab element:

<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"><a class="active" href="#test1">NEWFILTER</a></li>
        <li class="tab col s3"><a href="#test2">New Tab</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">BODY TAB 1</div>
    <div id="test2" class="col s12">BODY TAB 2</div>
  </div>

javascript jquery html5 php materialize

asked by RolandF 26.12.2017 в 05:43

source

3 answers

Save a numeric value separated by commas in a variable sql server 2008 Problem with value that Ajax returns when sending mail, even if it is successful

score 1 · Answer 1

This is not saved, it's only visual.

$(document).ready(function() {
  $("#btnA2").click(function() {
    var txt = document.getElementById('txtA2').value;
    $('#txtT2').replaceWith('<a id="txtT2" class="active" href="#test2">' + txt + '</a>');
  });
});
$(document).ready(function() {
  $("#btnA1").click(function() {
    var txt = document.getElementById('txtA1').value;
    $('#txtT1').replaceWith('<a id="txtT1" class="active" href="#test1">' + txt + '</a>');
  });
});

<html lang="es">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <link rel="stylesheet" href="css/estilos_confirmacion.css">
  <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>
</head>

<body>
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a id="txtT1" class="active" href="#test1">NEWFILTER</a></li>
        <li class="tab col s3"><a id="txtT2" href="#test2">New Tab</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">
      Cambiar Nombre <input type="text" name="txtA1" id="txtA1" value="" />
      <input class="btn" type="button" value="guardar" id="btnA1" name="btnA1" />
    </div>
    <div id="test2" class="col s12">
      Cambiar Nombre <input type="text" name="txtA2" id="txtA2" value="" />
      <input class="btn" type="button" value="guardar" id="btnA2" name="btnA2" />
    </div>
  </div>
</body>
</html>

score 1 · Answer 2

You must use contenteditable = true so that you can edit the text and when you press enter it should be saved in your bd so that the next one is loaded with that name.

document.getElementById('changeName').addEventListener('keydown', inputCharacters);

function OnFocusTab(element) {
  element.contentEditable = true;
  setTimeout(function() {
    if (document.activeElement !== element) {
      element.contentEditable = false;
    }
  }, 300);
}

function inputCharacters(element) {
  var txt = document.getElementById('name').innerHTML;
  if (event.keyCode == 13) {
    $('#name').replaceWith('<a id="txtT2" href="#test2">' + txt + '</a>');
  }
}

<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 id='changeName' onclick="OnFocusTab(this);" class="tab col s3"><a class="active" href="#test1"><span id='name'>NEWFILTER</span></a></li>
      <li class="tab col s3"><a id="a2" href="#test2"><span id='name2'>New Tab</span></a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">BODY TAB 1</div>
  <div id="test2" class="col s12">BODY TAB 2</div>
</div>

according to the OP , it has to be by double clicking on the name of the tab, not a single click, because if you click on it you should not allow me to edit the name, only when you double it click.

element.contentEditable = true; // por defecto ponemos al elemento como editable
      setTimeout(function() { // si pasa 3milisegundos y no esta activado el elemento seteamos con No-editable
        if (document.activeElement !== element) {
          element.contentEditable = false;
        }
      }, 300);

score 0 · Answer 3

Hello what you need to use a programming language on the server, if you are in local (local server: xampp, lampp, wampp), you can use PHP to create a small crud to edit element information.

Here is a small information about the CRUD that can help you: CRUD

If you use Jquery, JavaScript information will only be stored literally in the client (browser) and if you reload the browser again the data will return to its default state.

Web programming: server-side and client-side languages The web works according to a really simple principle: the web servers host the contents and the clients request them by HTTP or FTP, understanding by clients the browsers (Mozilla Firefox or Google Chrome) installed in the user's system, where they are executed. On the contrary, web servers, such as Apache or NGINX, are part of web development projects, are installed and run in this environment and allow customers access to content.

Static contents, such as classic HTML elements or images, are simply sent to the browser and visualized there, dynamic contents, such as a Wiki, a drop-down menu or any type of web application only work through scripts , which must be executed and interpreted with the corresponding web programming language on the server side or on the client side. This is why it differs fundamentally between server-side programming languages and client-side languages.