JavaScript Tips - Part1

1. Change ClassName

document.getElementById(element).setAttribute('class', 'className');
or document.getElementById(element).className = 'className';
or using YUI
YAHOO.util.Dom.getElementByClassName(className, tagName, rootNode);
YAHOO.util.Dom.hasClass(element, className);
YAHOO.util.Dom.addClass(element, className);
YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName);


2. ParseAjaxResult

function ajaxCall(id) {
    var displayResult = {
            success: function(o) {
                var response = parseAJAXResult(o);
                var elem = document.getElementById('div_id');
                elem.innerHTML = response.result;
            },
            failure: generalAjaxFailure
        }   
        var params = 'id='+id;
        YAHOO.util.Connect.asyncRequest('POST', '<?php echo url_for('module/action')?>', displayResult , params);  
}


3. Ajax Form

YAHOO.util.Connect.setForm(document.getElementById(form_id));
document.search_transaction = YAHOO.util.Connect.asyncRequest('POST',
   '<?php echo url_for('module/action')?>',
   { success: successComplete, failure: generalAjaxFailure });

Make sure the hidden field has name, otherwise setForm won't pick it up.
<input type="hidden" id="selected_ids" name="selected_ids">

4. String Functions
http://www.w3schools.com/jsref/jsref_obj_string.asp

if(resultVal.indexOf("keyword") != -1) { // contain keyword ... }
function ucfirst(str) {   // capitalize first letter
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}


5. Check if variable exists
if ( typeof (variableName) == "undefined" ) {
} else {
}


6. Create Elements 
var body = document.createElement('form');
body.id = 'elem_id';
   var row1 = document.createElement('div');
   row1.className = 'formRow';
   row1.innerHTML = '<label for="cell_value">Enter a new value: </label>';
   // Input Text           
  var elTextbox = row1.appendChild(document.createElement("input"));
  elTextbox.id = "cell_value";
  elTextbox.name = "cell_value";
  elTextbox.type = "text";
  elTextbox.style.width = "130px";
  elTextbox.style.margin= "0 10px 0 0";           
  Event.addListener(elTextbox, "keydown", function(oArgs){ if(enterDown(oArgs)) { this.cellEditorAction(prod_id, column_key, 'newValue'); }}, this, true);
               
  // Save button
 var elSaveBtn = row1.appendChild(document.createElement("button"));
 elSaveBtn.className = DT.CLASS_DEFAULT;
 elSaveBtn.innerHTML = this.LABEL_SAVE || DT.LABEL_SAVE;
  Event.addListener(elSaveBtn, "click", function(oArgs){ this.cellEditorAction(prod_id, column_key, 'newValue');}, this, true);


body.appendChild(row1);
panel.setBody(body);
panel.render();
panel.show();
                

7. Reload Page
window.location.reload()

8. Window onload
YAHOO.util.Event.on(window, 'load', function () {
    if(window.parent.location.href != window.location.href) {
        window.parent.location.href = '<?php url_for('public/index') ?>';
    }
    document.getElementById('username').focus();
});

or

window.onload = funcName;
function funcName() {
}

Loading Sequence

#js
window.onload = getRight_onload; // IE doesn't take function() Error: Not implemented

function getRight_onload() {
   getRight();
}
function getRight() {
   var displayData = {
      success: function(request) {
         document.getElementById('right_div').innerHTML = request.responseText;
      },
      failure: ajaxFailure
  }
   var params = 'column='+ column;
   YAHOO.util.Connect.asyncRequest('POST', url, displayData, params);
}