NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.
Creating a hyperlink that works with or without AJAX
I wanted to make it such that you could delete each message without refreshing the page, but still accommodate users who had JavaScript turned off, and without a lot of extra work.
How did I do it? Like so:
<script type="text/javascript" src="/views/JavaScript/jquery-1.2.2.js"></script>
<script language="javascript">
//Set the typical jQuery ready event handler to fire when the document is ready for manipulation
$(document).ready(function () {
//Assign a click event handler for all of the 'delete' hyperlinks (which all have a CSS class of 'deleteLink')
$(".deleteLink").click(function () {
var linkObj= $(this);
//Take the existing URL in the 'href' value and append an additional URL variable
var ajaxURL= linkObj.attr("href") + "&js=1";
//Remove the li list element (the parent) the link belongs to
linkObj.parent().remove();
//Make the Ajax call
$.ajax({
type: "POST",
url: ajaxURL
}); //end of .ajax function
//This statement will prevent the browser from actually navigating to the address in the link
return false;
}); //end of .deleteLink click function
}); //end of document.ready function
</script>
<h2>Your Messages</h2>
<ul>
<cfoutput query="qryMessages">
<li id="#messageId#">
#message#<br />
<a class="deleteLink" href="index.cfm?fuseaction=#xfa.deleteMsg#&msgId=#messageId#">Delete</a>
</li>
</cfoutput>
</ul>
...The only other thing you need to do is put a conditional statement in the page/event that is called by the hyperlink that looks for the presence of the additional URL variable ("js" in this case).
If JavaScript is turned off, that additional variable will not be defined and the page/event will redirect the action back to the calling page once it's done deleting the message data from the database.
If JavaScript is turned on, the page/event will simply delete the message data (no action redirect), and the user simply sees that message item disappear from the list.
var myObj = $(this);
myObj.parent().remove();
Nova,
http://novablog.co.cc
http://rapidshare.torrentfreakz.com