tags:

views:

86

answers:

1

I have an AJAX call which loads an Dialog page, now depending upon the content of the data returned on the AJAX call, I want to change the title of the Window, how do I do that.

Here is the snippet of code:

    var divid = "brHistoryForm";
    var url = "getRestoreFiles.action?profileName="+profileName;

    // Create xmlHttp
    var xmlHttp = AJAX();

    // The code...
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            document.getElementById(divid).innerHTML=xmlHttp.responseText;
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);

    $('#brHistoryForm').dialog('open');
    jQuery('#brHistoryForm').focus();

document.getElementById('pageTitle').innerHTML = "<h2>"+profileName+" - B&R History</h2>"

Here 'pageTitle' is a div. When I run the above piece of code, it opens a dialog window, the action is redirected to a jsp page which is loaded inside the div. It works fine, but the title does not get set :(.

I've tried to do the setting of the title in the redirected jsp page, it doesn't work either.

Here is the code of that JSP page:

   <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>B&R History</title>
    </head>
    <body>
         <table style="width: 100%">
            <tr>
                 <td style="width: 40%">
                    <div id="pageTitle">
                        <h2>B&R History</h2>
                    </div>
                 </td>
             </tr>
         </table>

         <table id="diskTable" cellpadding="0" cellspacing="0" border="1" class="display">
             <thead>
                 <tr>
                     <th>Select</th><th>Operation</th>
                     <th>Source</th><th>Destination</th>
                     <th>Status</th><th>Start Time</th><th>End Time</th>
                 </tr>
             </thead>
             <tfoot></tfoot>
             <tbody>
                 <s:iterator value="restoreFileList">
                     <tr>
                         <td>
                            <s:if test="%{status.equals('Finished')}">
                                <input onClick="loadRestoreForm('<s:property value="name"/>', '<s:property value="to_path"/>', '<s:property value="status"/>')" type="radio" name='chk' id="chk" value="<s:property value='id'/>,<s:property value="status"/>" >
                            </s:if>
                            <s:else>
                                 <input type="radio" name='chk' id="chk" value="<s:property value='id'/>,<s:property value="status"/>" disabled>
                            </s:else>
                         </td>
                         <td>
                            <s:if test="%{br_type == 0}">
                                Backup
                            </s:if>
                            <s:else>
                                Restore
                            </s:else>
                         </td>
                         <td><s:property value="from_path"/></td>
                         <td><s:property value="to_path"/></td>
                         <td><s:property value="status"/></td>
                         <td><s:property value="start_time"/></td>
                         <td><s:property value="end_time"/></td>
                     </tr>
                 </s:iterator>
             </tbody>
         </table>
    </body>
</html>

Any help would be appreciated.

+1  A: 

try

// The code...
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById(divid).innerHTML=xmlHttp.responseText;
        document.getElementById('pageTitle').innerHTML = "<h2>"+profileName+" - B&R History</h2>";
    }
}
Reigel
Awesome, works thanks!!
Panther24