I have the following code but my <a onclick="meldaan()">Aanmelden</a> isn't working. The function doesn't get called.
This is the function:
<script type="text/javascript">
function meldaan()
{
var voornaam = document.getElementById('voornaam').value;
var achternaam = document.getElementById('achternaam').value;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","aanmelden.php?naam=" + encodeURIComponent(voornaam) + "&achternaam=" + encodeURIComponent(achternaam) + "&email=" + encodeURIComponent(email) + "&password="
+ encodeURIComponent(password),true);
xmlhttp.send();
}
</script>
I have the function placed in my header.php file which is included in the footer.php (the place where <a onclick="meldaan()">Aanmelden</a> is located.
What am I doing wrong?
The results are properly deliverd to my page because I tried echoing something and it did show up, so it must be in this code.
Thanks for your time!
You missed a semicolon:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
};
^------ HERE
Related
I'm having a weird problem...
I inserted an alert here:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
Both functions that call the xmlhttp alert "fail" but one works while the other does not.
I checked that the serialize was working, and it is, I get the written value in the form.
The php script doesn't show an error... any idea what could be going on? The calls are separate, not called simultaneously, I pretty much replicated the working one for the other call.
This is the full xmlhttp function of the working one
function insertEntry()
{
var data = $("#entry").serialize();
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
}
xmlhttp.open("POST","write-script.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
clearup();
showSuccess();
}
Not working, the alerts go all the way through
function insertNote()
{
alert('clicked');
var note = $("#note").serialize();
alert(note);
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
alert('fine');
}else {
alert('fail');
}
}
xmlhttp.open("POST","write-new-note.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(note);
alert('done');
}
I'm running the following javascript that check with serverside (keep.php)
if user has a session.
The script is running onload of every page: handler.js
var server = location.host;
var url = "http://" + server + "/MyHome2/php/";
var page = "keep.php";
document.onload = checkAuth();
function checkAuth()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var response = xmlhttp.responseText;
if (response != "")
{
document.getElementById("linkSign").innerHTML = response + "|" ;
}
else
document.getElementById("linkSign").innerHTML = "Sign-in|" ;
}
}
xmlhttp.open("POST",url + page,true);
xmlhttp.send();}
My server-side keep.php which echo back session is:
<?php
session_start();
if (isset($_SESSION['name']))
{
echo $_SESSION['name'];
}
?>
This script is running in the begging of each html page to check if user has a session and if it does it grrets him.
The problem that this script is messing with my other scripts! that used to work and are working without this handler.js
For example my login script which log-in a user is not working when user try to submit his credentials, noting happens!
var server = location.host;
var url = "http://" + server + "/MyHome2/php/";
var urlmain = "http://" + server + "/MyHome2/index.html";
var page = "authentication.php";
function loginUser(){
var str = "usr=" + encodeURIComponent(document.getElementById("user").value) + "&pwd=" + encodeURIComponent(document.getElementById("password").value);
checkUserExistance(str,str.length);}
function checkUserExistance(data,size){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var response = xmlhttp.responseText;
responseHandler(response);
}
}
xmlhttp.open("POST",url + page,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",size);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(data);}
Why is the simple session check onload of each page is preventing mt other script from executing?!
Okay I've found my mistake :)
Apparently the scripts are considered as a same scope although they are on different files.
I have global variables with the same name and this is no no if I reference those scripts from the same html page.
This will load the content to the page and change the URL. The problem is that the back button and the forward won't load the content agin. They only change the URL. How can I make them load the function?
<a onclick="load_content('p1');" >Page1</a>
<a onclick="load_content('p2');" >Page2</a>
function load_content(name)
{
window.history.pushState(null, null, "/?page=" + name + "");
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("response").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","load_content.php?name=" + name + "",true);
xmlhttp.send();
}
In the history.pushState, save all relevant data that is dynamic and then listen to the popState event and replace all elements just like you would do with AJAX.
Whats wrong with this code or what might be causing this problem? It's not alerting "hello", but it is filling the div with The Hello and Bye World tables. I want it to alert "hello". Also I don't know jquery. Thank You
FILE1
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var reScript = /\<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(reScript, function(m,m1) {
eval(m1);
return "";
});
document.getElementById("div").innerHTML=response;
}
}
xmlhttp.open('GET','file2.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send();
FILE2
<table><tr><td>Hello World</td></tr></table>
<script type="text/javascript">
alert('hello');
</script>
<table><tr><td>Bye World</td></tr></table>
Try without the eval():
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
/*var reScript = /\<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(reScript, function(m,m1) {
eval(m1);
return "";
});*/
document.getElementById("div").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //unnecessary for GET calls
xmlhttp.send(null);
Evaluing your code inside the <script...></script> is unnecessary, the javascript code will be executed as soon as it's added to the DOM.
New edit:
You have to eliminate the linebreaks \n\r in your reponseText in order for your script to be evaluated properly. Also, there was an extra \ escape character before the first < which was breaking your code. Try:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var reScript = /<script.*?>(.*)<\/script>/mg;
response = xmlhttp.responseText.replace(/\n|\r/g, " ").replace(reScript, function(m,m1) {
eval(m1);
return "";
});
document.getElementById("div").innerHTML=response;
}
}
xmlhttp.open('GET','file2.php',true);
//xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
I've added a .replace(/\n|\r/g, " ") to replace all line breaks by an white space in your responseText, which will allow for your JS to be evaluated properly and cause no visible change to the end-user. You may also replace the white space " " by an empty string "" if all of your JS is properly semi-colon'd.
The above should work fine for simple scripts, now if you'd include the JQuery lib in your page's head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Your AJAX call would be as simple as:
<script type="text/javascript">
$(document).ready(function(){
$('#div').load('file2.php');
});
</script>
JQuery automatically parses scripts from your responseText, as noted in your linked answer.
Give this a try:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var reScript = /<script.*?\>(.*)<\/script\>/mg.exec(xmlhttp.responseText)[1];
var scriptElement = document.createElement('script');
scriptElement.innerHTML = reScript;
document.body.appendChild(scriptElement);
}
}
Placing the code into a script element, and then appending that element to the body should cause it to execute.
This is a very simple function if one where to use an input tag, unfortunately i have to use a link tag since i'm working with alphabet grouping that would retrieve the values on a different page.
here's a code i found for link tag to hold a value to be submitted to ajax
echo '<a onclick="passPagination(\'3\');passLetter(\'S\')">NEXT</a>';
i want to call all letters "s" page "3" from the other page.
function passLetter(str)
{
if (str=="")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter="+str,true);
xmlhttp.send();
}
function passPagination(str)
{
if (str=="")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?pageno="+str,true);
xmlhttp.send();
}
also i want to call again the letter that was passed to the otherpage so that i would make it as a reference for my pagination links that is also being hold in this page.
echo 'NEXT';
i am really at lost here since i am not familiar with link tag and ajax working together, also as you may have noticed i am not also that good with ajax judging from my very long ajax code.
Your help is greatly appreciated, Thank You.
i am really new at ajax. :)
The solution is to make a function with multiple arguments:
function passPaginationAndLetter(page, letter)
{
if (page=="" || letter == "")
{
document.getElementById("retail_group").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter="+letter+"&pageno="+page,true);
xmlhttp.send();
}
You can now call this with
echo '<a onclick="passPaginationAndLetter(\'3\',\'S\')">NEXT</a>';
The difference is that you are not calling two AJAX methods, just one.
I'm not pretty sure if i got what you mean, but i guess you want to something like that
echo '<a onclick="get(\'S\', '. ($_GET['page'] + 1) .')">NEXT</a>';
function get(letter, page) {
if (!letter) {
document.getElementById("retail_group").innerHTML="";
return;
}
if (!page) {
page = 1;
}
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("retail_group").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","otherpage.php?letter=" + letter + "&pageno=" + page,true);
xmlhttp.send();
}
if it's really that, don't forget to validate the variables got from $_GET before use that, i just didn't because it's not the point...
I think this is what you're looking for:
html
PREVIOUSNEXT
javascript
var current = {
page: 0,
letter: a
};
function ajax(url) {
var xmlhttp = window.XMLHttpRequest || new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function(xmlhttp) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementByI("retail_group").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function next() {
ajax("otherpage.php?letter=" + current.letter + "&pageno=" + (++current.page));
}
function previous() {
ajax("otherpage.php?letter=" + current.letter + "&pageno=" + (--current.page));
}
This code is not complete of course, it doesn't check for the max/min values of the pages, and there's no way of replace the letter, but it should point you in the right direction.