JavaScript - Should I Be Using Javascript/ajax For This..?

i have a drop down which triggers a ajax call. The ajax response is a form with various fields depending upon the drop down option selected.

I have a text field in that response form which is to input the date. i have a calender widget and wish to display that as a popup with an onfocus or onclick on that text field. But becoz of the ajax response it does not let me do it.

I know the problem is in the creation and destruction of the element where the calender has to be displayed so i tried putting the callender intiialization function in another function and calling that onclick but id doesnt work. below is my modified javascript code for the initialization of the calendar.
Code:

<script type="text/javascript">
var calendar1, calendar2, calendar3; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/

function cal_init()
{ alert("hi");
calendar1 = new Epoch('cal1','popup',document.getElementById('calendar1_container'),false);
	calendar2 = new Epoch('cal1','popup',document.getElementById('calendar2_container'),false);
	calendar3 = new Epoch('cal1','popup',document.getElementById('calendar3_container'),false);
};
</script>

Hi,

I am creating a webpage to display menu items in a div tag.
The premis of my page is to use 4 div tags.
1st div tag = company logo (top left)
2nd div tag = img of restaurant and address (top right).
3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc
4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag.

I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags.

The best response I got was with AJAX, but I am not familiar with this language yet.

Can I use JavaScript to do this?

Any suggestions?

Thank you,
Paul

Hi everyone,

I would like to know everyone's thought about how I can achieve seamless browsing on my web application.

I developed a website consisting of a collapsible menu, filters that correspond to a form and a search bar. All three components send information to the iframe I implemented inside this website. The question is that how could I enable seamless browsing (without the page refreshing every time a user sends something to the iframe)?

Right now each time the collapsible menu is clicked, the iframe will add to its url depending on what is clicked (?id= or ?pid= or ?mid=). Each time a filter criteria or a search term is being submitted, a form will be submitted to the iframe. Each time any of the above happens the iframe will reload itself.

It works just fine in my localhost server but once I uploaded the web to the server it will take a second or two to load the information. And I am trying to aviod that.

I understand that it has something to do with AJAX but I do not know where to look as I am new to the concept of AJAX. Please let me know your thoughts or if you need more information about the issue.

Thank you so much!

Jeffrey





Reply With Quote




01-28-2015, 10:23 PM #2

hi friends,

I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations.

any sites showing some example

thnx in advance.

I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate...

It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong.
Problem code in jsbin--> http://jsbin.com/okifa3/

Code:

    $(function() {
    var activateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=1";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
          $('#spanownernamelink' + u).css('display', 'inline');
          $('#' + u).val('Deactivate');
          $('#spanownernametext' + u).css('display', 'none');
          $('#' + u).removeClass('btnActivate');
          $('#' + u).addClass('btnDectivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    var deactivateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=0";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
         $('#spanownernamelink' + u).css('display', 'none');
         $('#spanownernametext' + u).css('display', 'inline');
          $('#' + u).val = 'Activate';
          $('#' + u).removeClass('btnDeactivate');
          $('#' + u).addClass('btnActivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    $(".toggleOwnerButton").click(function() {
      if($(this).val() == 'Activate') {
        activateOwner($(this).attr("id"));
      } else {
        deactivateOwner($(this).attr("id"));
      }
    });
  });

never mind

Could somebody help me please to explain what I'm doing wrong....
a have this html file with references to some javascripts (datagrid from http://www.datatables.net) and this html file work ok..I mean javascripts a css styling works with table...
but when I call this page by ajax and callback (this html page) is forward back into another div , table doesn't work ....just data from page but now functionality from javascript and css styling...
how should I force callback result to use javascript and css?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
		
		
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
		<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
		
		<style type="text/css" media="screen">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "http://www.datatables.net/media/css/site_jui.ccss";
			@import "media/css/demo_table_jui.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
			/*
			 * Override styles needed due to the mix of three different CSS sources! For proper examples
			 * please see the themes example in the 'Examples' section of this site
			 */
			.dataTables_info { padding-top: 0; }
			.dataTables_paginate { padding-top: 0; }
			.css_right { float: right; }
			#example_wrapper .fg-toolbar { font-size: 0.8em }
			#theme_links span { float: left; padding: 2px 10px; }
		</style>

		
		<script type="text/javascript" src="media/js/complete.js"></script>
		<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="media/js/jquery.dataTables.editable.js"></script>
		<script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				$('#example').dataTable().makeEditable({
                    							sUpdateURL: "update.php",
												sDeleteURL: "delete.php"

                    							
										});
				
			} );
		</script>

        
	</head>
   <body id="index" class="grid_2_3">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        
        <thead>
        <tr>
        <th>
        ID</th>
        <th>
        user</th>
        <th>
        password</th>
        <th>
        first</th>
        <th>
        last</th>
        <th>
        company</th>
        </tr>
        
            </thead>
        
            <tbody>
        <tr class="even_gradeA" id="1">
        <td>
        1
        </td>
        <td>
        XY
        </td>
        <td>
        passwoed
        </td>
        <td>
        Ja
        </td>
        <td>
        jajovic
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="2">
        <td>
        2
        </td>
        <td>
        jojo
        </td>
        <td>
        fa25af5301e2dda1fddea740200aa10ab6c70d86
        </td>
        <td>
        jojo
        </td>
        <td>
        jojovicko
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="3">
        <td>
        3
        </td>
        <td>
        kuk
        </td>
        <td>
        d588aebb93e3adf70eac1fb479d6d53f9dc21816
        </td>
        <td>
        kuk
        </td>
        <td>
        kukovic
        </td>
        <td>
        3
        </td>
        </tr>
        <tr class="even_gradeA" id="10">
        <td>
        10
        </td>
        <td>
        admin
        </td>
        <td>
        f865b53623b121fd34ee5426c792e5c33af8c227
        </td>
        <td>
        admin
        </td>
        <td>
        adminovic
        </td>
        <td>
        3
        </td>
        </tr>
        </tbody>
</table><button id="btnDeleteRow">Delete</button>



</body>
</html>

I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it.

window.open does work by pop up windows but I want to stay away from them.
The main code I am looking to get help on is in red under start.php.

In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit.

start.php
Code:

<html>
	<head>
		<title>Countries At War!</title>
      <body style="background-color:#B0C4DE;">
      
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();
			//Initiate the asyncronous request
			
function sayHello() {
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
				    receiveReq.open("GET", 'index.php', true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleSayHello; 
					//Make the actual request.
					receiveReq.send(null);
				 
				}
}
 
			//Called every time our XmlHttpRequest objects state changes.
			function handleSayHello() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					document.getElementById('span_result').innerHTML = receiveReq.responseText;
				}
}

 function openMenu(query) {
  
    var myString = 'query.php?' + query;
   // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150,  location=yes, resizable=no, menubar=no, scrollbars=no')
    //document.getElementById('engine').src = myString;
	//document.getElementById('engine').setAttribute('src',myString;);
	//top.frames['engine'].location.href = myString;
	pausecomp(1000);
    sayHello();
} 
 

function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
} 
			</script>
	</head>
	<body>
<a href="javascript:sayHello();">Say Hello</a><br />
         <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25"
			frameborder="0" scrolling="no" name="engine">
          UPGRADE YOUR BROWSER</iframe>
		<span id="span_result"></span>
        <body onLoad="sayHello();">
	</body>
</html>

index.php
Code:

<table width="100%" border="2" bordercolor="Black">
<tr><center>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td>
</tr></center>
</table>

Thanks in advance for all the help.

Hello

I am using PlainAjax. http://coolpenguin.net/plainajax/?p=examplespostdata

Here is my code and it is not working if i called from Javascript function.

Code:

<script type="JavaScript" src="plainajax.js"></script>
<script language="JavaScript" >

function openWin()
{
	.......		
	.......
	.......
	var selval = selectedValue.toString();	 	// Dynamic value variable
	document.formlist.myval.value = selval; 	// stored to hidden variable

	
	 var cn = document.getElementById( "itsme" ).childNodes;	// Get all the nodes
	
	 var myresult = new Array();					// declare result array
    	 plainajax.request('respurl: req_php.php; resultloc: myresult; paramloc: cn;');
  
	 Window.open("req_php.php");
	
}

</script>

<html>

 <div id="itsme">

	<input type="hidden" name="myval" id="myval" value=""> 
</div>

</html>

req_php.php
=========
Code:

<?php

		echo "value from html = ".$_REQUEST['myval']."<br>";
	
?>

But i am not able to get any value in my php program. What i did wrong in this?

or is anyother way to pass the variable from Javascript (except pass thru url query string, this is not secure)

Thanks

I have something that's called with AJAX when the user enters some text (http://askvoke.com). What I want is to execute some javascript within this "frame". If the frame calls something, with say Code:

<script type=\"text/javascript\">
document.write('h');
</script>

in it, then "h" doesn't appear, and neither does anything besides what would normally be shown if I didn't add that.

Anyone have a solution?

I'm using jquery right now but I sort of understand what the problem is. I'm making a file manager and when you click on an li tag it will do some action depending on if it's a file type or a folder type. There are 3 important files you should know about.

