Application works fine in mozilla but not in IE

Question

nidhikayadav 0 Newbie Poster

16 Years Ago

Hi,

I am using apache server on my local system [http:\localhost\xy]. Problem is like:-

i have made radio buttons, push buttons and associated actions that are handelled using YAHOO.util.Connect.asyncRequest. Then the actions like displaying results , poping up of other dialogs are handled via mozilla but not through IE. Nothing happens on IE as if there is no action associated with the radio and push buttons.

Hope this is clear . or i should give some samle patch of the application

Thanks
Nidhika

javascript

3 Contributors
4 Replies
92 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by langsor

nikesh.yadav 4 Posting Whiz in Training

16 Years Ago

will u send me code

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

langsor · Answer 1 · 2008-08-07T04:03:39+00:00

Without code examples of at very least the actions you're speaking of, there's no way of knowing how to debug your problem...what do you mean by actions? Ajax request actions, DHTML-DOM page-write actions ???

If you're trying to write text from Ajax response data Mozilla populates text nodes between elements and IE does not ... this has tripped me up before.

If the Ajax request is simply not working on IE then there might be some issue with the Yahoo utility you're using, since Moz and IE have different HTTP request type objects they use.

... the list goes on.

Please be specific.

thanks

nidhikayadav 0 Newbie Poster · Answer 2 · 2008-08-12T17:07:22+00:00

The following is the index.html used

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">


<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="./yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="./yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="./yui/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="./yui/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/menu/assets/skins/sam/menu.css" />


<!-- script files -->
<script type="text/javascript" src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./yui/build/connection/connection-min.js"></script>
<script type="text/javascript" src="./yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/datatable/datatable-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/button/button-min.js"></script>
<script type="text/javascript" src="../yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../yui/build/button/button-beta.js"></script>
<script type="text/javascript" src="../yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/connection/connection.js"></script>
<script type="text/javascript" src="../yui/build/container/container.js"></script>
<script type="text/javascript" src="../yui/build/button/button-beta.js"></script>
<script type="text/javascript" src="../yui/build/container/container_core.js"></script>
<script type="text/javascript" src="../yui/build/menu/menu.js"></script>
<script type="text/javascript" src="../yui/build/tabview/tabview.js"></script>



<script type="text/javascript">


</script>


</head>


<body class=" yui-skin-sam" >



</style>


<td>
<table id ="main-view-parent-table"  bgcolor=#F0C1C1  border="1" >
<tr><td>
<table  id="main-view-table"  >
<CAPTION align="center"><font color="#FFFFFF"><b>Click the radio button.</b></font></CAPTION>
<tr id="main-view-row">
<td><input type="radio" name="select me" value="select me" id="d1"><b>click me</b></td>
</tr>
</table>
</tr></td>
</table>


</td>
</tr>
</table>



<script>
YAHOO.namespace("example.container");



function initbu2() {



var handleClose = function() {
this.cancel();
};


YAHOO.example.container.dialogbu2 = new YAHOO.widget.Dialog("dialogbu2",
{ width : "35em",


visible : false,


zindex:4,


buttons : [ { text:"Close", handler:handleClose}]
});


YAHOO.example.container.dialogbu2.moveTo(400,400);
YAHOO.example.container.dialogbu2.render();
}
function initbu1(){


var handleok = function() {
YAHOO.example.container.dialogbu2.show();
};
var handleCancel = function() {
this.cancel();
};


// Instantiate the Dialog
YAHOO.example.container.dialogbu1 = new YAHOO.widget.Dialog("dialogbu1",
{ width : "30em",


visible : false,


zindex:4,


buttons : [ { text:"ok", handler:handleok, isDefault:true },
{ text:"Close", handler:handleCancel } ]
});
// Render the Dialog
YAHOO.example.container.dialogbu1.moveTo(400,400);
YAHOO.example.container.dialogbu1.render();
YAHOO.util.Event.addListener("d1", "click",updateBuList );
YAHOO.util.Event.addListener("d1", "click", YAHOO.example.container.dialogbu1.show, YAHOO.example.container.dialogbu1, true);


}



function updateBuList() {


this.connectionCallback = {
success: function(o) {
if(o.responseText !== undefined)
{
var result = o.responseXML.documentElement;
var sel = document.getElementById("bu-list");


//clear the list
sel.options.length = 0;


bulist = result.getElementsByTagName("data");


var opt = document.createElement("option");
opt.appendChild(document.createTextNode("All Data of XML"));
sel.appendChild(opt);


for(i = 0; i < bulist.length; i++)
{
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(bulist.item(i).firstChild.nodeValue));
sel.appendChild(opt);
}
}
},
failure: function(o) {
alert('error reading xml');
alert(o.responseText);
}
};



var sUrl = '/../cgi-bin/getList.cgi';
// Initiate the HTTP GET request.
this.getXML = YAHOO.util.Connect.asyncRequest('GET',sUrl, this.connectionCallback);


}



YAHOO.util.Event.onDOMReady(initbu1);
YAHOO.util.Event.onDOMReady(initbu2);



</script>


<div id="dialogbu1">
<div class="hd">Reading Xml Information</div>
<div class="bd" >
<label for="users">Select a xml read data:</label>
<select name="bu-list" id="bu-list">
</select>
</div>
</div>



<div id="dialogbu2">
<div class="hd">Dialog Information</div>
<div class="bd" id="dialog-bu2-body">
<table  id="dialog-bu2-table" cellspacing="8" cellpadding="0" valign="top" align="center" border="1">
<CAPTION>Details</CAPTION>
<td><b>col 1</b></td>
<td><b>col 2</b></td>
<td><label for="out_bu"><b>col 1</b></label></td>
<td><label for="out_product"><b>col 2</b></label></td>
</tr>
</table>
</div>
</div>



The following is the cgi script  getList.cgi  used:-



#! D:\utilities\perl\ActivePerl-5.8.8.819-MSWin32-x86-267479\perl\bin\perl
use strict;
use warnings;
use File::Find;
use File::stat;
use CGI qw/:standard/;
use DBI;
use POSIX;



print "Content-Type: text/xml; charset=ISO-8859-1\n\n";



print "<businessUnit>\n";


print " <data>datal</data>\n";
print " <data>data2</data>\n";
print " <data>data3</data>\n";



print "</businessUnit>\n";

I have used apache server.

Thanks
Nidhika

langsor · Answer 3 · 2008-08-13T00:43:47+00:00

Then the actions like displaying results , poping up of other dialogs are handled via mozilla but not through IE. Nothing happens on IE as if there is no action associated with the radio and push buttons.

You need to capture the action-events using javascript -- something like the following -- for each dynamic element on the page.

<head>
<script type="text/javascript">
window.onload = init_handlers;

function init_handlers () {
  var bu_list = document.getElementById('bu-list').onchange = function () {
    for ( var i = 0; i < this.length; i ++ ) {
      if ( this[i].selected ) {
        alert( this[i].value );
      }
    }
  };
}
</script>
</head>
<body>
<select name="bu-list" id="bu-list">
  <option name="one" value="1">One</option>
  <option name="two" value="2">Two</option>
</select>
</body>

From here you can pass the input values to the Ajax methods and retrieve the response values from your CGI script(s).

Since the information you submitted has 18 JavaScript libraries linked in to it, and the YAHOO code is a terrible mess -- being nice here -- and the code you submitted is the interface for the other Ajax methods ...

Maybe you should find a better Ajax library to use, or learn how to write your own ... then you would have learned a great deal :-)

Either way, there is too much code here and not enough time in the day for me to learn how to use the YAHOO libraries.

Maybe someone with existing experience using these libraries will chime in?

