tags:

views:

686

answers:

2

Hi, I'm using AJAX inside my JSF portlet. When the session expires, We are suppose to get the following message(this is the response of AJAX request when session expires)

This page is used to hold your data while you are being authorized for your request.

You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.
<CONTINUE BUTTON>

In IE 6 and 7 I can see the continue button. But in Firefox I don't see that button. Only the text is visible.But in the source code I can see that section, but it is grayed in Firebug.I've the screenshot uploaded to http://img31.imageshack.us/img31/619/firefoxcontinue.jpg Ideally it should automatically forward the user to the login page, since AJAX cannot redirect that, it just displays the response.So Continue button has to be shown inside the portlet. Can someone please tell me why the HTML form is not shown in Mozilla Firefox.

Thanks

I created a test page. The problem is there when we try to insert the Form inside a table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <script type="text/javascript">
    function insertAjax(){
     // alert('inside ajax');
     document.getElementById("wpsportlet").innerHTML='This page is used to hold your data while you are being authorized for your request.<br/><br/>You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.<form action="http://www.google.com" method="get" name="AUTOSUBMIT"><input type="submit" value="Continue"/></form>';

    }

 </script>
 <input type=button value="Submit" onclick="insertAjax();">
  <div id="wpsportlet">


  </div>
 </BODY>
</HTML>

If I nest the form inside a table then the Form is not displayed in Firefox. Can someone please help a work around for this.

A: 

Why don't you add a button using JavaScript when the response is shown to the screen?
This way should work on all browsers...

function addButton() {  
    //Create an input type dynamically.  
    var element = document.createElement('input');  

    //Assign different attributes to the element.  
    element.setAttribute('type', 'button');  
    element.setAttribute('value', 'Continue');  
    element.setAttribute('name', 'somename');  
    element.setAttribute('id', 'someid');  

    var foo = document.getElementById("fooBar");  

    //Append the element in page
    foo.appendChild(element);  
}
Dror
Thanks for your reply Dror. The problem is the above message(from external security manager-sitemeinder) is shown when the session expires.Otherwise some search results are shown. I need to check if the response contains certain fields, then append the element as you told. But this makes the application tightly binded with SiteMinder.
The reason why the form is not displayed inside the table is, we don't have tr and td tags. If I add those tags the form is getting displayed.
glad to hear you got around this - write down your answer and accept it for reference to other people that might need your work-around.
Dror
+1  A: 

Your generated DOM is invalid. Character data (text) and <br>, <form> and <script> elements may not be child elements of elements - only <tbody>, <thead> and <tfoot> element may (although in XHTML you can have <tr> elements too).

For those elements to exist inside a table, they must appear entirely within a table cell.

Given broken HTML, Firefox will do a good job of compensating for author errors, but when the broken DOM is generated with JS, you bypass some of the autocorrection routines.

As an aside, your Doctype (HTML + Transitional + No system identifier) triggers Quirks mode - which doesn't generally help matters.

I suggest:

  1. Switch to a Doctype that triggers Standards mode
  2. Validate your markup
  3. Build the content you are adding with JavaScript using plain HTML instead
  4. Make that validate
  5. Write JavaScript to generate the DOM you have now tested as being valid
David Dorward