Update HTML content after click
Update HTML content after click
I have an HTML div that contains 3 rooms. What I need is to change the name of any room when I want. "EDIT ROOM NAME" button makes 'contenteditable="false"'. After I type the desired name, I press the "VALIDATE NAME" button but as you can see, the alert message displays the previous name, not the new one. Only when I click on the room name again the "nameTag" variable refreshes and takes the new value. My question is how do I get the value after I finished typing the desired name?
HTML
Below is the demo:
$("#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>
3 Answers
3
Try the below js code..
$("#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!');
you can get value simply by using .text() jquery function
like :
.text()
var room8Value = $("[data-room-id=8]").text();
you can check this jsfiddle example
$("#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>
I've already done that. The problem is this method doesn't get the new value (the one I typed). I need to click again on the room in order to get the value, check the demo
– mecnism
Sep 10 '18 at 10:23
what you need is when you update one of those rooms name, and click "validate name" you get the new values ?
– El Alami Anas
Sep 10 '18 at 10:27
that's exactly what I need!
– mecnism
Sep 10 '18 at 10:28
did you check my jsfiddle example ?
– El Alami Anas
Sep 10 '18 at 10:32
the "nameTag " parameter in PostData function should contain the data that is shown in " $("[data-room-id="+idTag+"]").text())". Thank you for your time, I have found the answer
– mecnism
Sep 10 '18 at 11:04
Use var idTag; and var nameTag; as public variable, you had applied this variable inside $("#editButton").click() apply them outside
var idTag;
var nameTag;
$("#editButton").click()
Please check below:
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>
ok, but the problem still persists
– mecnism
Sep 10 '18 at 10:15
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
thanks! it works
– mecnism
Sep 10 '18 at 10:40