SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding xmlhttp xml attribute to text value

    I am retrieving a list of users using ajax. It retrieves them fine, but some elements in the response xml have an attribute of status=banned. I am populating a select element with the list of user names:
    Code:
    var userIDSelect= document.getElementById("selUserID");
    var results = xmlHttp.responseXML.getElementsByTagName("userID");
    var option = null;
    for(var i = 0; i < results.length; i++) {
    	option = document.createElement("option");
    	option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    	 userIDSelect.appendChild(option);
    }
    I was wondering how to add the element attribute to the value of the textnode, so that an option value will be displayed as eg "LoginID (Banned)" - by extracting the attribute from the element. Any pointers? And is there a reference to the responseXML api?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code javascript:
    option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    option.appendChild(document.createTextNode(' (banned)')); // you would of course put what ever you require in this...


  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's the code to add "banned" to an option element value - but i was more interested in how to see if the current XML element has an attribute or not, and if it does, add the value of that attribute to the option element value.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code javascript:
    option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    if(results[i].getAttribute('status') == 'banned')
        option.appendChild(document.createTextNode(' (banned)')); // you would of course put what ever you require in this...


  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i always imagine it to be more complex than it is. That works perfectly. Out of interest, why do you need to add another textNode - wouldn't you be able to append the attribute onto the option value?

    thanks in advance for your help

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't append text like that unless you use innerHTML which should be left for emergencies (my opinion). I always use createTextNode regardless of whether i'm adding one piece of text or twenty (within the same parent element).


  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have seen innerHTML used alot, mainly to avoid processing the XML, but was wondering if this is a suitable compromise:
    Code:
    elem = document.getElementById('myDiv');
    var textNode = document.createTextNode(xmlHttp.reponseText);
    elem.appendChild(textNode);
    would that work?

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that would simply append the whole XML document as a string to the div.

    Why do you see using createTextNode more then once a problem?


  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see it as a problem. But i am having some strange things happen now, with the following code:
    Code:
    var userIDSelect = document.getElementById("selUserID");	
    var results = xmlHttp.responseXML.getElementsByTagName("userID");
    var option = null;
    for(var i = 0; i < results.length; i++) {
    	option = document.createElement("option");
           option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    	if(results[i].getAttribute('status') == 'Banned'){ 
                option.appendChild(document.createTextNode(" (Banned)"));
    	}
    	userIDSelect.appendChild(option);
    }
    Later on, i am attempting to get the selected username:
    Code:
    var userName = document.getElementById("selUserID").value;
    alert(userName);
    //or	
    var userIDSelect = document.getElementById("selUserID");
    alert(userIDSelect[userIDSelect.selectedIndex].value);
    but both are displaying empty alert boxes. Is it a problem where the boxes have been populated dynamically? How else can i get the currently selected item? This only happens in IE; mozilla displays the value (???).

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's down to the method your using to create the HTML Option.

    you should be doing:

    Code javascript:
    var userIDSelect = document.getElementById("selUserID");    
    var results = xmlHttp.responseXML.getElementsByTagName("userID");
    for(var i = 0; i < results.length; i++) {
        var username = results[i].firstChild.nodeValue;
        if(results[i].getAttribute('status') == 'Banned')
            username += ' (Banned)';
        var option = new Option(username, results[i].firstChild.nodeValue);
        // really you should store the userid as the value of the option
        // var option = new Option(username, userId); 
        userIDSelect.options[userIDSelect.options.length] = option;
    }



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •