Jump to content

Ok, I've tried a couple of things

miracle_potential

By miracle_potential
in Javascript Help

 Share

Recommended Posts

miracle_potential Member

miracle_potential

Posted
Posted

I've tried a couple of things now to no avail.

 

What I'm trying to do is have a login page with a div in the bottom which has a login form inside it. I was trying to trigger the login process with an onsubmit() function once the users been validated to use an innerHTML function to show that users details and such. All without reloading the page.

 

but I'm not a JS or Ajax programmer just a PHP programmer so where to start with the JS is a bit like looking for a needle in a haystack.

 

Any help would be greatly appreciated.

Link to comment
Share on other sites
corbin Regular Member

corbin

Posted
Posted

This is a basic example with some of the boring parts left out.

 


<script language="javascript">

function CheckAuth(form) {
var username = form.username.value;
var password = form.password.value;
if(username.length == 0 || password.length == 0) {
	document.getElementById('auth_output').innerHTML = 'Invalid input.';
}
else {
	//make an ajax object, and make a request
	if(ajax request returns that the login was successful) {
		document.getElementById('auth').innerHTML = 'Welcome!';
	}
	else {
		document.getElementById('auth_output').innerHTML = 'Invalid username or password!';
	}
}
        return false;
}

</script>

<div id="auth">

<form action="" method="POST" onsubmit="return CheckAuth(this);">
	Username: <input type="text" name="username" /><br />
	Password: <input type="password" name="password" /><br />
	<input type="submit" value="Login">
</form>

<div id="auth_output">
</div>

</div>

 

If you need help with the AJAX part tell me.  I just didn't wanna do it all for you ;p.

Link to comment
Share on other sites
corbin Regular Member

corbin

Posted
Posted

Throwing out example code usually isn't my style, but I guess I'll do it just this once, with explanations.  (I'm mainly doing this because if you google "ajax tutorial" you would find a detailed explanation, but apparently you don't want to do that.)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>AJAX Example</title>
<script language="javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script language="javascript">
	//we'll start with the jQuery method
	$(document).ready(function() {
		//the code here will be executed when the document is ready.  It's kind of like onload, but doesn't wait for images and so on
		$("#ajax_jquery").text("Loading...."); //just incase it takes a while, the user will see a loading message. 
		//Another good reason for the loading text is that it will replace the "Some message here about..." thing, which might confuse users if they see it
		$("#ajax_jquery").load("somepage.html", "");
		//this is about as simply as it gets....
		//(simplified) grab a handle to anything with the ID ajax_jquery and put the html from somepage.html into it.
	});

	//now for the non-jQuery method.  (Standard?  I don't know what to call it lol)

	function GetAjax() { //this is a little function I use sometimes when
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) { }

		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E) { }

		if (typeof XMLHttpRequest != 'undefined') {
			return new XMLHttpRequest();
		}

		throw new Exception('No AJAX support');
	}

	window.onload = function() {
		//when the window has loaded....  This is flawed though, because it will wait on images, adverts so on.  Another way to do it would be to add the AJAX code right (or a reference to it)
		//after the div, so you don't have to wait on everything to load
		document.getElementById('ajax_nojquery').innerHTML = "Loading..."; //another loading message.  Putting this in the window.onload event seems kind of retarded, but it's about all I can
		//do with out putting random JS code in the stuff below (which hurts me inside)
		try {
			var aobj = new GetAjax();
			//because it throws an exception, you don't have to check the actual value of aobj
			aobj.open("GET", "somepage.html", true);
			//open(method, url, [asynch]); (there's more params too, but that's all that is needed to explain for this example)
			//the third parameter is whether or not the request should be asynchronous.  If it is, then the script will continue executing, and a callback function will be called when the status
			//of the request changes, but if it's set to false, the script will wait for the return, instead of going on.  In most situations, you will see the third param set to true.
			aobj.onreadystatechange=function() {
				//this sets a call back....  In other words, this anonymous function will be called when ever the readyState variable changes
				//(note that my error checking is terrible)
				if (this.readyState == 4) {
					//this.responseText will contain the response from the call
					//you could technically use aobj.responseText too, but that would be using a global (well not global technically, but higher up scoped variable), and I personally
					//consider that bad practice.
					document.getElementById('ajax_nojquery').innerHTML = this.responseText;
				}
			};
			aobj.send(null);
			//the null  param is the body to be sent with the request....  It's supposedly optional, but I've run into problems with not passing it before, so I just always go with null or ""
		}
		catch (E) {
			//You would obviously want to handle this more gracefully.  Alerts make me want to smack people in the face.
			alert("Your browser doesn't support AJAX!");
		}

	}
