www.webdeveloper.com
Results 1 to 2 of 2

Thread: Get Elements by class help

  1. #1
    Join Date
    May 2013
    Posts
    1

    Get Elements by class help

    This is probably a simple problem, but I'm not familiar with JS. I'm using Wordpress with a comment rating plugin to display 2 loops of comments - 1 sorted by "thumbs" rating, and second with standard order.

    The problem:
    When a thumb is clicked next to a comment in the standard section the vote is added to the comment in the rating section - since it's called first in code on the site. The standard section rating box is not being updated until page refresh.

    What is expected:
    When a vote is clicked, the rating for the same comment should be updated in both rating and standard loops sectons.

    What was done:
    GetElementByID was replaced by getElementsByClassName since ID should be unique across the page, the problem still exists as described above.

    I have no idea how JS works, would greatly appreciate some help

    The Code:
    Code:
    function ckratingcreateXMLHttpRequest(){
        var xmlhttp = null;
        try {
            // Moz supports XMLHttpRequest. IE uses ActiveX.
            // browser detction is bad. object detection works for any browser
            xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            // browser doesn’t support ajax. handle however you want
            //document.getElementsByClassName("errormsg").innerHTML = "Your browser doesnt support XMLHttpRequest.";
            // This won't help ordinary users.  Turned off
            // alert("Your browser does not support the XMLHttpRequest Object!");
        }
        return xmlhttp;
    }
    
    var ckratingXhr = ckratingcreateXMLHttpRequest();
    
    function ckratingKarma(class, action, path, imgIndex){
        ckratingXhr.open('get', 'http\://'+ path +'ck-processkarma.php?id='+ class +'&action='+ action +'&path='+ path +'&imgIndex='+imgIndex);
        ckratingXhr.onreadystatechange = ckratingHandleResponse;
        ckratingXhr.send(null);
    }
    function ckratingHandleResponse(){
        if(ckratingXhr.readyState == 4){
            var response = ckratingXhr.responseText.split('|');
            
            if(response[0] == 'done'){
                if(response[1]){
                    //Changes the thumbs to dull gray and disable the action
                    if (response[4] == 'down') {
                      if ( document.getElementsByClassName("down-"+response[1]) != null ) { 
                          document.getElementsByClassName("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'checkmark.png';
                      }
                    }
                    else {
                      if ( document.getElementsByClassName("down-"+response[1]) != null ) {
                          document.getElementsByClassName("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'gray_down.png';
                      }
                    }
                    if ( document.getElementsByClassName("down-"+response[1]) != null ) {
                       document.getElementsByClassName("down-"+response[1]).onclick    = '';
                    }
                    if (response[4] == 'up') {
                       if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                          document.getElementsByClassName("up-"+response[1]).src   = "http://"+response[3]+'images/'+response[6]+'checkmark.png';
                       }
                    }
                    else {
                       if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                          document.getElementsByClassName("up-"+response[1]).src   = "http://"+response[3]+'images/'+response[6]+'gray_up.png';
                       }
                    }
                    if ( document.getElementsByClassName("up-"+response[1]) != null ) {
                       document.getElementsByClassName("up-"+response[1]).onclick      = '';
                    }
                    //Update the karma number display
                    if(!response[2]){
                    	alert("Response has no value");
                    }
                    var karmanumber = response[2];
                    //The below line is commented out because there is no karma number atm.
                    if (document.getElementsByClassName("karma-"+response[1]+"-"+response[4]) != null) {
                       document.getElementsByClassName("karma-"+response[1]+"-"+response[4]).innerHTML = karmanumber;
                    }
                    // deal with the single value total
                    /*if (document.getElementsByClassName("karma-"+response[1]+"-total") != null) {
                       document.getElementsByClassName("karma-"+response[1]+"-total").innerHTML = response[5];
                    }*/
                } else {
                    alert("WTF ?");
                }
                
            }
            else if(response[0] == 'error')
            {
                var error = 'Error: '+response[1];
                alert(error);
            } else {
               /*  This causes unnecessary error messages when the icon
                *  is double clicked.
            	   alert("Reponse: "+response[0]);
                alert("Karma not changed, please try again later.");
                */
            }
        }
    }
    var crToggleComment = 0;
    
    function crSwitchDisplay(class) {
       if (crToggleComment % 2 == 0) { crShowdiv(class); }
       else { crHidediv(class); }
       crToggleComment++;
    }
    
    // hide <div id='a2' style="display:none;"> tagged div ID blocks
    function crHidediv(id) {
    	//safe function to hide an element with a specified id
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'none';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'none';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'none';
    		}
    	}
    }
    
    // show <div id='a2' style="display:none;"> tagged div ID blocks
    // <a href="javascript:crShowdiv('a2');">show a2</a>
    
    function crShowdiv(id) {
    	//safe function to show an element with a specified id
    		  
    	if (document.getElementById) { // DOM3 = IE5, NS6
    		document.getElementById(id).style.display = 'block';
    	}
    	else {
    		if (document.layers) { // Netscape 4
    			document.id.display = 'block';
    		}
    		else { // IE 4
    			document.all.id.style.display = 'block';
    		}
    	}
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    I don't think anyone can help you without seeing the accompanying HTML code for the pages where this script operates. Restore the original script and then post a link to a page where folks can see what's going on.

    But, at a glance, I can tell you that you can't simply replace getElementByID() with getElementsByClassName(). The two functions are very different. Chances are that getElementByID was the correct choice in the first place since it seems this code is meant to update a particular item on the page, which means the 'id' attribute is critical. If things aren't working, you need to see why the script isn't seeing the expected 'id' attribute.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles