[RESOLVED] Working in IE but Not working in Mozilla ??

[adusumalli]

Hi ,

In my application i have a small popup window. when i close the cornor icon(x) it's not closing in mozilla. But it is closing in IE. I am using the following code.

function newApptNameInline( day, start,cell )  // this JS method is calling unnecessorly. this JS method is for opening a popup.
 {
    // Don't process if there's a refresh in progress
    if ( fcCalRefreshInProgress == 1 )
      return;
      
    if (disableNewApptOnClick) 
    {
      disableNewApptOnClick = false;
      return;
    }
    newApptNameInlineDay   = day;
    newApptNameInlineStart = start;

    obj = null;
    if (fcNewApptNameHolder == null) {
      fcNewApptNameHolder = document.getElementById('fcNewApptName');     
      obj = fcNewApptNameHolder;
    }
    else {
      obj = fcNewApptNameHolder;
    }
         
    // Add it to the table cell so it will display there.
    cell.appendChild(obj);
    $('fcQuickAddRemember').checked = typeof quickupdatevalue != 'undefined' ? quickupdatevalue : $('fcQuickAddRemember').checked;

    // un-hide it    
    obj.style.visibility = 'visible';
    obj.style.display = "block";

    // put it above any other divs (hopefully)
    obj.style.zIndex = 99999;
    
    $('fcNewApptNameInput').value = '';
    $('fcNewApptNameInput').focus();
    $('fcNewApptNameInput').select();
  }
</script>

thanks in advance..

[Xeel]

I see many places in the code which could be considered doubtful at least for non-IE browsers.

Instead of correcting the code which is impossible without the rest of the involved js and related html - I'll give some advices for js in GRE (Mozilla):

- When defining a function always set all parameters. IE allows to call a function without defined parameter, GRE does not. Interesting fact that you can miss a parameter when you call a function but not viceversa. Example:

function myfunc(param1, param2){...}
...
//this works. the parameters are filled in from left to right:
<input type="button" value="run" onclick="myfunc(param1Value);" ></a>

//this will not work in GRE browsers, you have to specify the parameter when defining a function:
<input type="button" value="run" onclick="myfunc(param1Value,param2Value,param3Value);" />

- define variables with var, unless they are already defined globally.
- be carefull with appendChild() method. The node object can be different from the one got in IE. This applies especially in cases of table structure alteration (better use innerText or innerHTML properties).
- z-index attribute mainly works for IE. Do not expect other browsers respect it the same way or read at all.
- be carefull when returning events. This works completely differently in non-IE browsers. Here goes a cross-browser solution:

//example of a function that allows to type only numbers:
function onlyNum(evt){
    var charCode = (evt.which)?evt.which:event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}
...
<input type="text" value="" name="tel" onkeydown="return onlyNum(event);" />

- use correct methods to walk through the DOM: document.getElementById("id"), document.form[0].name, etc.
- try to be sure that some function works only for IE (for ex.) when you submit it to browser detection test using if.
- the correct way to set/alter readonly and disabled attributes is:

myElement.disabled = "disabled" //for disabled
myElement.disabled = ""; //for enabled
myElement.readOnly = "readonly"; //capital 'O' is necessary

<input type="text" name="param1" value="" disabled="disabled" />
<input type="text" name="param1" value="" readonly="readonly" />

If you still have problems post the rest of js and html. I'll see what I can do...

[adusumalli]

thanks for immediate response. Actually my page shows no.of empty rows in table it looks like notebook lines. On that page when i click it opens a small prompt box. to create some appointments. From here i am calling the Js method to open that small popup.

  <TD class=verySmall bgcolor=<&#37;=cellbgcolor%> width=<%=bsx%> align=left valign=top id="CELL_NO_0_<%=hour*2%>"
         onclick="newApptNameInline( '<%=ozDay.renderDayKey(_ahsPage)%>', '<%=BaseCalTime.formatHour( hour, 0 )%>',this);" scope="col">
        <img src="graphics/z0.gif" width=1 height=1 align=top id="loc_0_<%=hour*2%>" >
  </TD>

<script>
function newApptNameInline( day, start,cell )   // this JS method to visible the popup calling from above code.
 {
    // Don't process if there's a refresh in progress
    if ( fcCalRefreshInProgress == 1 )
      return;
      
    if (disableNewApptOnClick) 
    {
      disableNewApptOnClick = false;
      return;
    }
    newApptNameInlineDay   = day;
    newApptNameInlineStart = start;

    obj = null;
    if (fcNewApptNameHolder == null) {
      fcNewApptNameHolder = document.getElementById('fcNewApptName');     
      obj = fcNewApptNameHolder;
    }
    else {
      obj = fcNewApptNameHolder;
    }
         
    // Add it to the table cell so it will display there.
    cell.appendChild(obj);
    $('fcQuickAddRemember').checked = typeof quickupdatevalue != 'undefined' ? quickupdatevalue : $('fcQuickAddRemember').checked;

    // un-hide it    
    obj.style.visibility = 'visible';
    obj.style.display = "block";

    // put it above any other divs (hopefully)
    obj.style.zIndex = 99999;
    
    $('fcNewApptNameInput').value = '';
    $('fcNewApptNameInput').focus();
    $('fcNewApptNameInput').select();
  }
</script>

// Here is my small popup window code. it looks like prompt box.

<div id="fcNewApptName" onclick=""
      style="visibility: hidden; overflow: none; position: absolute; border: 1px solid black; background-color: white;">
<table border="0" cellspacing="0" style="padding: 0px;">
              <tbody>
                <tr>
                  <td style="padding: 0px;">
                    <input type=text size=32 id=fcNewApptNameInput name=fcNewApptNameInput class=verySmall
                      style="border: 1px solid; padding: 0px; " value=""
                      onkeypress="handleKeyPressExecFunc(event, newApptSaveAndClose,null)"
                      onclick="disableNewApptOnClick=true;">
                  </td style="padding: 0px;">
               <td class="verySmall" align="right" bgcolor="#ddddee" style="padding: 0px;">
                    <img src="graphics/ozIcon13Close.gif"
                      onclick="newApptCloseWithoutSaving();">  // this is i am trying to close (x) button.
                  </td> 
                </tr>
              </tbody>
            </table> 
</div>

when i am going to close the following JS method is calling.

 function newApptCloseWithoutSaving()
  {
     newAppointmentNameHideDiv();
  }
function newAppointmentNameHideDiv()   // this method is to hide the popup
  {
    if ( fcCalRefreshInProgress == 1 )
      return;

     obj = null;
    if (fcNewApptNameHolder == null) {
      fcNewApptNameHolder = document.getElementById('fcNewApptName');
      obj = fcNewApptNameHolder;
    }
    else {
      obj = fcNewApptNameHolder;
    }

     // Hide it
    obj.style.visibility = 'hidden';
    obj.style.display = 'none';

    // remove it from the table cell
    obj.parentNode.removeChild(obj);

    // place it in a "holder"
    $('fcApptsMain').appendChild(obj);
   
  }

After the above method newAppointmentNameHideDiv() is executing, again newApptNameInline( day, start,cell ) JS method is calling to visible the promptbox(popup) because of onClick().

thanks ..

[adusumalli]

Now I got it. thanks.