I have the above code which runs and changes icons to loading icons and then to other icons if its successful. Anyway, it works absolutely fine on a single instance; however, the moment I click two (or more) for example, it will leave the first instance with the loading icon and then the last instance will get its icon changed twice.
I think I understand whats happening and that is that my variables are getting over-written with new values. How do I fix this? Shouldnt each instance of the function have its own set of variables? Right now it seems to me that the variables (init_elem,closest_td,closest_tr) are global and hence being overwritten?
"$(this)" loses its context and hence the reason why I am assigning it to variables. I am using this on jqGrid and hence the need for .on() because having it 'normally' doesnt work. I have tried to use $.proxy; but I have never used it before and I cant seem to get it work properly since console.log'ing $(this).html() is showing the dialog html instead of the anchor html.
$(document).ready(function() {
$("#acquire-dialog").dialog({
autoOpen: false,
modal: true
});
});
$(document).on('click','.acquire-confirmation', function(event) {
event.preventDefault();
init_elem = $(this);
closest_td = $(init_elem).closest("td");
closest_tr = $(init_elem).closest("tr");
process_id = $(this).attr("rel");
$("#acquire-dialog").dialog('option', 'buttons', {
"Confirm" : function() {
restore_html = $(init_elem).closest("td").html();
$(closest_td).html('<img class="qmark" title="Loading..." src="images/loading.gif">');
$.post(
'includes/_add_ajax.php',
{section: 'acquire_document', process_id: process_id},
function(data){
$("#ajax_notifications").freeow(data.subject,data.message,{classes: [data.type] });
if (data.type == 'success')
{
$(closest_tr).find("div:first")
.removeClass('icon_status_0')
.addClass('icon_status_2')
.attr('title','You have acquired access to this document.');
if (typeof data.status !== "undefined")
{
var document_status = ['A','B','C'];
$(closest_td).prev().html(document_status[data.status]);
if (data.status == 1)
$(closest_td).html('<a class="qmark" target="_blank" title="Generate a return for this document." href="includes/generate_return.php?id='+ process_id +'"><img src="images/icon_pdf.png" border="0" /></a>');
else
$(closest_td).html('<img class="qmark" title="You can only generate a return for a document once its been served or a return of non-service has been issued." src="images/icon_question.png">');
}
}
else
$(init_elem).closest("td").html(restore_html);
},
'json'
);
$(this).dialog("close");
},
"Cancel" : function() {
$(this).dialog("close");
}
});
$("#acquire-dialog").dialog("open");
});
This is what Ive tried in regards to $.proxy():
$.proxy($("#acquire-dialog").dialog("open"),this);
and
$.proxy($("#acquire-dialog").dialog("open"),$(this));
and lastly on the event bind as well, though I dont think this is right:
$(document).on('click','.acquire-confirmation', $.proxy(function(event) { ... },this)); // and $(this)