</script>
</head>

<body>

<h1>AJAX Example</h1>

<h3>Using jQuery</h3>
<div id="ajax_jquery">Some message here about enabling Javascript.</div>

<h3>No jQuery</h3>
<div id="ajax_nojquery">Some message here about enabling Javascript.</div>

</body>

 

Then somefile.html was simply this:

 

<p>This was loaded through AJAX!</p>

 

 

Links of interest:

 

http://www.w3schools.com/Ajax/Default.Asp

http://www.tizag.com/ajaxTutorial/

http://docs.jquery.com/Ajax

 

I don't know if you're new to jQuery or not, but if you are, the syntax might throw you off a little, so you might want to read http://docs.jquery.com/Tutorials:How_jQuery_Works.

Link to comment
Share on other sites
corbin Regular Member

corbin

Posted
Posted

Anyway, once again, usually not my style, but here's some code.  Tell me if you need help with understanding it.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>AJAX Example</title>
<script language="javascript">

	//now for the non-jQuery method.  (Standard?  I don't know what to call it lol)

	function GetAjax() { //this is a little function I use sometimes when
		try {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e) { }

		try {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (E) { }

		if (typeof XMLHttpRequest != 'undefined') {
			return new XMLHttpRequest();
		}

		throw new Exception('No AJAX support');
	}

	function SendContent(obj) {
		//obj is the same thing as an object returned by something like document.getElementById()
		try {
			var aobj = new GetAjax();
			aobj.open("POST", "md5.php", true);
			var p = "s=" + encodeURI(obj.innerHTML); //the post params.  encodeURI is known to have some problems, but it'll be fine for this ;p
			//set some headers just in case
			aobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			aobj.setRequestHeader("Content-length", p.length);
			aobj.onreadystatechange = HandleSendResponse;
			aobj.send(p);
		}
		catch (E) {
			alert('Bah!');
			//worst error handling ever.  EVER!
		}
	}

	function HandleSendResponse() {
		//hopefully you get this concept because i't's hard to explain....  HandleSendRequest() will be executed
		//inside of the XMLHttpRequest class, so, this responds to 'this' instance of that class
		if(this.readyState == 4) {
			//it's done!
			if(this.status == 200) {
				//everything is (assuming the data was passed/processed correctly) good
				document.getElementById("hash").innerHTML = this.responseText;
			}
			else {
				//something went wrong x.x
			}
		}
	}

</script>
</head>

<body>

<h1>AJAX Example</h1>

The hash for the div clicked on is: <div id="hash" style="display: inline"><i>Nothing sent yet.</i></div>
<br />
<br />

<div onclick="SendContent(this);">Hi!</div>
<br />

<div onclick="SendContent(this);">My</div>
<br />

<div onclick="SendContent(this);">Name</div>
<br />

<div onclick="SendContent(this);">Is</div>
<br />

<div onclick="SendContent(this);"><h1>Corbin</h1></div>
<br />

<!-- your divs will most likely have HTML in them, so this is just an example with HTML -->

</body>

 

 

md5.php:

<?php
echo md5(@$_POST['s']);
//ignore the warning if s isn't set... just straight up print out the hash

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.