Jump to content
Larry Ullman's Book Forums

Using Ajax To Run A Friend Request Script


Recommended Posts

Hello! I hope it's alright if I have different questions about the same project. I am trying hard to try and debug these myself, but being a noob every now and then I run into a wall.

 

I am trying to create a small user network to learn how it's done. Right now, I am working out how to add a "Add User" button to each user's profile, so if user A is viewing user B's profile, he can click the button and add the user. Now, by itself, my PHP code is fine. However, I wanted to use AJAX so a user can click on a button without taking them to a separate page and the add script (the actual insertion of a friendship into the database) can occur without anything happening on the screen aside from a small notice or something.

 

I am using this code, but I am finding that the link does not run the script but instead goes to #. How do I prevent this?

 

In the header I have referenced the source like this:

 

<script type="text/javascript" src="jquery.min.js"></script>

 

On the actual page with the user profile, the add button is here, with the AJAX before it.

 

<script type="text/javascript"> 
	document.getElementByID('add.php').onclick = function() {
		return false;

	}
	</script>

       <a href="#" id="add.php">Add me!</a>

 

However it does not execute the php script, it only links to #. Any help is gratefully received. Many thanks for all the previous advice =)

Link to comment
Share on other sites

Well, it's doing what you've told it to do. I'd recommend you go back a few steps and learn a little more about jQuery and JavaScript before moving on. You're missing some basic things. For starters, you incorporate the jQuery library but aren't using it. Then, you've got an anonymous function being called when the link is clicked, which is good, but all your anonymous function does is return false, thereby preventing anything from happening within the browser. And that's fine, but you've not added any functionality behind the scenes (i.e., the Ajax). So you're many steps from being close to this one.

Link to comment
Share on other sites

Larry's right, Shivani. You might want to rethink things a bit before attempting Ajax. Actually, it's best to create a page without Ajax first, and then add an Ajax layer on top of that, so that in the event that the user's browser does not support Ajax, they can still use your site the traditional way.

 

With that said, I'll try and get you started by pointing you in the right direction. Note that most of this information is in Larry's book as well (although I don't have the book in front of me to confirm that).

 

Also, I'm not sure why you're including the jQuery library. You can use it to "ease" the process of using Ajax, but it's not required.

 

For the example below, let's assume that you've written the function for creating an Ajax object just like Larry recommends.

 

HTML file

 

...

<body>

<button id="addFriend">Add Friend</button>

<script type="text/javascript">

 var oAjax = getXMLHttpRequestObject();

 var oAddFriend = document.getElementById('addFriend');

 oAddFriend.onclick = function() {

   oAjax.open('POST','add.php');

   var sPOSTInfo = 'sFriendName=' + the-friend's-name-which-you-get-from-a-form-etc; // You need to URL encode the actual name string, but I forget the JS function name.

   // You also need to send the proper header when posting data, but I forget the name. Check Larry's book.

   oAjax.send(sPOSTInfo);

   oAjax.onreadystatechange = function() {

     // You want to test the state of the Ajax object and the HTTP return code, but I forget the exact property names. Please check Larry's book.

     // Once you've passed the required tests, receive the echoed message from add.php, and display it on the screen to indicate whether the friend was added or not.

     alert(oAjax.responseText); // You could also use the innerHTML property of a div, etc. to spit the message out to a particular location on the screen.

   };

 };

</script>

</body>

...

 

add.php

 

<?php

// Receive the friend's name from the posted value.

// Perform any necessary validation.

// Insert the name into the database.

// Echo back a message indicating whether everything is okay or not.

?>

 

I know there's a lot of pseudo code there, but hopefully that helps.

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...