1. filemanager.php (Where the file managing takes place. Starts by including filemanager_getfile.php and including filemanager.js in the head).

2. filemanager_getfile.php (Information that receives information from the ajax request [the directory to be read] and prints the new file list in <li> tags)

3. filemanager.js (Jquery that processes li clicks)

The problem is, when you click on a folder (and it loads the new information from the ajax request) the jquery doesn't check the new li tags when clicked (I'm guessing when you first link the javascript file it has to compile all of the current li information?).

Try it for yourself-
[removed]

Instruction (if it's not already obvious):

-Clicking a file selects if. If files are selected and you click the arrow in the file options it will transfer it (not really, but it will later).

-Clicking a folder will send an ajax request with the new directory information to be checked and return the html

-Clicking the '?' in the file options will display the pages html (I implemented it to debug).

I have tried linking the js page every time I include the new directory information, but the js stacks on each other. So if I click on 3 folders and hit the '?' button it will display the page html 3 times. And if I select the index.php li and click transfer, it will "transfer" 3 times.

filemanager.php
Code:

<div id="goldenSub">
        <div class="title">Golden Subdomain</div>
        <div class="files" id="goldenSubFiles">
            <?
                include("filemanager_getfiles.php");
            ?>
        </div>
        <div id="history" visited="goldensub/"></div>;
        <div class="fileOptions"><img src="images/question.png" title='HTML Information' id="ask"><img src="images/transferto.png" title='Copy File To' id="transferTo"></div>
    </div>

filemanager_getfiles.php
PHP Code:
<?
    $path = $_REQUEST["dir"];
    if($path == "" || $path == null)
    {
        $path = 'goldensub/';
    }
    
    echo "\n<div class='path'>$path</div>\n<ul>\n";
    $handler = opendir($path);
    
    //We need to organize the results. Be default, all files and folders will be
    //located by alphabetical order. But we want to list all folders first, followed
    //by files. By adding the results to arrays first we can decide to print our
    //results in the order we want.
    
    $folderArray = array();
    $fileArray = array();
    
    $folderCount = 0;
    $fileCount = 0;
    
    while(false !==($file=readdir($handler)))
    {    
        if($file != "" && $file != null && $file != "." && $file != "..")
        {
            
            $extensionLocation = strrpos($file, ".");
            
            //Is this a folder or a file?
            if($extensionLocation == null && $extensionLocation == "")
            {
                //This is a folder unless it's the error_log file.
                if($file != "error_log")
                {
                    //Nope, it's definitly a folder. Add it to the folder array.
                    $folderCount++;
                    $folderArray[$folderCount] = $file;
                }
            }
            else
            {
                //This is a file. Add it to the file array.
                $fileCount++;
                $fileArray[$fileCount] = $file;
            }
        }
    }
    
    if($path != 'goldensub/')
    {
        echo "\t<li title='goldensub/' type='folder'>\n\t\t<img src='images/up.png'> goldensub\n\t</li>\n";
    }
    
    for($i = 1; $i<=$folderCount; $i++)
    {
        $newPath = $path.$folderArray[$i].'/';
        echo "\t<li title='$newPath' type='folder'>\n\t\t<img src='images/folderOpen.png'> $folderArray[$i]\n\t</li>\n";
    }
    
    for($i = 1; $i<=$fileCount; $i++)
    {
        $extensionLocation = strrpos($fileArray[$i], ".");
        $nameLength = strlen($fileArray[$i]);
        $extensionLength = $nameLength-$extensionLocation;
        $nameClean = substr($fileArray[$i], 0, $extensionLocation);
        $extension = substr($fileArray[$i], $extensionLocation+1, $nameLength);
        echo "\t<li title='$fileArray[$i]' type='file' extension='$extension'>\n\t\t\n\t<img src='images/$extension.png'> $nameClean\n\t</li>\n";
    }
    echo "</ul>";
?>

filemanager.js
Code:

    $("li").click(function(){
        var type = $(this).attr("type");
        //This is a folder
        if(type == "folder")
        {
            //Path to new directory
            var newPath = $(this).attr("title");
            //Ajax request to filemanager_getfiles.php
            $("#goldenSubFiles").load("filemanager_getfiles.php", { dir: newPath }, function(data){
                //Update log
                newLog("Directory changed to <i><b>"+newPath+"</b></i>");
            });
        }
        //This is a file
        else
        {
            if($(this).hasClass("selected"))
            {
                //It's already selected - deselect it.
                $(this).removeClass("selected");
            }
            else
            {
                //Select it
                $(this).addClass("selected");
            }
        }
    });

Hi, I'm new to these forums so if anything is out of the ordinary let me know for next time or so I can correct it - please.

I am also not very good with javascript but I am trying to learn the whole concept.

Anyways, I am supposed to create pull down menus when I open this page:

Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Tutorial Case

   The 221B Blog
   Author:          
   Date:         

   Filename:         holmes.htm
   Supporting files: menus.js, logo.jpg, sh.jpg, shblog.css
	

-->
   <title>The 221B Blog</title>
   <link href="shblog.css" rel="stylesheet" type="text/css" />
	<script type="text/javascirpt" src="menus.js"></script>
</head>

<body>
   <div id="page">
   <form id="searchForm" action="">

      <div id="logo">
         <img src="logo.jpg" alt="The 221B Blog" />
         <input id="searchTxt" type="text" size="20" />
         <label for="searchTxt">Search</label>
      </div>

      <div id="menu1" class="menu">
         <a href="#">The Adventures of Sherlock Holmes</a>
      </div>
      <div id="menu1List" class="menuList">
         <ul>
            <li><a href="#">A Scandal in Bohemia</a></li>
            <li><a href="#">The Red-headed League</a></li>
            <li><a href="#">A Case of Identity</a></li>
            <li><a href="#">The Boscombe Valley Mystery</a></li> 
            <li><a href="#">The Five Orange Pips</a></li>
            <li><a href="#">The Man with the Twisted Lip</a></li>
            <li><a href="#">The Blue Carbuncle</a></li>
            <li><a href="#">The Speckled Band</a></li>
            <li><a href="#">The Engineer's Thumb</a></li>
            <li><a href="#">The Noble Bachelor</a></li>
            <li><a href="#">The Beryl Coronet</a></li>
            <li><a href="#">The Copper Beeches</a></li>
         </ul>
      </div>

      <div id="menu2" class="menu">
         <a href="#">The Memoirs of Sherlock Holmes</a>
      </div>
      <div id="menu2List" class="menuList">
         <ul>
            <li><a href="#">Silver Blaze</a></li> 
            <li><a href="#">The Yellow Face</a></li> 
            <li><a href="#">The Stock-broker's Clerk</a></li> 
            <li><a href="#">The "Gloria Scott"</a></li> 
            <li><a href="#">The Musgrave Ritual</a></li> 
            <li><a href="#">The Reigate Puzzle</a></li> 
            <li><a href="#">The Crooked Man</a></li> 
            <li><a href="#">The Resident Patient</a></li> 
            <li><a href="#">The Greek Interpreter</a></li> 
            <li><a href="#">The Naval Treaty</a></li> 
            <li><a href="#">The Final Problem</a></li>
         </ul>
      </div>

      <div id="menu3" class="menu">
         <a href="#">The Return of Sherlock Holmes</a>
      </div>
      <div id="menu3List" class="menuList">
         <ul>
            <li><a href="#">The Empty House</a></li> 
            <li><a href="#">The Norwood Builder</a></li> 
            <li><a href="#">The Dancing Men</a></li> 
            <li><a href="#">The Solitary Cyclist</a></li> 
            <li><a href="#">The Priory School</a></li> 
            <li><a href="#">Black Peter</a></li> 
            <li><a href="#">Charles Augustus Milverton</a></li> 
            <li><a href="#">The Six Napoleons</a></li> 
            <li><a href="#">The Three Students</a></li> 
            <li><a href="#">The Golden Pince-Nez</a></li> 
            <li><a href="#">The Missing Three-Quarter</a></li> 
            <li><a href="#">The Abbey Grange</a></li> 
            <li><a href="#">The Second Stain</a></li>
         </ul>
      </div>

      <div id="menu4" class="menu">
         <a href="#">The Case Book of Sherlock Holmes</a>
      </div>
      <div id="menu4List" class="menuList">
         <ul>
            <li><a href="#">The Illustrious Client</a></li> 
            <li><a href="#">The Blanched Soldier</a></li> 
            <li><a href="#">The Mazarin Stone</a></li> 
            <li><a href="#">The Three Gables</a></li> 
            <li><a href="#">The Sussex Vampire</a></li> 
            <li><a href="#">The Three Garridebs</a></li> 
            <li><a href="#">Thor Bridge</a></li> 
            <li><a href="#">The Creeping Man</a></li> 
            <li><a href="#">The Lion's Mane</a></li> 
            <li><a href="#">The Veiled Lodger</a></li> 
            <li><a href="#">Shoscombe Old Place</a></li> 
            <li><a href="#">The Retired Colourman</a></li>
         </ul> 
      </div>

      <div id="menu5" class="menu">
         <a href="#">His Last Bow</a>
      </div>
      <div id="menu5List" class="menuList">
         <ul>
            <li><a href="#">Wisteria Lodge</a></li> 
            <li><a href="#">The Cardboard Box</a></li> 
            <li><a href="#">The Red Circle</a></li> 
            <li><a href="#">The Bruce-Partington Plans</a></li> 
            <li><a href="#">The Dying Detective</a></li> 
            <li><a href="#">The Disappearance of Lady Frances Carfax</a></li> 
            <li><a href="#">The Devil's Foot</a></li> 
            <li><a href="#">His Last Bow</a></li>
         </ul>
      </div>

      <div id="menu6" class="menu">
         <a href="#">The Novels</a>
      </div>
      <div id="menu6List" class="menuList">
         <ul>
            <li><a href="#">A Study in Scarlet</a></li>  
            <li><a href="#">The Sign of the Four</a></li>  
            <li><a href="#">The Hound of the Baskervilles</a></li>  
            <li><a href="#">The Valley of Fear</a></li> 
         </ul> 
      </div>

      <ul id="linkList">
         <li><a href="#">Home</a></li>
         <li class="newGroup"><a href="#">Essays</a></li>
         <li><a href="#">Fan Fiction</a></li>
         <li><a href="#">Art</a></li>
         <li class="newGroup"><a href="#">Discussion Forum</a></li>
         <li class="newGroup"><a href="#">Holmes on the Web</a></li>
         <li><a href="#">The 221B Museum</a></li>
         <li><a href="#">Jeremy Brett Page</a></li>
         <li><a href="#">Basil Rathbone Page</a></li>
         <li><a href="#">The Baker Street Irregulars</a></li>
         <li class="newGroup"><a href="#">Holmes Radio Podcast</a></li>
         <li><a href="#">Holmes Audiobooks</a></li>
         <li class="newGroup"><a href="#">About Arthur Conan Doyle</a></li>
         <li><a href="#">Victorian England</a></li>
         <li><a href="#">Strand Magazine</a></li>
         <li><a href="#">The Holmes Atlas</a></li>
         <li class="newGroup"><a href="#">Other Fictional Detectives</a></li>
         <li class="newGroup"><a href="#">About the WebMaster</a></li>
         <li><a href="#">Issues Archive</a></li>
      </ul>


      <div id="main">
         <img src="sh.jpg" alt="" style="float: right; margin: 0px 0px 5px 5px" />
         <p id="firstp">
            The most famous of fictional detectives, Sherlock Holmes
            first appeared in print in 1887, in stories written by the Scottish author
            and physician, Sir Arthur Conan Doyle. Holmes is famous for his use
            of deductive reasoning to solve difficult and complex cases. Almost
            all Holmes stories are told in the first-person narration of
            Dr. John Watson, Holmes' closest friend and confidant.</p>
   
         <p>Doyle wrote four novels and 56 short stories in the Sherlock Holmes
            canon. The first Holmes tale was the novel, <i>A Study in Scarlet</i>, 
            which chronicled the meeting of Holmes and Watson and covered their 
            first case together. As Doyle wrote additional tales, the Sherlock Holmes 
            stories grew in popularity, becoming a regular feature of <i>The 
            Strand Magazine</i>. Desiring to explore other literary pursuits, Doyle 
            grew tired of the detective and killed off Holmes in the short story
            <i>The Final Problem</i>. However, public acclaim and a desire for more
            Holmes stories eventually persuaded Doyle to resurrect the popular 
            detective, bringing him back in <i>The Adventure of the Empty House</i>.</p>

         <p>Doyle's final Holmes story, <i>His Last Bow</i>, appeared in 1914, but 
            that did not end the public's fascination with Holmes and Watson. Basil 
            Rathbone brought the character to the silver screen in 14 movies
            loosely based on Doyle's original stories. In more recent years,
            Jeremy Brett played Holmes to great critical acclaim over four seasons of 
            the BBC series, <i>The Adventures of Sherlock Holmes</i>. In all, Holmes 
            has been played by over 70 actors appearing in over 200 films.</p>

         <p>To enjoy online versions of the Sherlock Holmes short stories and novels,
            select entries from the menu at the top of this page.</p>
      </div>

   </form>
   </div>

</body>
</html>

Here is my javascript file:

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Tutorial Case

   Author: 
   Date:   

   Filename:  menus.js

   -------------------------------------------------------------
   Function List:
   init()
      Initializes the contents of the holmes.htm Web page, setting
      the display property of the pull-down menus and the initial
      values of the global variables

   moveMenu()
      Moves the active menu from one pull-down menu to another

   changeMenu()
      Change the active menu displayed in the document

   closeOldMenu()
      Closes the active menu

   rollDown()
      Applies a roll-down effect the opening of the active menu 

   -------------------------------------------------------------
   Global Variable List:

   activeMenu
      An object variable pointing to the currently active and open menu
   
   timeID
      A variable containing the id of a timed command using the setInterval method

   clipHgt
      The current height of the active menu as it is being rolled down

   -------------------------------------------------------------
*/

window.onload = init;

var activeMenu = null;
var clipHgt = 0;
var timeID;

function init() {
	var menus = new Array();
	var allElems = document.getElementsByTagName("*");

	for (var i = 0; i < allElems.length; i++) {
		if (allElems[i].className == "menu") menus.push(allElems[i]);
}

for (var i = 0; i < menus.length; i++)  {
	menus[i].onclick = changeMenu;
	menus[i].onmouseover = moveMenu;
}

document.getElementById("logo").onclick = closeOldMenu;
document.getElementById("linkList").onclick = closeOldMenu;
document.getElementById("main").onclick = closeOldMenu;
}

function moveMenu() {
 // this function moves the pull-down menu from one title to another

	if (activeMenu) {
		closeOldMenu();

	menuID = this.id + "List";
	activeMenu = document.getElementById(menuID);
	activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
	activeMenu.style.display = "block";
	timeID = setInterval("rollDown()", 1);
	}
}

function changeMenu() {
	// this function changes the pull-down menu displayed in the document

	closeOldMenu();

	menuID = this.id + "List"; 
	activeMenu = document.getElementById(menuID);
	activeMenu.style.clip = "rect(0px, 150px, 0px, 0px)";
	activeMenu.style.display = "block";
	timeID = setInterval("rollDown()", 1);
}

function closeOldMenu() {
	if (activeMenu) {
	clearInterval(timeID);
	activeMenu.style.display = "none";
	activeMenu = null;
}
}

function rollDown() {
	clipHgt = clipHgt + 10;
	if (clipHgt < 400) {
		activeMenu.style.clip = "rect(0px, 150px," + clipHgt + "px,  0px)";
} else {
	clearInterval(timeID);
	clipHgt = 0;
	}
}

The book's tutorial instructed me to copy down every thing I did yet it doesn't work at all! I've tried on Safari, IE, and Firefox. Can someone tell me what I'm doing wrong?

EDIT: Here is the CSS file.

Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 4
   Tutorial Case

   Author:  
   Date: 
   Filename: shblog.css

   This file contains styles used in the holmes.htm file.

*/

*                   {padding: 0px; margin: 0px; line-height: 1.2}

body                {background-color: white; 
                     font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
                     font-size: 12px}

#page               {position: absolute; top: 0px; left: 10px; width: 850px}

a                   {text-decoration: none; color: black}
p                   {margin: 15px 0px}
ul                  {list-style-type: none}

#logo               {position: absolute: top: 0px; left: 0px;
                     width: 100%; height: 108px; background-color: white; z-index: 3}
