Sunday, January 23, 2011

Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality

Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality


Please read
Part no.1 and

Part no.2
and

Part no.3
before reading this Part no.4

I will try to add a function in both techniques. This function will be called whenever a row will be bounded to an instance of array object. This will be helpfull in doing many operations but i will try to change the boolean value into a check box. Then i will call a function onclick event of checkbox for simulation.

Test no.3: Extendibility on data bounded with tr in test no.1
function Row(rowData) 
{
  var tr = "<tr>";
  for (var i in rowData) 
  {
    tr += "<td>" + rowData[i] + "</td>";
  }
  tr += "</tr>";
  if (typeof OnRow_Bounded == 'function') 
  {
    tr=OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData,row) 
{
  if (rowData["isActive"] == true) 
  {
    row = row.replace("true", "<input type='checkbox' checked='checked' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  else 
  {
    row = row.replace("false", "<input type='checkbox' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  return row;
}

function EmployeeStatus_Change(sr,firstName) 
{
  confirm('Do you want to change the ' + firstName + ' status?');
}

Following picture shows the addition of checkbox




Test no.4: Extendibility on data bounded with tr in test no.2
function Row(rowData) 
{
  var tr = $("<tr></tr>");
  for (var i in rowData) 
  {
    tr.append($("<td></td>").text(rowData[i]));
  }
  if (typeof OnRow_Bounded == 'function') 
  {
    tr = OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData, row) 
{
  var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
  $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);
  return row;
}

function EmployeeStatus_Change(event)
{
  var rowData=event.data;
  confirm('Do you want to change the ' + rowData.FirstName + ' status?');
}

and following picture shows the extended result



Continue to Part no.5

No comments:

Post a Comment