[jQuery] Loading image before operation starts not working
Hey guys,
i have following problem: When the user on my website presses a image
link, I prevent the default behaviour, and toggle some table rows
(show or hide them, depending on the the image src (closed.gif /
opened.gif)). Since I got a lot of rows I run over and toggle, the
function takes some time to process and the browser "hangs" in the
meanwhile. Due to this I want to show the user that the operation is
still in progress and want to change the image of the link to a load
spinner until it is finished. So I thought that I just have to change
the src URL of the image in advance and then start the function, but
jQuery is ignoring the line and I don't know why?!?
Here is the code I am using:
$("a[name='changeDisplayModeAll']").click(function(e) {
e.preventDefault();
var newStatus;
var imageSrc = $("img[name='imageChange']").attr('src');
$("img[name='imageChange']").attr('src',
'load.gif'); // Here I want to change to the load image
var rep = "";
// check if table rows should be hided or shown
if(imageSrc.match("closed")) {
newStatus = "opened";
rep = imageSrc.replace("closed", "opened");
} else {
newStatus = "closed"
rep = imageSrc.replace("opened", "closed");
}
// now the long-lasting function
// remark: i get the ids for the table row from a
select box where all projects (which i want to
// show /hide) are listed with id which i need to
identify the table rows
$("#editProject > *").each(function() {
var projectId = $(this).val();
if(projectId && projectId != '-1') {
var image = $("img[name='image_" + projectId + "']").attr('src');
var statusChanged = false;
if(image) {
if(image.match("closed") && newStatus == "opened") {
statusChanged = true;
rep = image.replace("closed", "opened");
$("img[name='image_" + projectId + "']").attr('src', rep);
$.cookies.set('tree' + projectId, 'on');
}
if(image.match("opened") && newStatus == "closed") {
statusChanged = true;
rep = image.replace("opened", "closed");
$("img[name='image_" + projectId + "']").attr('src', rep);
$.cookies.set('tree' + projectId, 'off');
}
if(statusChanged) {
$("tr[title='projectScenarios_" + projectId + "']").each(function
(i) {
$(this).toggle();
});
$("tr[title='scenariosCases_" + projectId + "']").each(function
(i) {
$(this).toggle();
});
}
}
}
});
// now return to the old image
$("img[name='imageChange']").attr('src', rep);
});
Hope someone could help me with this issue.
Thanks in advance,
Jens