Search jQuery

jQuery Forum

Issue with popups in IE

in Using jQuery • 8 years ago

Ok so i'm using IE and Firefox. With firefox the below code works fine but runng in IE the onclick event from my form is never triggering the javascript function call. If i open the IE debugger and change this to an alert and than back to doClose it works fine. Any ideas?

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
function getValues(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    var updates = new Array();
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            //check if the box is checked
            if(inputs[i].checked){
                //get to the row and get all the elements from it
                var row = inputs[i].parentNode.parentNode
                //skip the first cell since it is the checkbox
                //the rest of the rows are in the order of KPIName,KPI Category, KPI definition, KPI owner, MonthlyActual, Monthly Goal
                var tempData = new Array();
                if (row.cells[1].childNodes[1] != null)
                    tempData.push(row.cells[1].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[2].childNodes[1] != null)
                    tempData.push(row.cells[2].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[3].childNodes[1]!=null)
                    tempData.push(row.cells[3].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[4].childNodes[1]!=null)
                    tempData.push(row.cells[4].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[5].childNodes[1]!=null)
                    tempData.push(row.cells[5].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[6].childNodes[1]!=null)
                    tempData.push(row.cells[6].childNodes[1].innerHTML);
                else
                    tempData.push("");
                updates.push(tempData);
            }
        }
    }
    return updates;
}
function removeCheck(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            if(inputs[i].checked){inputs[i].checked=false;}
        }
    }
}
function checkAll(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            if(!inputs[i].checked){inputs[i].checked=true;}
        }
    }
}
//position the popup at the center of the page
function positionPopup(){
if(!$("#editForm").is(':visible')){
    return;
}
$("#editForm").css({
      left: ($(window).width() - $('#editForm').width()) / 2,
      top: ($(window).width() - $('#editForm').width()) / 7,
      position:'absolute'
});
}
function doClose(){
    $("#editForm").fadeOut(500);
}
function doUpdates(){

    var updates = getValues();
    //now with the selected cells pop open a box and add each one to a new window to update here and then push to a bean
    var form = document.createElement("form");
    var table = document.createElement("table");
    table.setAttribute("style","text-align:center");
    var tbody = document.createElement("tbody");
    //build the header for the table
    var header = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = "KPI Name";
    var td2 = document.createElement("td");
    td2.innerHTML = "KPI Category";
    var td3 = document.createElement("td");
    td3.innerHTML = "KPI Definition";
    var td4 = document.createElement("td");
    td4.innerHTML = "KPI Owner";
    var td5 = document.createElement("td");
    td5.innerHTML = "Monthly Actual";
    var td6 = document.createElement("td");
    td6.innerHTML = "Monthly Goal";

    header.appendChild(td1);
    header.appendChild(td2);
    header.appendChild(td3);
    header.appendChild(td4);
    header.appendChild(td5);
    header.appendChild(td6);

    tbody.appendChild(header);

    var updateSize = updates.length;
    for (var i=0;i<updateSize;i++){
        var row = updates.pop();
        //reverse the array so that they remain in the same order when we pop them
        row = row.reverse();
        //create a Table row object
        var tr = document.createElement("tr");
        var rowSize = row.length;
        for (var j=0;j<rowSize;j++){
            if (j<4){
                var td = document.createElement("td");
                var input = document.createElement("input");
                input.setAttribute("value",row.pop());
                input.setAttribute("name","tr"+i+"td"+j);
                input.setAttribute("id","tr"+i+"td"+j);
                input.setAttribute("type","text");
                input.setAttribute("readonly","readonly");
                input.setAttribute("disabled","disabled");
                td.appendChild(input);
                tr.appendChild(td);
            }
            else{
                var td = document.createElement("td");
                var input = document.createElement("input");
                input.setAttribute("value",row.pop());
                input.setAttribute("name","tr"+i+"td"+j);
                input.setAttribute("id","tr"+i+"td"+j);
                input.setAttribute("type","text");
                td.appendChild(input);
                tr.appendChild(td);
            }
        }
        tbody.appendChild(tr);
    }
    //now that we have everything append them
    table.appendChild(tbody);
    form.appendChild(table);
    //add a button to the form for submitting
    var submit = document.createElement("input");
    submit.setAttribute("type","button");
    submit.setAttribute("onclick","makeCall('update')");
    submit.setAttribute("value","Submit Changes")
    var cancel = document.createElement("input");
    cancel.setAttribute("type","button");
    cancel.setAttribute("value","CANCEL");
    cancel.setAttribute('onclick','doUpdates()');

    var submitRow = document.createElement("tr");
    var submitTD = document.createElement("td");
    submitTD.setAttribute("colspan","6");
    submitTD.appendChild(cancel);
    submitTD.appendChild(submit);
    submitRow.appendChild(submitTD);
    tbody.appendChild(submitRow);
    form.setAttribute("style","text-align:center");
    form.setAttribute("id","editForm");
    //now with everything built open the window and display the form
    //var win = window.open('https://dev-cognos10.intra.tdaf.com/cognos10/blank.html','null','width=900,height=750,toolbar=no,scrollbars=no,location=0,resizable =yes');
    //MakePopup();
    var newScript = document.createElement("script");
    newScript.setAttribute("type","text/javascript");
    newScript.text="function makeCall(text){alert('doThe Update');}";
    document.getElementsByTagName('head')[0].appendChild(newScript);
    document.getElementsByTagName('body')[0].appendChild(form);
    //popupWindow.moveTo(0,0);
    //popupWindow.resizeTo(screen.width,screen.height-100);
    $("#editForm").fadeIn(500);
    positionPopup();
}
function doDelete(){
    //display a confirmation that the kpi will be deleted if they agree then go ahead and expire them
    var deletes = getValues();
    var heading = document.createElement("h1");
    heading.innerHTML = "THE FOLLOWING ENTRIES WILL BE DELETED Press OK to confirm or cancel to close";
    heading.setAttribute("sytle","text-align:center");

    var form = document.createElement("form");
    var table = document.createElement("table");
    table.setAttribute("style","text-align:center");
    var tbody = document.createElement("tbody");
    //build the header for the table
    var header = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = "KPI Name";
    var td2 = document.createElement("td");
    td2.innerHTML = "KPI Category";
    var td3 = document.createElement("td");
    td3.innerHTML = "KPI Definition";
    var td4 = document.createElement("td");
    td4.innerHTML = "KPI Owner";
    var td5 = document.createElement("td");
    td5.innerHTML = "Monthly Actual";
    var td6 = document.createElement("td");
    td6.innerHTML = "Monthly Goal";

    header.appendChild(td1);
    header.appendChild(td2);
    header.appendChild(td3);
    header.appendChild(td4);
    header.appendChild(td5);
    header.appendChild(td6);

    //create the heading to alert the user that these will be deleted
    var temptr = document.createElement("tr");
    var temptd = document.createElement("td");
    temptd.setAttribute("colspan","6");
    temptd.appendChild(heading);
    temptr.appendChild(temptd);
    tbody.appendChild(temptr);
    tbody.appendChild(header);

    var deleteSize = deletes.length;
    for (var i=0;i<deleteSize;i++){
        var row = deletes.pop();
        //reverse the array so that they remain in the same order when we pop them
        row = row.reverse();
        //create a Table row object
        var tr = document.createElement("tr");
        var rowSize = row.length;
        for (var j=0;j<rowSize;j++){
            var td = document.createElement("td");
            var input = document.createElement("input");
            input.setAttribute("value",row.pop());
            input.setAttribute("name","tr"+i+"td"+j);
            input.setAttribute("id","tr"+i+"td"+j);
            input.setAttribute("type","text");
            input.setAttribute("readonly","readonly");
            input.setAttribute("disabled","disabled");
            td.appendChild(input);
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    //now that we have everything append them
    table.appendChild(tbody);
    form.appendChild(table);
    //add a button to the form for submitting
    var submit = document.createElement("input");
    submit.setAttribute("type","button");
    submit.setAttribute("onclick","makeCall('delete')");
    submit.setAttribute("value"," OK   ")
    var cancel = document.createElement("input");
    cancel.setAttribute("type","button");
    cancel.setAttribute("value","CANCEL");
    cancel.setAttribute("onclick","doClose()");

    var submitRow = document.createElement("tr");
    var submitTD = document.createElement("td");

    submitTD.setAttribute("colspan","6");
    submitTD.appendChild(cancel);
    submitTD.appendChild(submit);
    submitRow.appendChild(submitTD);
    tbody.appendChild(submitRow);
    form.setAttribute("style","text-align:center;display:none");
    form.setAttribute("id","editForm");
    //now with everything built open the window and display the form
    //var win = window.open('https://dev-cognos10.intra.tdaf.com/cognos10/blank.html','null','width=900,height=750,toolbar=no,scrollbars=no,location=0,resizable =yes');
    var newScript = document.createElement("script");
    newScript.setAttribute("type","text/javascript");
    newScript.text="function makeCall(text){alert('doThe Delete');}";
    document.getElementsByTagName('head')[0].appendChild(newScript);
    document.getElementsByTagName('body')[0].appendChild(form);
    $("#editForm").fadeIn(500);
    positionPopup();
    //win.moveTo(0,0);
    //win.resizeTo(screen.width,screen.height-100);
}
function generateRow(counter){
    var tr = document.createElement("tr");
    for (var j=0;j<6;j++){
        var td = document.createElement("td");
        var input = document.createElement("input");
        input.setAttribute("value","");
        input.setAttribute("name","tr"+counter+"td"+j);
        input.setAttribute("id","tr"+counter+"td"+j);
        input.setAttribute("type","text");
        td.appendChild(input);
        tr.appendChild(td);
    }
    return [tr,counter];
}
function doInsert(){
    //display the main header table with input types and a button to add more if you want them
    var form = document.createElement("form");
    var table = document.createElement("table");
    table.setAttribute("style","text-align:center");
    table.setAttribute("id",'insertTable');
    var tbody = document.createElement("tbody");
    //build the header for the table
    var header = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = "KPI Name";
    var td2 = document.createElement("td");
    td2.innerHTML = "KPI Category";
    var td3 = document.createElement("td");
    td3.innerHTML = "KPI Definition";
    var td4 = document.createElement("td");
    td4.innerHTML = "KPI Owner";
    var td5 = document.createElement("td");
    td5.innerHTML = "Monthly Actual";
    var td6 = document.createElement("td");
    td6.innerHTML = "Monthly Goal";

    header.appendChild(td1);
    header.appendChild(td2);
    header.appendChild(td3);
    header.appendChild(td4);
    header.appendChild(td5);
    header.appendChild(td6);

    tbody.appendChild(header);
    var row = generateRow(0);
    tbody.appendChild(row[0]);

    //now that we have everything append them
    table.appendChild(tbody);
    form.appendChild(table);

    //add a button to the form for submitting
    var submit = document.createElement("input");
    submit.setAttribute("type","button");
    submit.setAttribute("onclick","makeCall('insert')");
    submit.setAttribute("value","Submit Inserts")

    var addrow = document.createElement("input");
    addrow.setAttribute("type","button");
    addrow.setAttribute("value","Add Row");
    addrow.setAttribute("onclick","addRow(this)");

    var cancel = document.createElement("input");
    cancel.setAttribute("type","button");
    cancel.setAttribute("value","CANCEL");
    cancel.setAttribute("onclick","doClose()");

    var submitRow = document.createElement("tr");
    var submitTD = document.createElement("td");

    submitTD.setAttribute("colspan","6");
    submitTD.appendChild(cancel);
    submitTD.appendChild(submit);
    submitTD.appendChild(addrow);
    submitRow.appendChild(submitTD);
    tbody.appendChild(submitRow);
    form.setAttribute("style","text-align:center;display:none");
    form.setAttribute("id","editForm");
    var newScript = document.createElement("script");
    newScript.setAttribute("type","text/javascript");
    newScript.text="var rowcount = 1; function makeCall(text){alert('doThe Insert');} \n function addRow(elem){     var table = document.getElementById('insertTable');     var lastrow = elem.parentNode.parentNode.innerHTML;     table.deleteRow(-1);     rowcount= rowcount+1;          var tr = document.createElement('tr');     for (var j=0;j<6;j++){         var td = document.createElement('td');         var input = document.createElement('input');         input.setAttribute('value','');         input.setAttribute('name','tr'+rowcount+'td'+j);         input.setAttribute('id','tr'+rowcount+'td'+j);         input.setAttribute('type','text');         td.appendChild(input);         tr.appendChild(td);     }     table.appendChild(tr);     var tr2 = document.createElement('tr'); tr2.innerHTML = lastrow; table.appendChild(tr2);}";
    //newScript.text="unction makeCall(text){alert('doThe Insert');} function addRow(){$('#insertTable tr:last').before(<tr><td</tr>);}";
    document.getElementsByTagName('head')[0].appendChild(newScript);
    document.getElementsByTagName('body')[0].appendChild(form);
    $("#editForm").fadeIn(500);
    positionPopup();
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
<style>
#editForm{
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 900px;
    height: 750px;
}
</style>
</head>
<body>
    <table style="border-collapse:collapse;" class="ls" lid="List1_NS_" cellpadding="0">
      <tbody>
        <tr>
          <td class="c_NS_10 lt" cid="0" uid="10" name="c_NS_10" type="columnTitle">
            <span tabindex="0" class="textItem">Update</span>
          </td>
          <td class="c_NS_12 lt" cid="1" uid="12" name="c_NS_12" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="1">KPI_Name</span>
          </td>
          <td class="c_NS_14 lt" cid="2" uid="14" name="c_NS_14" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="2">KPI_category</span>
          </td>
          <td class="c_NS_16 lt" cid="3" uid="16" name="c_NS_16" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="3">KPI_definition</span>
          </td>
          <td class="c_NS_18 lt" cid="4" uid="18" name="c_NS_18" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="4">KPI_owner</span>
          </td>
          <td class="c_NS_20 lt" cid="5" uid="20" name="c_NS_20" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="5">Monthly_actual</span>
          </td>
          <td class="c_NS_22 lt" cid="6" uid="22" name="c_NS_22" type="columnTitle">
            <span tabindex="-1" class="textItem" ctx="6">Monthly_goal</span>
          </td>
        </tr>
        <tr>
          <td style="" class="c_NS_25 lc" cid="0" uid="25" name="c_NS_25" type="datavalue">
            <input type="checkbox" />
          </td>
          <td style="" class="c_NS_27 lc" cid="1" uid="27" name="c_NS_27" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="7:8:9:10:11:12">Name 1</span>
          </td>
          <td style="" class="c_NS_29 lc" cid="2" uid="29" name="c_NS_29" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="8:7:9:10:11:12">Cat 1</span>
          </td>
          <td style="" class="c_NS_31 lc" cid="3" uid="31" name="c_NS_31" type="datavalue"></td>
          <td style="" class="c_NS_33 lc" cid="4" uid="33" name="c_NS_33" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="10:7:8:9:11:12">Owner 1</span>
          </td>
          <td class="c_NS_35 lm" cid="5" uid="35" name="c_NS_35" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="11:7:8:9:10:12">17</span>
          </td>
          <td style="" class="c_NS_37 lm" cid="6" uid="37" name="c_NS_37" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="12:7:8:9:10:11">14</span>
          </td>
        </tr>
        <tr>
          <td style="" class="c_NS_25 lc" cid="0" uid="25" name="c_NS_25" type="datavalue">
            <input type="checkbox" />
          </td>
          <td style="" class="c_NS_27 lc" cid="1" uid="27" name="c_NS_27" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="13:8:9:14:15:16">Name 2</span>
          </td>
          <td style="" class="c_NS_29 lc" cid="2" uid="29" name="c_NS_29" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="8:13:9:14:15:16">Cat 2</span>
          </td>
          <td style="" class="c_NS_31 lc" cid="3" uid="31" name="c_NS_31" type="datavalue"></td>
          <td style="" class="c_NS_33 lc" cid="4" uid="33" name="c_NS_33" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="14:13:8:9:15:16">Owner 2</span>
          </td>
          <td class="c_NS_35 lm" cid="5" uid="35" name="c_NS_35" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="15:13:8:9:14:16">17</span>
          </td>
          <td style="" class="c_NS_37 lm" cid="6" uid="37" name="c_NS_37" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="16:13:8:9:14:15">14</span>
          </td>
        </tr>
        <tr>
          <td style="" class="c_NS_25 lc" cid="0" uid="25" name="c_NS_25" type="datavalue">
            <input type="checkbox" />
          </td>
          <td style="" class="c_NS_27 lc" cid="1" uid="27" name="c_NS_27" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="17:8:9:18:19:20">Name 3</span>
          </td>
          <td style="" class="c_NS_29 lc" cid="2" uid="29" name="c_NS_29" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="8:17:9:18:19:20">Cat 3</span>
          </td>
          <td style="" class="c_NS_31 lc" cid="3" uid="31" name="c_NS_31" type="datavalue"></td>
          <td style="" class="c_NS_33 lc" cid="4" uid="33" name="c_NS_33" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="18:17:8:9:19:20">Owner 3</span>
          </td>
          <td class="c_NS_35 lm" cid="5" uid="35" name="c_NS_35" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="19:17:8:9:18:20">17</span>
          </td>
          <td style="" class="c_NS_37 lm" cid="6" uid="37" name="c_NS_37" type="datavalue">
            <span tabindex="-1" class="textItem" ctx="20:17:8:9:18:19">14</span>
          </td>
        </tr>
      </tbody>
    </table>
    <input value="Update Selected" onclick="doUpdates()" type="button" />
    <input value="Delete Selected" onclick="doDelete()" type="button" />
    <input value="Insert KPI" onclick="doInsert()" type="button" /></form>
</body>
</html>

Replies(7)

Godsbest

Re: Issue with popups in IE

8 years ago

You need to wait until the DOM is ready before you fire up your code. Enclose your code, not necessarily the functions, in $(function() { ..... }

dasecretz..

Re: Issue with popups in IE

8 years ago

I thought that too but I enclosed it in the document.ready and that still didn't work

Godsbest

Re: Issue with popups in IE

8 years ago

Just a few comments; hope they will help:

1. You seem to be still using plain JS a lot --- raising the chance running into cases of having to do this for that browser and that for the other. Take advantage of jQuery. For the most part, you do not have to worry about adjusting your code for a particular browser

2. IE does not like changing or setting the type of an existing input element. Rather than create an input element and then assign the type attribute, create it with the attribute. Example: $('body').append( '<input type="text" name="firstName" id="firstName">' )

Let me run some tests on your code.

Godsbest

Re: Issue with popups in IE

8 years ago

I just compared Chrome & IE 10; I don't see much difference. Which would be easier for you?

1. To convert your code into jQuery. It would be so much shorter and many more of us on this forum would be more comfortable to take a look if you'd still be having an issue. My guess is that in the process your problem will be taken care.

2. To stick with JS and re-post your question in a JavaScript forum. My guess is that people that work with plain JavaScript on a constant basis are more likely to identify the cause of your issue pretty fast.

The choice is yours. We're willing to help and you'd want to help us do that.

dasecretz..

Re: Issue with popups in IE

8 years ago

I'm still kind of new to jquery. and this is a legacy website i'm trying to add new functionality to it. With this though the issue isn't in creating the elements. Once i create the form and then use jquery to do the "fadein" my form is shown properly with some buttons on it as well. The issue is in the fedein form the buttons onclick don't work in IE but they do in firefox.

dasecretz..

Re: Issue with popups in IE

8 years ago

ok so i redid all the javascript and converted it to jquery

<script type="text/javascript" src="https://dev-cognos10.intra.tdaf.com/cognos10/common/jquery/jquery.js"></script>
<script type="text/javascript">
var popupWindow = null;
var popupIsShown = false;
var count = 0;
function getValues(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    var updates = new Array();
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            //check if the box is checked
            if(inputs[i].checked){
                //get to the row and get all the elements from it
                var row = inputs[i].parentNode.parentNode
                //skip the first cell since it is the checkbox
                //the rest of the rows are in the order of KPIName,KPI Category, KPI definition, KPI owner, MonthlyActual, Monthly Goal
                var tempData = new Array();
                if (row.cells[1].childNodes[1] != null)
                    tempData.push(row.cells[1].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[2].childNodes[1] != null)
                    tempData.push(row.cells[2].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[3].childNodes[1]!=null)
                    tempData.push(row.cells[3].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[4].childNodes[1]!=null)
                    tempData.push(row.cells[4].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[5].childNodes[1]!=null)
                    tempData.push(row.cells[5].childNodes[1].innerHTML);
                else
                    tempData.push("");
                if (row.cells[6].childNodes[1]!=null)
                    tempData.push(row.cells[6].childNodes[1].innerHTML);
                else
                    tempData.push("");
                updates.push(tempData);
            }
        }
    }
    return updates;
}
function removeCheck(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            if(inputs[i].checked){inputs[i].checked=false;}
        }
    }
}
function checkAll(){
    //get all the elements that are inputs
    var inputs = document.getElementsByTagName("input");
    for(var i=0; i< inputs.length; i++){
        if (inputs[i].type == "checkbox"){
            if(!inputs[i].checked){inputs[i].checked=true;}
        }
    }
}
//position the popup at the center of the page
function positionPopup(){
if(!$("#editForm").is(':visible')){
    return;
}
$("#editForm").css({
      left: ($(window).width() - $('#editForm').width()) / 2,
      top: ($(window).width() - $('#editForm').width()) / 7,
      position:'absolute'
});
}
function doClose(){
    $("#editForm").fadeOut(500);
    $("#editForm").remove();
}
function doUpdates(){
    var updates = getValues();
    //now with the selected cells pop open a box and add each one to a new window to update here and then push to a bean
    var code = "<form id='editForm' style='text-align:center'> <table style='text-align:center'><tbody><tr><td>KPI Name</td><td>KPI Category</td><td>KPI Definition</td><td>KPI Owner</td><td>Monthly Actual</td><td>Monthly Goal</td></tr>";

    var updateSize = updates.length;
    for (var i=0;i<updateSize;i++){
        var row = updates.pop();
        //reverse the array so that they remain in the same order when we pop them
        row = row.reverse();
        //create a Table row object
        code += "<tr>";
        var rowSize = row.length;
        for (var j=0;j<rowSize;j++){
            if (j<4){
                code += "<td><input name='tr"+i+"td"+j+"' id='tr"+i+"td"+j+"' type='text' readonly disabled value='"+row.pop()+"'/></td>";
            }
            else{
                code += "<td><input name='tr"+i+"td"+j+"' id='tr"+i+"td"+j+"' type='text' value='"+row.pop()+"'/></td>";
            }
        }
        code += "</tr>";
    }
    code += "<tr><td colspan='6'><input type='button' onclick='doClose()' value='CANCEL'/><input type='button' onclick=\"makeCall('do The update')\" value='Submit Changes'/></td></tr>";
    code += "</tbody></table> </form>";
    //now with everything built open the window and display the form
    $('body').append(code);
    //popupWindow.moveTo(0,0);
    //popupWindow.resizeTo(screen.width,screen.height-100);
    $("#editForm").fadeIn(500);
    positionPopup();
}
function makeCall(text){
    alert(text);
}
function doDelete(){
    //display a confirmation that the kpi will be deleted if they agree then go ahead and expire them
    var deletes = getValues();
    var code = "<form id='editForm' style='text-align:center'> <table style='text-align:center'><tbody><tr><td colspan='6'><h1>THE FOLLOWING ENTRIES WILL BE DELETED <br/> Press OK to confirm or cancel to close</h1></td></tr><tr><td>KPI Name</td><td>KPI Category</td><td>KPI Definition</td><td>KPI Owner</td><td>Monthly Actual</td><td>Monthly Goal</td></tr>";

    var deleteSize = deletes.length;
    for (var i=0;i<deleteSize;i++){
        var row = deletes.pop();
        //reverse the array so that they remain in the same order when we pop them
        row = row.reverse();
        //create a Table row object
        code += "<tr>";
        var rowSize = row.length;
        for (var j=0;j<rowSize;j++){
            code += "<td><input name='tr"+i+"td"+j+"' id='tr"+i+"td"+j+"' type='text' readonly disabled value='"+row.pop()+"'/></td>";
        }
        code +="</tr>";
    }
    code += "<tr><td colspan='6'><input type='button' onclick='doClose()' value='CANCEL'/><input type='button' onclick=\"makeCall('do The Delete')\" value=' OK '/></td></tr>";
    code += "</tbody></table> </form>";
    $('body').append(code);
    $("#editForm").fadeIn(500);
    positionPopup();
}
function generateRow(counter){
    var temp = "<tr>";
    for (var j=0;j<6;j++){
        temp += "<td><input name='tr"+counter+"td"+j+"' id='tr"+counter+"td"+j+"' type='text'/></td>";
    }
    count = count+1;
    return temp;
}
function addRow(){
    $('#formTable tr:last').before(generateRow(count));
}
function doInsert(){
    var code = "<form id='editForm' style='text-align:center'> <table id='formTable' style='text-align:center'><tbody><tr><td>KPI Name</td><td>KPI Category</td><td>KPI Definition</td><td>KPI Owner</td><td>Monthly Actual</td><td>Monthly Goal</td></tr>";
    code += generateRow(count);

    code += "<tr><td colspan='6'><input type='button' onclick='doClose()' value='CANCEL'/><input type='button' onclick=\"addRow()\" value='Add Row'/><input type='button' onclick=\"makeCall('do The Insert')\" value='Submit Insert'/></td></tr>";
    code += "</tbody></table> </form>";
    $('body').append(code);
    $("#editForm").fadeIn(500);
    positionPopup();
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>