Tengo un HTML div que contiene 3 habitaciones. Lo que necesito es cambiar el nombre de cualquier habitación cuando quiera. El botón "EDITAR NOMBRE DE LA HABITACIÓN" hace que 'contenteditable = "false"'. Después de escribir el nombre deseado, presiono el botón "VALIDAR NOMBRE" pero, como puede ver, el mensaje de alerta muestra el nombre anterior, no el nuevo. Solo cuando hago clic en el nombre de la sala nuevamente, la variable "nameTag" se actualiza y toma el nuevo valor. Mi pregunta es ¿cómo obtengo el valor después de terminar de escribir el nombre deseado?

A continuación se muestra la demostración:

$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        nameTag = $(this).text();
		    })
		    $("#confirmButton").click(function () {
		        PostData(idTag, nameTag);
		    })
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>
1
mecnism 10 sep. 2018 a las 13:00

3 respuestas

La mejor respuesta

Pruebe el siguiente código js.

	$("#editButton").click(function (){
		    var idTag;
		    var nameTag;
		    var roomId;
		    alert("DoubleClick the room you want to rename")
		    $(".roomClass").click(function (){
		        $(this).attr('contenteditable', 'true');
		        idTag = $(this).attr("data-room-id");
		        roomId = $(this).attr("id");
		    });
		    $("#confirmButton").click(function () {
		    	nameTag = $('#'+roomId).text();
		        PostData(idTag, nameTag);
		    });
		})


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}
1
Shivam Kumar 10 sep. 2018 a las 10:33

Utilice var idTag; y var nameTag; como variable pública, había aplicado esta variable dentro de $("#editButton").click() aplíquela fuera

Por favor marque a continuación:

var idTag;
var nameTag;

$("#editButton").click(function (){
    alert("DoubleClick the room you want to rename")
	$(".roomClass").click(function (){
	    $(this).attr('contenteditable', 'true');
		idTag = $(this).attr("data-room-id");
		nameTag = $(this).text();
    })
	
    $("#confirmButton").click(function () {
	    PostData(idTag, nameTag);
	})
})

function PostData(idTag, nameTag) {
    alert(nameTag + ' with id: ' + idTag + ' was renamed!');
}
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
        <button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>
    </div>
</body>
</html>
2
coudy.one 10 sep. 2018 a las 10:32

Puede obtener valor simplemente usando .text() la función jquery me gusta :

var room8Value = $("[data-room-id=8]").text();

Puede verificar este jsfiddle

$("#editButton").click(function (){
    var idTag;
    var nameTag;
    alert("DoubleClick the room you want to rename")
    $(".roomClass").click(function (){
        $(this).attr('contenteditable', 'true');
        idTag = $(this).attr("data-room-id");
        nameTag = $(this).text();
    })
    $("#confirmButton").click(function () {
        PostData(idTag, nameTag);
    })
});


function PostData(idTag, nameTag) {
        alert(nameTag + ' with id: ' + idTag + ' was renamed! to :' + $("[data-room-id="+idTag+"]").text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	 <div class="vertical-menu">
        <h3>ROOM LIST:</h3>
<button id="editButton">EDIT ROOM NAME</button><br>
        <a id="content11" class="roomClass" contenteditable="false" data-room-id="0" style="cursor: pointer;">ROOM1</a><br>
        <a id="content10" class="roomClass" contenteditable="false" data-room-id="9" style="cursor: pointer;">ROOM2</a><br>
        <a id="content9" class="roomClass" contenteditable="false" data-room-id="8" style="cursor: pointer;">ROOM3</a><br>
        <br><br>
        
        <button id="confirmButton">VALIDATE NAME</button>	
        
 
</body>
</html>
6
El Alami Anas 10 sep. 2018 a las 10:35