The FireFox browser has what actually amounts to a bug when using AJAX pages; if you browse to a Web page which uses AJAX by specifying a URL without the “www”, such as http://jdcampbell.com/ajax/ajaxpart4.html, and then try and operate the AJAX-enabled pages you will find they may not work. FireFox will only allow AJAX requests from the same web site as the current HTML page in the browser. The missing “www” causes FireFox to view embedded URLs in AJAX requests as being from a different web site. For the bug to show itself, the embedded URLs would have to be www.jdcampbell.com and the URL you entered in the browser would be jdcampbell.com, without the “www”. This bug does not exist in Microsoft IE, however.
AJAX & Form Limitations
First we will cover an example of how to use HTML Forms with AJAX dynamic content. When we say Forms, you should know we are talking about the <Form> tags and the elements within the <Form> tags such as <input type=text name=city> and all other elements. The basic rules are as follows.
- Within a dynamically updated section of the (AJAX generated) page you will not successfully get Forms to submit using standard Form submit methods (unless you are going to bypass AJAX and completely refresh the page).
Now we will show the example itself. The first is the primary HTML page enabled with AJAX that updates a section of the page (itself) when you click a button. The section that is updated is specified as DIV tags with an ID (shown at the bottom of the listing).
Listing #A: Main HTML page, AJAX enabled
The above div tag <div id=”div1″> is automatically updated dynamically by AJAX. The content that is displayed by AJAX when you press the “Press for AJAX” button is the following HTML file content (Listing #B).
Listing #B: Content file displayed by AJAX within above HTML page.
<h3>Here is an HTML Form, enter data, click submit </h3> <Form name="myform"> Type text: <input type="text" size="15" id="txt1" > <br><br> <input type="button" value="Press to submit form" onClick="doHttpRequest2();"> </Form>
Both Listing #B above and Listing #C below are dynamically displayed using AJAX without refreshing the main page shown in Listing #A. As you can see, Listing #B is a Form with a button that initiates another AJAX request which displays the results of Listing #C below, including the Form field “txt1” contents.
Listing #C: PHP Form request handler, also displayed by AJAX
<HTML> <body> <h3>Here is the Form field text: <? echo $_GET["txt1"]; ?></h3> </body> </HTML>