#logo img           {float: left}
#logo label         {float: right; margin-top: 15px; margin-right: 10px}
#logo input         {float: right; margin-top: 15px; background-color: ivory}

.menu               {position:absolute; top: 110px; width: 140px; height: 35px; z-index: 3;
                     border: 1px solid black; color: black; background-color: rgb(212, 212, 212);
                     text-align: center}
.menu a             {display: block; width: 140px; height: 35px; color: black}
.menu a:hover       {background-color: rgb(151, 151, 151); color: white}

#menu1, #menu1List  {left: 0px}
#menu2, #menu2List  {left: 141px}
#menu3, #menu3List  {left: 282px}
#menu4, #menu4List  {left: 423px}
#menu5, #menu5List  {left: 564px}
#menu6, #menu6List  {left: 705px}

.menuList           {position: absolute; top: 146px; width: 140px; z-index: 2;
                     background-color: ivory; border: 1px solid black; display: none}

.menuList li        {margin: 5px}
.menuList a         {display: block; width: 132px}
.menuList a:hover   {background-color: rgb(151, 151, 151); color: white}

#linkList           {position: absolute; top: 160px; left: 5px; width: 175px;
                     border-right: 1px solid black}
#linkList li        {line-height: 1.5}
#linkList .newGroup {margin-top: 15px}
#linkList a:hover   {text-decoration: underline overline; 
                     color: red; background-color: ivory}

