I'm working on updating a website using as much AJAX as possible to give it a very streamlined feel. I've been able to do it for the most part, but have hit a snag.
Let me first explain what I have working.
I have tabbed navigation at the top of the page, which loads "innerHTML" for a content div. It gets this HTML from other pages that are not directly accessible. So, for instance, when a visitor clicks "Home," the content for home.php is loaded into the content div.
Also on the site, I have a newsletter subscription form. I have already written the scripts to control subscription and on the non-AJAX version of the site, they work just fine. Of course, they load pages independently, so there's no JavaScript involved.
What I'm geting is an "object expected" error when I try to submit the form. I won't post the whole site, but here's the basics:
function ajaxFunction(url) {
var xmlHttp,url;
try { xmlHttp=new XMLHttpRequest();
} catch (e) {
try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Please upgrade your browser to view this site properly.");
return false; }}}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) { document.getElementById('contentDiv').innerHTML = xmlHttp.responseText; }
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
<!--
function displayContent(page) {
' ...snipped CSS stuff for the tabs
ajaxFunction(page+'.php');
}
-->
</script>
...
<li><a id="home" onClick="displayContent('home');">Home</a></li>
<script type="text/javascript">
<!--
function subscribe() {
var url = "subscribe.php?name=" + escape(document.frmSubscribe.name) + "&email=" + escape(document.frmSubscribe.email);
ajaxFunction(url);
}
-->
</script>
...
<input type="button" name="button" value="Subscribe!" onClick="subscribe();" />
Now, at first I thought it was because the ajax function wasn't loaded on the inner page, but even if I include it, it still gives me the same error.
Like I said, the tabs are working and they have the same type of functionality (onClick), so I have no idea why the form won't work.
Thanks in advance.