onclick between client side and server side

Question

Hello,

I want to enhance a composite control's client side, my approach is to recreate all method on JavaScript, so here I have some troubles:

1. Can I call onclick event on client side otherwise on server side?
2. the statement table.onclick=SelectRow(event) fires a bug!

Code:

function Control_Init() {
    if( !(document.getElementById) ) { return; }
for( var i = 0; i < Controls.length; i++ ) {
    var info = Controls[i];
    Control_Load(info);
    }
 }

function Control_Load(info) {
    var leftBox = document.getElementById(info.LeftBoxID);
    var rightBox = document.getElementById(info.RightBoxID);
    var moveRight = document.getElementById(info.MoveRightID);
    var moveAllRight = document.getElementById(info.MoveAllRightID);
    var moveLeft = document.getElementById(info.MoveLeftID);
    var moveAllLeft = document.getElementById(info.MoveAllLeftID);
    var moveUp = document.getElementById(info.MoveUpID);
    var moveDown = document.getElementById(info.MoveDownID);
    if ( leftBox == null ) {
        return;
    }
    var ControlParent = new Object();
    ControlParent.LeftBox = leftBox;
    ControlParent.RightBox = rightBox;
    ControlParent.MoveRight = moveRight;
    ControlParent.MoveAllRight = moveAllRight;
    ControlParent.MoveLeft = moveLeft;
    ControlParent.MoveAllLeft = moveAllLeft;
    ControlParent.MoveUp = moveUp;
    ControlParent.MoveDown = moveDown;
    ControlParent.SetEnabled = Control_SetEnabled;
    leftBox.Parent = ControlParent;
    //leftBox.onclick = Control_SelectRow(event);
    rightBox.Parent = ControlParent;
    //rightBox.onclick =  Control_SelectRow(event);
    if ( moveUp != null && moveDown != null ) {
    rightBox.SetUpDownEnabled = Control_SetUpDownEnabled;
    rightBox.onchange = rightBox.SetUpDownEnabled;
    } else {
        rightBox.SetUpDownEnabled = function() {};
    }
    moveRight.Parent = ControlParent;
    moveRight.DoCommand = Control_MoveRight;
    moveRight.onclick = moveRight.DoCommand;
    if ( moveAllRight != null ) {
        moveAllRight.Parent = ControlParent;
        moveAllRight.DoCommand = Control_MoveAllRight;
        moveAllRight.onclick = moveAllRight.DoCommand;
    }
    moveLeft.Parent = ControlParent;
    moveLeft.DoCommand =Control_MoveLeft;
    moveLeft.onclick = moveLeft.DoCommand;
    if ( moveAllLeft != null ) {
        moveAllLeft.Parent = ControlParent;
        moveAllLeft.DoCommand = Control_MoveAllLeft;
        moveAllLeft.onclick = moveAllLeft.DoCommand;
    }
    if ( moveUp != null ) {
        moveUp.Parent = ControlParent;
        moveUp.DoCommand = Control_MoveUp;
        moveUp.onclick = moveUp.DoCommand;
    }
    if ( moveDown != null ) {
        moveDown.Parent = ControlParent;
        moveDown.DoCommand = Control_MoveDown;
        moveDown.onclick = moveDown.DoCommand;
    }
    if ( !moveRight.disabled ) {
        ControlParent.SetEnabled();
        if ( moveUp != null ) {
            rightBox.SetUpDownEnabled();
        }
    }
}

function Control_SelectRow(table) {
    var SelectedRow = table.srcElement.parentNode;
    var cbox = table.srcElement;
    if (cbox.checked == true) {
        // get Row element
        SelectedRow = SelectedRow.parentNode;
        SelectedRow.style.backgroundColor = "Black";  //select
        SelectedRow.style.color = "white";  //select
    }
    else {
        // get Row element
        SelectedRow = SelectedRow.parentNode;
        SelectedRow.style.backgroundColor = "white";    //deselect
        SelectedRow.style.color = "black";  //deselect
    }        
}

function Control_SetEnabled() {
    var leftItemsEmpty = ( this.LeftBox.rows.length == 0 );
    var rightItemsEmpty = (this.RightBox.rows.length == 0);
    this.MoveRight.disabled = leftItemsEmpty;
    if ( this.MoveAllRight != null ) {
        this.MoveAllRight.disabled = leftItemsEmpty;
    }
    this.MoveLeft.disabled = rightItemsEmpty;
    if ( this.MoveAllLeft != null ) {
        this.MoveAllLeft.disabled = rightItemsEmpty;
    }
    this.RightBox.SetUpDownEnabled();
}

function Control_SetUpDownEnabled() {
}

function Control_MoveRight() {
    confirm("moveright");
    Control_MoveSelectedItems(this.Parent.LeftBox,this.Parent.RightBox);
    //this.Parent.SetEnabled();
    return false;
}

function Control_MoveAllRight() {
    Control_MoveAllItems(this.Parent.RightBox,this.Parent.LeftBox);
    //this.Parent.SetEnabled();
    return false;
}

//function to add selected rows from Left Table to Right Table
function Control_MoveSelectedItems(source,target) {
    // delete me please
    alert("you called me !");
    var LeftTable =source;
    var RightTable =target;
    var i = 0;
    var j = 0;
    var RowPresent = 0; //this variable checks if a row is already added to the Right Table
    if (RightTable.rows.length > 0) {
        if (RightTable.rows[0].childNodes[0].innerHTML == "Now Data Available") {
            RightTable.deleteRow(0);
        }
    }
    for (i = 0; i < LeftTable.rows.length; i++) {        
        //this code adds the selected rows to Right Table if not already added
        if (RowPresent == 0) {
            RightRow = RightTable.insertRow();
            RightRow.id = "RightRow" + i;
            RightCell1 = RightRow.insertCell();
            RightCell1.align = "left";
            RightCell2 = RightRow.insertCell();
            RightCell2.align = "left";
            RightCell3 = RightRow.insertCell();
            RightCell3.align = "left";
            RightCell4 = RightRow.insertCell();
            RightCell4.align = "left";
            RightCell5 = RightRow.insertCell();
            RightCell5.align = "left";

            // declare textbox and button 
            var NumericField = document.createElement("input");
            var BtnValidate = document.createElement("input");
            NumericField.setAttribute("type", "text");
            NumericField.setAttribute("id", "NumericField");
            NumericField.style.width = "70px"
            BtnValidate.setAttribute("type", "submit");
            BtnValidate.setAttribute("id", "btnValidate");
            BtnValidate.setAttribute("value", "V");
            BtnValidate.style.backgroundColor = "white";
            BtnValidate.style.color = "green";
            // declare right checkbox
            var RightCB = document.createElement("input");
            RightCB.setAttribute("type", "checkbox");
            RightCB.setAttribute("id", "RightCB");
            RightCB.style.width = "30px"

            RightCell1.appendChild(NumericField);
            RightCell2.appendChild(BtnValidate);
            RightCell3.appendChild(RightCB);
            RightCell4.innerHTML = LeftTable.rows[i].childNodes[1].innerHTML;
            RightCell4.style.width = LeftTable.rows[i].childNodes[1].style.width;
            RightCell5.innerHTML = LeftTable.rows[i].childNodes[2].innerHTML;
            RightCell5.style.width = LeftTable.rows[i].childNodes[2].style.width;           
        }
    }       
}

Answer 1

You can download Firebug add-on for Firefox and debug you javascript code, it is a great tool and make life easier for javascript coding.

You have mixed javascript with c# code and I cant understand where is your js code and where is the server side code.