troubleshooting Question

jQuery Instances Overwriting Eachother

Avatar of osirion
osirionFlag for South Africa asked on
jQueryAJAXJavaScript
14 Comments2 Solutions301 ViewsLast Modified:
$(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");

});

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?
ASKER CERTIFIED SOLUTION
osirion

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 14 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros