[SOLVED] Very Simple Problem

[hellouthere]

Im trying to implement AJAX into a php/mysql application ive written, at the moment im just trying to get a form to appear when a link is clicked (the link is from a polygon map on an image). I have several ajax books and have pulled most of the code from one of them...

 

This is what i have so far...

 

index.php

 

<?php
include("./style.css");
?>

<script src="./ajax.js"></script>
<script src="./function.js"></script>

<div id="main"><img src="./frontpage.jpg" border="0" usemap="#Map"/>
<map name="Map" id="Map">
<area shape="poly" coords="362,96,495,95,490,191,362,178" href="#" />
<area shape="poly" coords="31,38,49,214,298,182,298,60" href="#" />
<area shape="poly" coords="338,217,375,206,469,223,467,314,428,334,336,305" href="#" />
<area shape="poly" coords="8,387,50,433" href="#" />
<area shape="poly" coords="4,386,52,431,133,433,380,329,258,287,258,266,249,266,234,278,216,272,143,293,189,310,195,319,181,331" href="#" />
<area shape="poly" coords="53,365,141,337,122,332,94,338,91,328,107,318,112,309,114,291,105,265,91,248,74,245,53,252,42,274,42,295,40,322,58,331,73,329,75,344,63,347,64,340,48,332,42,334,47,342,52,346,52,355" href="javascript:createlogin()"/>
</map>
</div>

<div id="login" class="login"></div>

 

style.css

 

<style>

body {
text-align: center;
}

#main {
padding:50px;
}

.login {
position:absolute;
left:0px;
top:0px;
text-align:left;
visibility:hidden;
height:0px;
width:0px;
background:#FAF8C5;
border-style:solid;
border-width:2px;
border-color:#EAEE4F;
}

</style>

 

ajax.js

 

//variable for IE instance check
var xmlhttp = false;

//Check for IE
try {
//If javascript version > 5
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
//Older ActiveX
try {
	//For IE
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
	//Non-IE browser
	xmlhttp = false;
}
}

//Create javascipt instance for Non-IE browser
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}

 

function.js

 

function createlogin (e) {

theObject = document.getElementById("login");

theObject.style.visibility = "visible";
theObject.style.height = "150px";
theObject.style.width = "250px";

var posx = 0;
var posy = 0;  

posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;

theObject.style.left = posx + "px";
theObject.style.top = posy + "px";

//location
var objID = "login";
var serverPage = "login.php";

var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
		obj.innerHTML = xmlhttp.responseText;
	}
}
xmlhttp.send(null);

}

function closelogin() {

theObject = document.getElementById("login");

theObject.style.visibility = "hidden";
theObject.style.height = "0px";
theObject.style.width = "0px";
}

 

login.php

 

<form action='#' method='post'>

			<div align="center" style="padding-top:5px">

			   Username: 

                   <input type="text" name="user">

                   <br>

                   Password: 

                   <input type="password" name="pass">

                   <br>

                   <input class="button" type="Submit" value="Login">

                 </div>

</form>

<div align="right"><a href="javascript:closelogin()">close</a></div>

 

The result at the moment is that when the link is clicked the layer appears at the very top left (0, 0). It has the correct dimensions (250,150) but is empty. So its not getting the location and its not putting in the login.php file... no idea what could be the problem here. Im new to ajax and not amazing with javascript...

 

Thanks in advance to anyone who can shed some light on my situation.

[figmented]

If you can ZIP these files up and attach it, I think I may be able to help you out. I'm using a virtual box, so it's difficult to get everything from the page to my server.

[hellouthere]

Thankyou for replying, i will zip up asap and attach to another post

[hellouthere]

5 files are attached, thanks 

 

[attachment deleted by admin]

[figmented]

I've attached my changes for index.php and function.js. You'll notice the changes as they are commented with "START_CHANGES" and "END_CHANGES".

 

I couldn't get the MAP element's content to display on the screen (I've never used MAP elements), so I created a DIV element with an "onClick" attribute (just for testing).

 

index.php snippet

 

<div onClick="createlogin(event)" style="background-color: #CCCCCC; padding: 5px 5px 5px 5px; width: 100px">test</div>

 

The result should be that any click within that DIV should position the Login form where the cursor is. That means, the only real change you need to make is in FUNCTION.JS. Just replace everything before the "//location" comment with the following:

 

function.js snippet

 

// get event and object
var e = e || event;
var o = document.getElementById('login');

// get cursor position
var oX = e.pageX || e.clientX + document.body.scrollLeft - document.body.clientLeft;
var oY = e.pageY || e.clientY + document.body.scrollTop  - document.body.clientTop;

// set style
o.style.visibility = 'visible';
o.style.height = '150px';
o.style.width = '250px';
o.style.left = oX;
o.style.top = oY;

 

Works in IE7 and Firefox.

 

[attachment deleted by admin]

[hellouthere]

~Thankyou so much! worked perfectly! thankyou again!