Search jQuery

jQuery Forum

Screen name:
dasecretzofwar

dasecretzofwar's Profile

1 Posts

4 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Issue with popups in IE
[7Replies]
- 03-Apr-2013 03:53 PM
- Forum: Using jQuery
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?
1. <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>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend