Issue with popups in IE

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>

Topic Participants
dasecretzofwar
peter.aganyo

Issue with popups in IE

Issue with popups in IE

Topic Participants

dasecretzofwar

peter.aganyo