jQuery - Load an action page via Text Link, without refreshing?

Reveroom
Reveroom used Ask the Experts™
on
Hi Folks,

Firstly, apologies for the poorly-worded question - I wasn't quite sure how to phrase it!

I do something similar to what I want to achieve using jQuery Forms, however in this instance I want to do the same with a basic text link.  Heres my link code (and surround, for context);

<div class="msg msg-error"><p>#getsite.sitename# has not been configured on <strong>DNS</strong> yet! <a href="changedns.cfm?active=yes">Change This</a></p></div>

The changedns.cfm page has a basic CFQuery (database query) that changes the db value to yes for that particular record.  I'd like this action to be done upon clicking 'change this', without reloading the page - and preferable updating the div along the way.

Is this possible with jQuery?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
matthew016

Commented:
Yes, with an ajax request.
See code below. You'll to give an id to your link.
<a id="changeDnsLink" href=...

When a user clicks on the link, an ajax request is executed, and the user isn't forwarded to a new page thanks to "return false;"
$(document).ready(function() {

$('#changeDnsLink').click(function() {
	$.ajax({
		type: "GET", 
		dataType: "json",
		url: "changedns.cfm?active=yes", 
		success: function(data) {
			// update the div
		},
		error: function(xhr, status, ex) {
			alert('Request failed.');
		}
	});
	return false;
});

});

Open in new window

Reveroom

Author

Commented:
Thanks Matthew,

I notice your sample code assumes Json is returned.  At the moment, the action page I have is a simple MySQL update.  When using jQuery form, the returned data is whatever HTML I produce on the action page.  Is it possible to do the same kind of thing here?  (i.e the action page will basically be the div content - so after the successful update, the following html would be shown - <div class="msg msg-ok"><p>Site has been configured on <strong>DNS</strong></p></div>)
Commented:
The datatype may be xml, json, script, or html
Here is the doc:  http://api.jquery.com/jQuery.ajax/

So in your case specify
[...]
dataType: "html",
[...]
Reveroom

Author

Commented:
Thanks Matthew, much appreciated.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial