could anyone help me about ajax problem ?
Hello !
can anyone take a look at this and try to help me ?
well, I have try to get the values a the following
tags returned from a servlet:
<validation>
<typeTag> email </typeTag>
<valueTag> true </valueTag>
</validation>
so i use this code below to retrieve the values but
i'm not getting them and the process bar of my browser
shows an error message. When i remove the line
"var typeTag = validation.childNodes[0].getElementsByTagName("typeTag")[0].childNodes[0].nodeValue;"
the process bar shows no error message.
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var validation = req.responseXML.getElementsByTagName("validation")[0];
var typeTag = validation.childNodes[0].getElementsByTagName("typeTag")[0].childNodes[0].nodeValue;
document.getElementById("msg").value = typeTag;
}
}
}
Thanks!!
[1013 byte] By [
Sonecaa] at [2007-10-3 2:24:57]
Try this:
function processRequest() {
if (req.readyState == 4) {
if(req.status == 200) {
var root = req.responseXML.documentElement; //aka validation
var typeTag = root.getElementsByTagName("typeTag")[0].firstChild.data;
document.getElementById("msg").value = typeTag;
}
}
}
Calling documentElement gets you the root node, in this example the "validation" node.
HTH.
Thanks for replying. But I have fell into another little trouble
Let me explain what I'm trying to do:
I'm trying to validate at first 2 text fields
so when i load the validation page i start to fill in the first
field it validate the first field normaly and on the second it
just brings me always the same message from the xml tags. It
happpens equally to the first when i load the page and start to
fill in the second text field. I think the problem is in the
request i don't know exactly. So if you have any ideia, please
post a reply.
the code i use are 2 servlets, one for the age and other for
email validation. they return me:
<code>
//age servlet
if(flag==true){
sb.append("<typeTag>age</typeTag>");
sb.append("<valueTag>ageFormatInvalid</valueTag>");
out.write("<validation>"+sb.toString()+"</validation>");
} else{
sb.append("<typeTag>age</typeTag>");
sb.append("<valueTag>true</valueTag>");
out.write("<validation>"+sb.toString()+"</validation>");
--
//email servlet
if(list.contains(email.trim())){
sb.append("<typeTag>email</typeTag>");
sb.append("<valueTag>existingEmail</valueTag>");
out.write("<validation>"+sb.toString()+"</validation>");
} else if(!email.contains("@")||!email.contains(".")){
sb.append("<typeTag>email</typeTag>");
sb.append("<valueTag>emailFormatInvalid</valueTag>");
out.write("<validation>"+sb.toString()+"</validation>");
}else {
sb.append("<typeTag>email</typeTag>");
sb.append("<valueTag>true</valueTag>");
out.write("<validation>"+sb.toString()+"</validation>");
}
</code>
<code>
<script type="text/javascript">
var req;
var target;
var isIE;
function initRequest(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateEmail() {
if (!target) target = document.getElementById("email");
var url = "emailvalidator?signinEmail="+escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}
function validateAge() {
if (!target) target = document.getElementById("age");
var url = "agevalidator?signinAge="+escape(target.value);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var root = req.responseXML.documentElement;
var typeTag = root.getElementsByTagName("typeTag")[0].firstChild.data
var valueTag = root.getElementsByTagName("valueTag")[0].firstChild.data
document.getElementById("msg").value = valueTag+typeTag;
if(typeTag == "email"){
setEmailMessageUsingDOM(valueTag);
}
if(typeTag == "age"){
setAgeMessageUsingDOM(valueTag);
}
}
}
}
function setEmailMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("emailMsg");
if (message == "existingEmail") {
messageText = "Email j?existente!";
}
else {
if(message == "emailFormatInvalid"){
messageText = "Email inv醠ido!";
}
else {
messageText = "";
}
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
function setAgeMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("ageMsg");
if (message == "ageFormatInvalid") {
messageText = "Idade inv醠ida!";
}
else {
messageText = "";
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
<script>
</code>
and from the text field i call the methods
validateEmail; and validateAge;
Thanks very much for replying!!
First things first, when you're posting code, you should remember to use the code button. You'll see it just above the textarea where you post messages.
1. Post the code.
2. Highlight it.
3. Click the code button.
Now, that being said...
Many will disagree with me here but, ... there's a place for DOM, and there's a place not to use DOM. In your example you go through some pretty elaborate steps just to set the value of a textfield. Plus I don't get the idea that you've fully gotten the entire DOM tree thing down just yet.
I would recommend changing this:
function setAgeMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("ageMsg");
if (message == "ageFormatInvalid") {
messageText = "Idade inv醠ida!";
}
else {
messageText = "";
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
with this:
function setAgeMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("ageMsg");
if (message == "ageFormatInvalid") {
messageText = "Idade inv醠ida!";
}
else {
messageText = "";
}
messageElement.value = messageText;
}
Why knock yourself out just to find the text node when they value option is available?
You will also need to make the same change from:
function setEmailMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("emailMsg");
if (message == "existingEmail") {
messageText = "Email j?existente!";
}
else {
if(message == "emailFormatInvalid"){
messageText = "Email inv醠ido!";
}
else {
messageText = "";
}
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
to:
function setEmailMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("emailMsg");
if (message == "existingEmail") {
messageText = "Email j?existente!";
}
else if(message == "emailFormatInvalid"){
messageText = "Email inv醠ido!";
}
else {
messageText = "";
}
messageElement.value = messageText;
}
Now if you goal is to learn DOM and you REALLY want to know how to do it that way, reply back. Otherwise I recommend using the above. Everybrowser will understand it just fine.
Hello!
Thanks once more. I've read some articles about using DOM, i thinks there several way of dealing with it, I really would like to kno the hole DOM thing, if you could please recommend me a good website or send by email a tutorial, i would apreciate very much. My email and my msn is :
marcos_vinicius100@hotmail.com
God bless you!!
Well I have made the tests with the replacing code
yoiu had suggested me and it hasn't even brought the
messages. So let me explain better:
my jsp file:
<input type="text" name="signinEmail onkeyup="validateEmail()"/>
<input type="text" id="age" name="signinAge" onkeyup="validateAge()"/>
<div id="emailMsg" ></div>
<div id="ageMsg"></div>
my javascript code:
var req;
var target;
var isIE;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateEmail() {
if (!target) target = document.getElementById("email");
var url = "emailvalidator";
initRequest();
req.onreadystatechange = processRequest;
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("signinEmail=" + escape(target.value));
}
function validateAge() {
if (!target) target = document.getElementById("age");
var url = "agevalidator?signinAge="+escape(target.value);
initRequest();
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var root = req.responseXML.documentElement;
var typeTag = root.getElementsByTagName("typeTag")[0].firstChild.data
var valueTag = root.getElementsByTagName("valueTag")[0].firstChild.data
document.getElementById("msg").value = valueTag+typeTag;
if(typeTag == "email"){
setEmailMessageUsingDOM(valueTag);
}
if(typeTag == "age"){
setAgeMessageUsingDOM(valueTag);
}
}
}
}
function setMessageUsingInline(message) {
mdiv = document.getElementById("userIdMessage");
if (message == "false") {
mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</div>";
} else {
mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</div>";
}
}
function setEmailMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("emailMsg");
if (message == "existingEmail") {
messageText = "Email j?existente!";
}
else {
if(message == "emailFormatInvalid"){
messageText = "Email inv醠ido!";
}
else {
messageText = "";
}
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
function setAgeMessageUsingDOM(message) {
var messageElement;
var messageText;
messageElement = document.getElementById("ageMsg");
if (message == "ageFormatInvalid") {
messageText = "Idade inv醠ida!";
}
else {
messageText = "";
}
var messageBody = document.createTextNode(messageText);
if (messageElement.childNodes[0]) {
messageElement.replaceChild(messageBody, messageElement.childNodes[0]);
} else {
messageElement.appendChild(messageBody);
}
}
my email validation servlet:
public class EmailValidator extends HttpServlet {
WebRadioDB cadastrosDB;
ArrayList list;
public void init() throws ServletException {
try{
list = (ArrayList)new ArrayList();
cadastrosDB = (WebRadioDB)getServletContext().getAttribute("db");
Iterator i = cadastrosDB.getCadastros().iterator();
while(i.hasNext()){
Cadastroswebradio c = (Cadastroswebradio)i.next();
list.add(c.getEmail());
}
}catch(Exception e){
System.out.println(e.getMessage());
}
}
my age validation servlet:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
boolean flag = false;
char age[] = request.getParameter("signinAge").trim().toCharArray();
for(int i=0; i<age.length; i++){
if(!Character.isDigit(age[i])){
flag = true;
}
}
if(flag==true){
StringBuffer sb = new StringBuffer();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
sb.append("><typeTag>age</typeTag>");
sb.append("<valueTag>ageFormatInvalid</valueTag>");
response.getWriter().write("<validation>"+sb.toString()+"</validation>");
} else{
StringBuffer sb = new StringBuffer();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
sb.append("<typeTag>age</typeTag>");
sb.append("<valueTag>true</valueTag>");
response.getWriter().write("<validation>"+sb.toString()+"</validation>");
}
}
Now i'll describe step by step my problem:
step 1 load the page;
step 2 start to fill the age text field;
step 3 it validates normally;
step 4 start to fill the email text field
step 5 it doesn't validate the email textfield properlly it brings me
just the emailFormatInavlid message from the email servlet validator
and that't the problem.
the same ocurrs when i start to fiil in the email textfield
step 1 load the page;
step 2 start to fill the email text field;
step 3 it validates normally;
step 4 start to fill the age text field
step 5 it doesn't validate the age textfield properlly it brings me
just the ageFormatInavlid message from the email servlet validator
even if i fill in with a proper age format.
Thanks once more for the atention.
The first thing to do is to get a DOM Inspector for the browser you're using. This way you can visually SEE the DOM tree as the browser sees it. You can navigate to a page and see the entire DOM, what each node is named, etc.
Firefox has one included, but you have to do a custom install and tell it you want the developer tools.
You can download a free one for IE here: http://www.cheztabor.com/IEDocMon/. It's not as good as the Firefox one (IMHO) but will tell you what you need.
I don't believe Opera has one right now.
Are you telling me that the problem is in the browser?!
No, not at all. Here's a good tutorial on Using the DOM in Javascript: http://www.howtocreate.co.uk/tutorials/javascript/domintroductionHTH.
