Any easier way to put an Ajax Preloader?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

I've just started using the Prototype.js library. I'd like to know three things please.

Firstly,

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>AJAX Tell a Friend</title>
    <script src="prototype.js" language="JavaScript" type="text/javascript">
    </script>
    <script type="text/javascript" language="JavaScript">
    function sendDetails(){
    	//if(emailValidator($F('mail'))) {
		    var url = 'emailer.php';
		    var params = 'name=' + $F('name') + '&mail=' + $F('mail');
		    var ajax = new Ajax.Updater(
		    {success: 'mailResult'},
		    url,
		    {method: 'get', parameters: params, onFailure: reportError});
    	//}
    }
    function reportError(request) {
    $F('mailResult') = "Error";
    }
    function emailValidator(elem){
		var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
		if(elem.value.match(emailExp))
			return true;
	}
    </script>
</head>

<body>
    <form>
    <table>
        <tr>
			<td><label for="Name">Name:</label></td><td><input type="text" name="name" id="name"></td>
		</tr>
		<tr>
			<td><label for="Email">Email:</label></td><td><input type="text" name="mail" id="mail" ></td>
		</tr>
		<tr>
			<td><input type="button" name="mailbutton" value="Mail them!" onclick="sendDetails();" ></td>
			<td>&nbsp;</td>
        </tr>
        <tr>
			<td><div id="mailResult"></div></td><td>&nbsp;</td>
		</tr>
    </table>
    </form>
</body>
</html>
How would I implement the loading image here in this case? I mean, when I wrote the native Ajax code, things seemed a little easy but prototype is completely new :(

2. Suppose for a text field in the above code:

Code: Select all

<td><label for="Email">Email:</label></td><td><input type="text" name="mail" id="mail" ></td>
If I change that to

Code: Select all

<td><label for="Email">Email:</label></td><td><input type="text" name="mail" id="mail" onkeyup="sendDetails();"></td>
It is not calling the sendDetails function everytime I press a key. How should I troubleshoot this problem?

3. How would I add content to the div tag? I mean where would I put something like mailDiv .= NewContent;

Finally, is there a proper site that explains prototype.js to a beginner...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Someone please? I'm not getting just those things... Please help...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Someone please... There's no proper documentation for Prototype and I'm not understanding a few things inside the prototype.js... Someone must be well versed with it...
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

legend986 wrote:Someone please... There's no proper documentation for Prototype and I'm not understanding a few things inside the prototype.js... Someone must be well versed with it...
There's no proper documentation, so someone must be well-versed in it? That's some flawed logic.

If after two days you still couldn't figure it out, maybe you should try something *with* proper documentation. jQuery... MooTools...
User avatar
legend986
Forum Contributor
Posts: 258
Joined: Sun Jul 15, 2007 2:45 pm

Post by legend986 »

Alright... I'm sorry :) I got it working now...
Post Reply