Sorry I couldn't be of more help here.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="./yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="./yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="./yui/build/container/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="./yui/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="./yui/build/menu/assets/skins/sam/menu.css" />
<!-- script files -->
<script type="text/javascript" src="./yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./yui/build/connection/connection-min.js"></script>
<script type="text/javascript" src="./yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/datasource/datasource-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/datatable/datatable-beta-min.js"></script>
<script type="text/javascript" src="./yui/build/button/button-min.js"></script>
<script type="text/javascript" src="../yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../yui/build/button/button-beta.js"></script>
<script type="text/javascript" src="../yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../yui/build/event/event.js"></script>
<script type="text/javascript" src="../yui/build/connection/connection.js"></script>
<script type="text/javascript" src="../yui/build/container/container.js"></script>
<script type="text/javascript" src="../yui/build/button/button-beta.js"></script>
<script type="text/javascript" src="../yui/build/container/container_core.js"></script>
<script type="text/javascript" src="../yui/build/menu/menu.js"></script>
<script type="text/javascript" src="../yui/build/tabview/tabview.js"></script>
</head>
<body class=" yui-skin-sam" >
<!--</style> -- 18 script libraries-->
<td>
<table id ="main-view-parent-table" bgcolor=#F0C1C1 border="1" >
  <tr>
    <td><table id="main-view-table" >
        <CAPTION align="center">
        <font color="#FFFFFF"><b>Click the radio button.</b></font>
        </CAPTION>
        <tr id="main-view-row">
          <td><input type="radio" name="select me" value="select me" id="d1">
            <b>click me</b></td>
        </tr>
      </table>
  </tr>
  </td>
  
</table>
</td>
</tr>
</table>
<script>
YAHOO.namespace("example.container");

function initbu2() {
  var handleClose = function() {
    this.cancel();
  };
  
  YAHOO.example.container.dialogbu2 = new YAHOO.widget.Dialog("dialogbu2", { width : "35em", visible : false, zindex : 4, buttons : [ { text:"Close", handler:handleClose}] } );
  YAHOO.example.container.dialogbu2.moveTo(400,400);
  YAHOO.example.container.dialogbu2.render();
}


function initbu1(){
  var handleok = function() {
    YAHOO.example.container.dialogbu2.show();
  };
  
  var handleCancel = function() {
    this.cancel();
  };

  // Instantiate the Dialog
  YAHOO.example.container.dialogbu1 = new YAHOO.widget.Dialog("dialogbu1", { width : "30em", visible : false, zindex : 4, buttons : [ { text:"ok", handler:handleok, isDefault:true }, { text:"Close", handler:handleCancel } ] } );

  // Render the Dialog
  YAHOO.example.container.dialogbu1.moveTo(400,400);
  YAHOO.example.container.dialogbu1.render();
  YAHOO.util.Event.addListener("d1", "click",updateBuList );
  YAHOO.util.Event.addListener("d1", "click", YAHOO.example.container.dialogbu1.show, YAHOO.example.container.dialogbu1, true);
}


function updateBuList () {

  this.connectionCallback = {
    success : function(o) {
      if( o.responseText !== undefined ) {
        var result = o.responseXML.documentElement;
        var sel = document.getElementById("bu-list");
  
        //clear the list
        sel.options.length = 0;
    
        bulist = result.getElementsByTagName("data");
    
        var opt = document.createElement("option");
        opt.appendChild(document.createTextNode("All Data of XML"));
        sel.appendChild(opt);

        for( i = 0; i < bulist.length; i ++ ) {
          var opt = document.createElement("option");
          opt.appendChild(document.createTextNode(bulist.item(i).firstChild.nodeValue));
          sel.appendChild(opt);
        }
      }
    },
    failure: function(o) {
      alert('error reading xml');
      alert(o.responseText);
    }
  };

  var sUrl = '/../cgi-bin/getList.cgi';
  
  // Initiate the HTTP GET request.
  this.getXML = YAHOO.util.Connect.asyncRequest('GET',sUrl, this.connectionCallback);
}


YAHOO.util.Event.onDOMReady(initbu1);
YAHOO.util.Event.onDOMReady(initbu2);

</script>
<div id="dialogbu1">
  <div class="hd">Reading Xml Information</div>
  <div class="bd" >
    <label for="users">Select a xml read data:</label>
    <select name="bu-list" id="bu-list">
    </select>
  </div>
</div>
<div id="dialogbu2">
  <div class="hd">Dialog Information</div>
  <div class="bd" id="dialog-bu2-body">
    <table id="dialog-bu2-table" cellspacing="8" cellpadding="0" valign="top" align="center" border="1">
      <CAPTION>
      Details
      </CAPTION>
        <td><b>col 1</b></td>
        <td><b>col 2</b></td>
        <td><label for="out_bu"><b>col 1</b></label></td>
        <td><label for="out_product"><b>col 2</b></label></td>
      </tr>
    </table>
  </div>
</div>

</body>
</html>