There are several problems with your code:
1) you did not specify the argument of your anonymous function. the argument
is the event (here: the click). you'll be needing this later to disable the 'normal'
behaviour of the click:
$("a.bind-jquery-event-here-class").bind("click", function(event) {
event.preventDefault();
2) For reading the href you don't need val(). (val() is for reading stuff from input-fields.)
var url = $(this).attr("href");
3) the A in AJAX stands for asynchronous. for your code this means: load just
starts the loading of data from the server, but doesn't wait until it finishes.
you have to define a callback-function that handles the data when it finally arrives.
4) load is for doing an AJAX call and inserting the result into the DOM. you can't use it for an alert. use $.ajax instead if you relly need an alert.
5) you can't load abitrary URLs via AJAX, your AJAX call can only go back to your
own server. if you need to load stuff from other server you have to use a serverside
script as a proxy. here's how you call the proxy:
$.ajax({
type: "POST",
url: "proxy.php",
data: "url="+url,
success: function(data){
alert("finally got data " + data);
}
});
and here's an example proxy in php.
<?php
error_reporting (E_ALL ^ E_NOTICE);
if ( isSet($_POST['url']) ) {
if( true == ($str=file_get_contents( $_POST['url'] ) )) {
echo $str;
exit;
}
}
echo "could not read page";
?>
a word of warning regarding the php: file_get_contents might be disabled on your server.
An here's the complete javascript-code is used for testing:
$(document).ready(function(){
$("a.bind-jquery-event-here-class").bind("click", function(event) {
event.preventDefault();
var url = $(this).attr("href");
alert("loading via proxy: " + url);
$.ajax({
type: "POST",
url: "proxy.php",
data: "url="+url,
success: function(data){
alert("finally got data " + data);
}
});
});
});