Change the displayed text on same page of a <td> or <input> element after some action
Question
I have searched for this answer and it seems that it should be simple, based on DOM.
What I want to do is display a <td id="cte"> or <input id="cte"> on a page and after some action (ie button click OR onchange ) the getElementById('cte').value="somenewvalue" ACTUALLY changes the forementioned or element on the same page.
The technology (ie javascript, AJAX, DOM) says that this is doable, yet I have seen this question asked numerous ways where the answers supplied never seem to work or satisfy the question.
So my actual question is: How do I change the 'displayed' element.value on the same page without having to reload the same page?
2 answers
solution1
0 2017-04-20 13:47:09
Do you think of elements consist several values/texts? (like a table)
//emty the element really at first if the element consists several values
var forempty = document.getElementById("cte");
while( forempty.firstChild ){
forempty.removeChild(forempty.firstChild);
}
document.getElementById("cte").value = something;
//or
document.getElementById("cte").textContent = something;
solution2
0 2017-04-20 14:10:48
You answered your own question at least in one way: " The technology (ie javascript, AJAX, DOM) says that this is doable. And sure enough, with AJAX, it is only a matter of replacing the DOM Node with the Data (Response) from AJAX Request...
Here is a very Basic Example. We will fetch an HTML String using AJAX from the Server and use this Contents to replace the former Contents of a DIV, which contains the HTML < strong>Hello< /strong>
The first part of this Demo is our HTML or PHP Document containing our initial Markup and this File, we'd call index.html or index.php
CONTENTS OF index.php | index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini AJAX Demo</title>
</head>
<body>
<div class="swappable-content" id="swappable-content">
<strong>Hello!!!</strong>
</div>
<div class="other-dom-elements">
<Button id="action-trigger" data-ajax-url="/ajax.php">Click Me</Button>
</div>
<!-- ADD JQUERY LIBRARY & SETUP THE AJAX REQUEST CALLS -->
<!-- HERE WE ARE LOADING JQUERY FROM THE CDN.... CHANGE THE src ATTRIBUTE IF YOU HAVE A LOCAL COPY -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(e){
var actionTrigger = $("#action-trigger");
actionTrigger.on("click", function(e){
$.ajax({
url : $(this).attr('data-ajax-url'),
type : "POST",
dataType : "JSON",
data : {
// HERE YOU CAN ADD KEY VALUE PAIRS
// WHICH WILL BE SENT TO AND PROCESSED BY THE SERVER
},
success : successHandler,
error : errorHandler,
complete : completeHandler
});
});
function successHandler(data, textStatus, jqXHR){
// IF THERE IS A RESPONSE PAYLOAD FROM THE SERVER
// WE JUST REPLACE THE CONTENTS OF THE #swappable-content DIV WITH THE DATA
if(data){
if(data.html){
$("#swappable-content").html(data.html);
}
}
}
function errorHandler(jqXHR, textStatus, errorThrown){
console.log('The following error occured: ' + textStatus, errorThrown);
}
function completeHandler(jqXHR, textStatus){
}
});
})(jQuery);
</script>
</body>
</html>
CONTENTS OF AJAX PROCESSING SCRIPT: ajax.php
<?php
// YOU CAN DO PRETTY MUCH ANYTHING WITHIN THIS FILE
// HOWEVER FOR THE PURPOSES OF THIS DEMO,
// WE WOULD JUST RETURN SOME HTML STRING BUNDLED IN AN ARRAY AND SENT AS JSON DATA
$response = array(
'html' => "<div style='font-weight:900;color:#F00;'>This is the Response Data from Server!</div>",
);
die(json_encode($response));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.