Support » Plugins » Hacks » Probably a simple JS problem regarding getElementsByClassName

  • 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 sections.

    What I did:
    After some research i determined that document.getElementsById does not continue after first ID is found. Replaced it with getElementsByClassName and added classes to the html. But now nothing does update 🙂 Any ideas?

    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(id, action, path, imgIndex){
        ckratingXhr.open('get', 'http\://'+ path +'ck-processkarma.php?id='+ id +'&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(id) {
       if (crToggleComment % 2 == 0) { crShowdiv(id); }
       else { crHidediv(id); }
       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';
    		}
    	}
    }
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m afraid it’s not simple at all. getElementById() is the correct method, but only one element on a page should have a particular ID. You need multiple calls to handle multiple elements. getElementsByName() requires a different handling strategy.

    The actual problem is the AJAX calls are not being processed correctly. AJAX in WordPress does not work like it would in any other environment. First of all, IMO, attempting AJAX without jQuery is going to result in some failures due to erratic browser support. Then in WordPress, all AJAX calls should be routed through wp-admin/admin-ajax.php. The actual processing is then implemented by hooking into a particular action that is fired by admin-ajax.php. Failure to do AJAX through admin-ajax.php will result in erratic behavior.

    I am not saying your plugin will not work, only that it will not work consistently, as you have seen. To work consistently, IMO, the entire strategy of implementing AJAX needs to be revisited. Sorry to be the bearer of bad news, keep in mind this is all solely my opinion, you can probably find differing opinions.

Viewing 1 replies (of 1 total)
  • The topic ‘Probably a simple JS problem regarding getElementsByClassName’ is closed to new replies.