#main                {position: absolute; top: 160px; left: 190px; z-index: 1}
#firstp              {margin-top: 0px}
#firstp:first-line   {font-variant: small-caps; font-weight: bold}
#firstp:first-letter {float: left; font-size: 400%; font-family: 'Times New Roman', serif;
                      line-height: 0.8; margin: 0px 5px 0px 0px}

It works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later.

Are there any pros that can tell me why this is happening?

I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't.

Code:

var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
} 
}
}

function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;

function updatePage() {
if (username.value.length>0){
if (	 request.responseText.indexOf("0") == -1	 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

}
if (username.value.length===0)
{	userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername="";	}
}

I back tracked what i did and it appears that this code
Code:

var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail.

This is javascript that is suppose to check if a name has been taken by another user.

I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating

I've literally tried everything. Read 26 tutorials, interchanged code, etc.

My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

html form:
Code:

<form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
        <table cellspacing="5" style="border: 2px solid black;">
            <tr>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td>*First name</td>
                            <td align="right"><span id="valid_one"></span></td>

                            <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Last name</td>
                            <td align="right"><span id="valid_two"></span></td>

                            <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Email address</td>
                            <td align="right"><span id="result"></span></td>

                            <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Phone number</td>
                            <td align="right"><span id="valid_three"></span></td>

                            <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                        </tr>
                        <tr>
                            <td align="left">*City/Town</td>
                            <td align="right"><span id="valid_four"></span></td>

                            <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <select name="s">
                                    <option value="AL">Alabama
                                    <option value="AK">Alaska
                                    <option value="AZ">Arizona
                                    <option value="AR">Arkansas
                                    <option value="CA">California
                                    <option value="CO">Colorado
                                    <option value="CT">Connecticut
                                    <option value="DE">Delaware
                                    <option value="FL">Florida
                                    <option value="GA">Georgia
                                    <option value="HI">Hawaii
                                    <option value="ID">Idaho
                                    <option value="IL">Illinois
                                    <option value="IN">Indiana
                                    <option value="IA">Iowa
                                    <option value="KS">Kansas
                                    <option value="KY">Kentucky
                                    <option value="LA">Louisiana
                                    <option value="ME">Maine
                                    <option value="MD">Maryland
                                    <option value="MA">Massachusetts
                                    <option value="MI">Michigan
                                    <option value="MN">Minnesota
                                    <option value="MS">Mississippi
                                    <option value="MO">Missouri
                                    <option value="MT">Montana
                                    <option value="NE">Nebraska
                                    <option value="NV">Nevada
                                    <option value="NH">New Hampshire
                                    <option value="NJ">New Jersey
                                    <option value="NM">New Mexico
                                    <option value="NY">New York
                                    <option value="MC">North Carolina
                                    <option value="ND">North Dakota
                                    <option value="OH">Ohio
                                    <option value="OK">Oklahoma
                                    <option value="OR">Oregon
                                    <option value="PA">Pennsylvania
                                    <option value="RI">Rhode Island
                                    <option value="SC">South Carolina
                                    <option value="SD">South Dakota
                                    <option value="TN">Tennessee
                                    <option value="TX">Texas
                                    <option value="UT">Utah
                                    <option value="VT">Vermont
                                    <option value="VA">Virginia
                                    <option value="WA">Washington
                                    <option value="WV">West Virginia
                                    <option value="WI">Wisconsin
                                    <option value="WY">Wyoming
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><span id="error"></span></td>
                        </tr>
                        <tr>
                            <td valign="top">*Anti-Spam Verification</td>
                            <td></td>
                            <td id="reCaptcha"></td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td align="left">*Affiliation</td>
                            <td align="right"><span id="valid_five"></span></td>

                            <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Research Area:</td>
                            <td align="right"><span id="valid_six"></span></td>

                            <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                        </tr>
                        <tr>
                            <td valign="top" align="left">*Research Overview</td>
                            <td align="right"><span id="valid_seven"></span></td>

                            <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                        </tr>
                        <tr>
                            <td align="left">*Talk Availability</td>
                            <td></td>
                            <td>
                                <input type="radio" name="ta" value="In person">In person
                                <input type="radio" name="ta" value="Online">Online
                                <input type="radio" name="ta" value="Both" checked>Both
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">Links</td>
                            <td></td>
                            <td>
                                <table id="linkTable" border="0">
                                    <td><input type="text" style="width: 320px;" name="link"></td>
                                    <td><div id="result"></div></td>
                                </table>
                            </td>
                            <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="color: red;"></span></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" id="submit" name="submit" value="Submit Form">
    </form>

Javascript file:
Code:

/* 
 * script.js - ajax and table functions
 */

var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions

var validAjax = new Boolean();
var validCaptcha = new Boolean();

var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();

function init() {
    showRecaptcha('reCaptcha');

    // Separate booleans for AJAX funcs
    validAjax = false;
    validCaptcha = false;

    // Booleanse for fields that don't require servlet validation
    valid_one = false;
    valid_two = false;
    valid_three = false;
    valid_four = false;
    valid_five = false;
    valid_six = false;
    valid_seven = false;
}

function showRecaptcha(element) {
    Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}

function validate_form() {
    if (valid_one && valid_two && valid_three && valid_four && validEmail) {
        startCaptchaRequest();

        if (validCaptcha) {
            return true;
        }
    }
    else {
        alert("Submission contains errors. Please fill out all required fields before submitting.");
        return false;
    }
}

function validate_one() {
    if (document.getElementById("fn").value == 0) {
        valid_one = false;
        document.getElementById("valid_one").innerHTML = "No";
    }
    else {
        valid_one = true;
        document.getElementById("valid_one").innerHTML = "";
    }
}

function validate_two() {
    if (document.getElementById("ln").value == 0) {
        valid_two = false;
        document.getElementById("valid_two").innerHTML = "No";
    }
    else {
        valid_two = true;
        document.getElementById("valid_two").innerHTML = "";
    }
}

function validate_three() {
    if (document.getElementById("pn").value == 0) {
        valid_three = false;
        document.getElementById("valid_three").innerHTML = "No";
    }
    else {
        valid_three = true;
        document.getElementById("valid_three").innerHTML = "";
    }
}

function validate_four() {
    if (document.getElementById("c").value == 0) {
        valid_four = false;
        document.getElementById("valid_four").innerHTML = "No";
    }
    else {
        valid_four = true;
        document.getElementById("valid_four").innerHTML = "";
    }
}

function validate_five() {
    if (document.getElementById("affl").value == 0) {
        valid_five = false;
        document.getElementById("valid_five").innerHTML = "No";
    }
    else {
        valid_five = true;
        document.getElementById("valid_five").innerHTML = "";
    }
}
//
//function validate_six() {
//    if (document.getElementById("ra").value == 0) {
//        valid_six = false;
//        document.getElementById("valid_six").innerHTML = "No";
//    }
//    else {
//        valid_six = true;
//        document.getElementById("valid_six").innerHTML = "";
//    }
//}
//
//function validate_seven() {
//    if (document.getElementById("ro").value == 0) {
//        valid_seven = false;
//        document.getElementById("valid_seven").innerHTML = "No";
//    }
//    else {
//        valid_seven = true;
//        document.getElementById("valid_seven").innerHTML = "";
//    }
//}

function addLink(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell = row.insertCell(0);
    var element1 = document.createElement("input");

    element1.type = "text";
    element1.name = "link" + rowCount;
    element1.style.width = "320px";

    cell.appendChild(element1);
}

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function createXmlHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    }
}

function startRequest() {
    createXmlHttpRequest();
    
    var param1 = document.getElementById('mailfield').value;

    if (param1 == "") {
        validEmail = false;
        document.getElementById("result").innerHTML = "Blank";
    }
    else {
        xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.send(null);
    }
}

function handleStateChange() {
    if(xmlHttp.readyState==4) {
        if(xmlHttp.status==200) {
            var message =
                xmlHttp.responseXML
                .getElementsByTagName("valid")[0]
                .childNodes[0].nodeValue;
            
            if (message == "Unregistered") {
                validEmail = true;
                document.getElementById("result").style.color = "green";
            }
            else {
                validEmail = false;
                document.getElementById("result").style.color = "red";
            }

            document.getElementById("result").innerHTML = message;
        }
        else {
            alert("Error checking e-mail address - " + xmlHttp.status +
                " : " + xmlHttp.statusText);
        }
    }
}
function createCaptchaRequest() {
    if(window.ActiveXObject) {
        xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp2=new XMLHttpRequest();
    }
}

function startCaptchaRequest() {
    alert('made it to captcha requeswt');
    createCaptchaRequest();

    var param1 = Recaptcha.get_challenge();
    var param2 = Recaptcha.get_response();

    xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
    xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
    xmlHttp2.send(null);
}

function handleStateChangeCaptcha() {
    if(xmlHttp2.readyState==4) {
        if(xmlHttp2.status==200) {
            var message =
                xmlHttp2.responseXML
                .getElementsByTagName("result")[0]
                .childNodes[0].nodeValue;

            if (message == "Valid") {
                alert("captcha valid");
                validCaptcha = true;
            }
            else {
                document.getElementById("error").innerHTML = message;
                validCaptcha = false;
            }
        }
        else {
            alert("Error checking captcha validity - " + xmlHttp2.status +
                " : " + xmlHttp2.statusText);
        }
    }
}

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.