I'm loading a signup.php page into a div on my main page. All of the elements (forms/javascript etc) are working fine in the loaded page. The only issue is that once the php script returns the ajax response I cannot get it to show up on the div.
The response shows up when I run the signup.php page standalone, but not when it is loaded into another page. I'm using the load() function to carry out the load - I know that load() strips tags etc but not when you load the whole page, which is what I am doing so I figure it should work.
I have checked that the response text does come through from the PHP script even when loaded on the main page - I just cant get it to show up in the span.
Here is the javascript code for the signup page (signup.php) being loaded (havent included the php as its working):
function signup(){
var e = _("email").value;
var p1 = _("pass1").value;
var p2 = _("pass2").value;
var status = _("status");
if( e == "" || p1 == "" || p2 == ""){
status.innerHTML = "Fill out all of the form data";
console.log(status.innerHTML);
} else if(p1 != p2){
status.innerHTML = "Your password fields do not match";
} else {
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "signup.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "OK"){
alert(ajax.responseText);
console.log(ajax.responseText);
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
} else {
console.log(ajax.status);
console.log(ajax.responseText);
_("p1").innerHTML = "Please check your email inbox and junk mail box at <u>"+e+"</u> in a moment to complete the sign up process by activating your account. You will not be able to do anything on the site until you successfully activate your account.";
}
}
}
ajax.send("e="+e+"&p="+p1);
}
And the HTML form:
<form name="signupform" id="signupform" onsubmit="return false;">
<div>Email Address:</div>
<input id="email" type="text" class="searchbox" onfocus="emptyElement('status')" onkeyup="restrict('email')" maxlength="88">
<div>Create Password:</div>
<input id="pass1" type="password" class="searchbox" onfocus="emptyElement('status')" maxlength="16">
<div>Confirm Password:</div>
<input id="pass2" type="password" class="searchbox" onfocus="emptyElement('status')" maxlength="16">
</form>
<br> <a href="#" alt="Signup" onclick="signup()">Create Account</a><p>
<span id="status" class="statuserror">This is where i want the response to show</span>
and the Jquery being used to load the above into the #container div on the main page (index.php):
function becometutor(){
$('#container').slideUp(200);
$('#searchBar').slideUp(200);
setTimeout(function(){
$('#container').load("signup.php")}, 200);
$('#container').slideDown(200);
}
EDIT: OK guys - so an update: I tried replacing the load()function with an ajax call for the signup.php page and then setting putting the html response of the ajax into the div where I want it - the effect is the same. I get the html as i want it but the span does not update with the ajax errors from the signup.php page. Does anyone have any clarification on loading pages within div - is this a no no? I know that load() strips tags before putting in the new content - but I thought so long as the whole page is loading then it should not be a problem - any ideas? PLEASE PLEASE PLEASE!It's driving me nuts!
SOLVED: Found the answer: when signup.php is loaded into the index page, there are two spans with the same id so the browser is getting confused and not doing anything. This explains why it works as standalone too a single browser too, and still fires all the console/alerts - Thanks for your input guys!
I would have commented this, but alas my rep is not high enough, so I have to submit an answer.
The issue is not with load() or loading a page in a div. I have modeled all of that without issue.
Without seeing all of your ajax code, it is tough to tell what is happening. Regarding this:
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "OK"){
alert(ajax.responseText);
console.log(ajax.responseText);
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
}
are the alert and console.log firing? Are you able to set the status to anything inside or outside this function?