How to follow relative links using ajax?
OK, so i've had a go at using ajax to completely replace my iframes and have hit my first stumbling block. Absolute links are successfully followed by preventing the default a tag event, then loading the contents of the href into a div, however some links are relative and look like this:
Copy code
- <a href="view.php?id=68&chapterid=394" title="2 Aims and Outcomes">2 Aims and Outcomes</a>
How will i manage to find out what the full href should be? I would need to find out where the original script was running from, but this seems impossible!
Here is what i have so far, i know its messy but this is largely because the .load command doesn't do callbacks correctly. Anyway here it is:
Copy code
- <div id="moodleAjax">
</div>
<script>
function test() {
alert("test");
jQuery('#moodleAjax a').click(function(event) {
event.preventDefault();
var currentHREF = jQuery(this).attr('href');
jQuery('#moodleAjax').load(currentHREF), "body", test();
});
}
function moodleAjaxCustomisations() {
window.onload=function() {
alert("123");
jQuery('#moodleAjax a').click(function(event) {
event.preventDefault();
var currentHREF = jQuery(this).attr('href');
jQuery('#moodleAjax').load(currentHREF), "body", test();
});
}
}
jQuery( "#moodleAjax" ).load("http://someURL", "body", moodleAjaxCustomisations()); // onload function not working. must write this into moodleAjaxCustomisations function
</script>