Is it possible to use AJAX to change the value of a[href$='.pdf']? I've got a page with several links. I need to insert "/download.php?file=" into the beginning of every linked PDF to force a download instead of opening in the browser.
I know this can be done with JS/jQuery alone, but I need to do this in AJAX. I haven't done much with AJAX before and am not getting far with Googling for answers. Below is the code I've come up with, from looking around online, but it's not doing anything. Not sure if it's even possible though.
$(function (){
var collID = document.location.pathname.match(/[^\/]+$/)[0];
collID = collID.substring(0, collID.length - 5);
$("a[href$='.pdf']").each(function () {
$.ajax ({
type: 'POST',
dataType: 'json',
success: function() {
$(this).attr("href", "/download.php?file=collections/ms/" + collID + "/" + curA);
}
});
});
});
Update: I was advised to use AJAX for this because I'm already using a bit of AJAX to insert the size of the PDF. When I use jQuery to change the href value, the bit the inserts the file size doesn't work anymore because it's no longer a direct link to the file. Here's the code for that.
function hdrDetails(i, elm, cl) {
cl = cl / 1024;
//divide content-length by 1024 (KB)
var sz = cl > 1024 ? "MB" : "KB";
//if cl is still big, set to MB
cl = cl > 1024 ? cl / 1024 : cl;
//if cl is still big, divide again
var len = $(elm).eq(i).text().length;
//check the link's text length
if (len > 0) {
//add a file size
var $e = $(elm).eq(i);
var t = $e.text();
$e.html(t.slice(0, -1) + "<span class=\"size\"> (" + cl.toFixed(2) + " " + sz + ")</span>" + t.slice(-1));
}
}
$(function () {
var elm = "a[href$='.pdf']," + //only the file types we want
"a[href$='.doc']," + "a[href$='.ppt']," + "a[href$='.xls']," + "a[href$='.docx']," + //don't forget 2007 versions
"a[href$='.pptx']," + "a[href$='.mht']," + "a[href$='.xlsx']";
$(elm).each(function (i, e) {
if (e.hostname && e.hostname == location.hostname) {
$.ajax({
type: "HEAD",
url: $(this).attr("href"),
complete: function (xhr, textStatus) {
var cl = xhr.getResponseHeader("content-length");
if (textStatus == "success") {
var cl = xhr.getResponseHeader("content-length");
hdrDetails(i, elm, cl);
//call the calculation fn
} else {
var $e = $(elm).eq(i);
var t = $e.text();
$e.html(t.slice(0, -1) + "<span class=\"size\"> (File Not Found)</span>" + t.slice(-1));
}
}
});
}
});
});
I'm not seeing why you need the $.ajax
call in your code... is there data on the server that you need so that you can fix your anchor tags via JavaScript? This is the only reason I could see for you needing an AJAX call. Also, when making an AJAX call you generally want to use the response, which is a parameter passed to the jQuery success
function. As you are not using it, it seems like the AJAX call is not needed.
As an aside, it is generally bad practice to make AJAX calls from a loop (.each()
is a loop). By making AJAX calls in a loop you may be hitting your server hard. It would be better to do one big batch request/response to fetch the data you need