can I update a label using ajax, instead of a textbox?
https://stackoverflow.com/questions/1227043
Question
I'm using ajax to update a textbox once the value in a drop down box has been selected. However, i only update/put text in it if certain conditions are met, so it looks rubbish when there is no message. I was thinking that having a label there would be much better, but is this possible? Can i have an empty label and just update the label text when needed?
Cheers leddy
Edit:
I'm using php and when the drop down box is selected, I am querying a mysql db (in the reports.php page) - depending on what the result of that is, decides whether i update the textbox or not:
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById('outputText').value = httpObject.responseText;
}
}
function checkException()
{
httpObject = getHTTPObject();
if (httpObject != null)
{
httpObject.open("GET", "reports.php?exceptions="
+document.getElementById('exceptionsID').value+"&date1=" + document.getElementById('date1').value, true);
httpObject.send(null);
httpObject.onreadystatechange = setOutput;
}
}
var httpObject = null;
the textbox is 'outputText' and is set in the setOutput() function
Hope this explains a little better
Cheers
Solution
Something like this should change the text of the label.
// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById('outputText').innerHTML= httpObject.responseText;
}
}
I updated my original post to reflect the code that was provided. This assumes that you are using the <label>
, <div>
, or <span>
tags
OTHER TIPS
Assuming you're using ASP.NET, yes you can. Using the Text property of the label.
Change the textbox into a span, and keep the id the same. Then change the code to set the innerHTML instead of the value:
// Change the value of the outputText field
function setOutput(){
if(httpObject.readyState == 4){
document.getElementById('outputText').innerHTML= httpObject.responseText;
}
}
The simplest way to handle this without a textbox is to create a SPAN tag, give it an id of "outputText", and then change the innerText of the SPAN like this:
function setOutput() {
if(httpObject.readyState == 4) {
document.getElementById('outputText').innerText = httpObject.responseText;
}
}
Inside your HTML, you'll have your label defined like this:
<span id="outputText">Some default text here</span>
Of course, some CSS styling of the SPAN might be a good thing, but that's another matter for another time. Depending on your layout needs, a DIV tag may be better than a SPAN.