<div>
try:
<pre><code class="code-10 nolinks" id="code-20-38170132-1">$(document).ready(function() {
 $(document).on('click','.acquire-confirmation', function(event) {
 event.preventDefault();	
 var $this=$(this);
	process_id = $(this).attr(&quot;rel&quot;);
 $(&quot;#acquire-dialog&quot;).dialog('option', 'buttons', {
 &quot;Confirm&quot; : function() {
 $this.data(&quot;restore_html&quot;,$this.closest(&quot;td&quot;).html());
 $this.closest(&quot;td&quot;).html('&lt;img class=&quot;qmark&quot; title=&quot;Loading...&quot; src=&quot;images/loading.gif&quot;&gt;');
 $.ajax({
 autoOpen:true,
 modal:true,
 url:'includes/_add_ajax.php',
 dataType:'JSON',
 data:{section: 'acquire_document', process_id: process_id},
 context:$this,
 complete:function(data){
 $(&quot;#ajax_notifications&quot;).freeow(data.subject,data.message,{classes: [data.type]});
 $closest_td = $(this).closest(&quot;td&quot;);
 $closest_tr = $(this).closest(&quot;tr&quot;);
 if (data.type == 'success'){
 $closest_tr.find(&quot;div:first&quot;)
 .removeClass('icon_status_0')
 .addClass('icon_status_2')
 .attr('title','You have acquired access to this document.');
 if (typeof data.status !== &quot;undefined&quot;){
 var document_status = ['A','B','C'];
 $closest_td.prev().html(document_status[data.status]);
 if (data.status == 1){
 $closest_td.html('&lt;a class=&quot;qmark&quot; target=&quot;_blank&quot; title=&quot;Generate a return for this document.&quot; href=&quot;includes/generate_return.php?id='+ process_id +'&quot;&gt;&lt;img src=&quot;images/icon_pdf.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;');
 }else{
 $closest_td.html('&lt;img class=&quot;qmark&quot; title=&quot;You can only generate a return for a document once its been served or a return of non-service has been issued.&quot; src=&quot;images/icon_question.png&quot;&gt;');
 }
 }
 }else{
 $(this).closest(&quot;td&quot;).html($(this).data(&quot;restore_html&quot;));
 }
 }
 });
 $(this).dialog(&quot;close&quot;);
 },
 &quot;Cancel&quot; : function() {
 $(this).dialog(&quot;close&quot;);
 }
 });
 });
});
</code></pre>
Hopefully I haven't missed any brackets etc, but it looks like you are quite good at those! What this does is set the context of the ajax request as $this, therefore you can use $(this) in the callbacks from ajax and know that you have got the element that was clicked on in the first place. I have also had to set data on the element that has been clicked on which contains the closest tds html to restore it later. All this means that more than one ajax request will not interfere with each other.
</div>

<div>
You left out some crucial bits; like POST on .ajax; the dialog initiator, etc. 
Below is the 'semi cleaned up code' 

<pre><code class="code-10 nolinks" id="code-20-38170336-1">$(document).ready(function() {
	$(&quot;#acquire-dialog&quot;).dialog({
		autoOpen: false,
		modal: true
	});

	$(document).on('click','.acquire-confirmation', function(event) {
		event.preventDefault();	
		var $this=$(this);
		process_id = $(this).attr(&quot;rel&quot;);

		$(&quot;#acquire-dialog&quot;).dialog('option', 'buttons', {
			&quot;Confirm&quot; : function() {
				$this.data(&quot;restore_html&quot;,$this.closest(&quot;td&quot;).html());
				$this.closest(&quot;td&quot;).html('&lt;img class=&quot;qmark&quot; title=&quot;Loading...&quot; src=&quot;images/loading.gif&quot;&gt;');
				$.ajax({
					type: 'POST',
					autoOpen:true,
					modal:true,
					url:'includes/_add_ajax.php',
					dataType:'JSON',
					data:{section: 'acquire_document', process_id: process_id},
					context:$this,
					complete:function(data){
						console.log(data);
						console.log(data.type);
						$(&quot;#ajax_notifications&quot;).freeow(data.subject,data.message,{classes: [data.type]});
						$closest_td = $(this).closest(&quot;td&quot;);
						$closest_tr = $(this).closest(&quot;tr&quot;);
						if (data.type == 'success')
						{
							$closest_tr.find(&quot;div:first&quot;)
								.removeClass('icon_status_0')
								.addClass('icon_status_2')
								.attr('title','You have acquired access to this document.');
							
							if (typeof data.status !== &quot;undefined&quot;)
							{
								var document_status = ['A','B','C'];
								$closest_td.prev().html(document_status[data.status]);
								if (data.status == 1)
								{								
									$closest_td.html('&lt;a class=&quot;qmark&quot; target=&quot;_blank&quot; title=&quot;Generate a return for this document.&quot; href=&quot;includes/generate_return.php?id='+ process_id +'&quot;&gt;&lt;img src=&quot;images/icon_pdf.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;');
								}
								else
								{
									$closest_td.html('&lt;img class=&quot;qmark&quot; title=&quot;You can only generate a return for a document once its been served or a return of non-service has been issued.&quot; src=&quot;images/icon_question.png&quot;&gt;');
								}
							}
						}
						else
						{
							$(this).closest(&quot;td&quot;).html($(this).data(&quot;restore_html&quot;));
						}
					}
				});
				
 $(this).dialog(&quot;close&quot;);
			},
			&quot;Cancel&quot; : function() {
				$(this).dialog(&quot;close&quot;);
			}
		});

		$(&quot;#acquire-dialog&quot;).dialog(&quot;open&quot;);
	});
});
</code></pre>
 
Problems with the code now: 
&nbsp;- my data object isnt being returned as JSON object anymore? console.log(data) spews out all the json text, but data.type for example is undefined. 
&nbsp;- my icons arent changing like they were, thats due to the above tho 
&nbsp;- why do you sometimes refer to $this and others to $(this); are you sure you converted this text properly? shouldnt it all be referring to $this after you assign $(this) to $this?
</div>

<div>
Also, just looked at jquery.ajax() documentation, and the following two lines of code you had dont exist? 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autoOpen:true, 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;modal:true,
</div>

<div>
changed 
<pre><code class="code-1 nolinks" id="code-20-38170370-1">complete:function(data){
</code></pre>
 to 
<pre><code class="code-1 nolinks" id="code-20-38170370-2">success:function(data){
</code></pre>
 and now data is a json object again...
</div>

<div>
Ahh yes, sorry forgot the type:&quot;POST&quot;. 
 
dataType should be &quot;json&quot; not &quot;JSON&quot;, think that will return jQuery.parseJSON as the data object (or a parseError) as before, if not you can call $.parseJSON on the text. <a href="http://api.jquery.com/jQuery.parseJSON/" rel="ugc">http://api.jquery.com/jQuery.parseJSON/</a>&nbsp;- added in version 1.4.1 of jQuery. 
 
We set $this to be $(this) in the click function of the element with class acquire-confirmation. We therefore know that $this will be the element that has been clicked until someother element is clicked. We use $this in the dialog $(this) will be the div that is used to display the dialog, this doesn't matter as the dialog is modal. We then set the context of the ajax request to be $this. The ajax then fires and it then waits for response from the server, in the meantime a user might have clicked on a different acquire-confirmation. When it completes the complete function is run at this point we have $(this) and we know that it has not been reset by calling more ajax requests on other elements. All the $thissing and $(thating) has been done to solve the problem you had in the first place.
</div>

<div>
sorry, comments crossed over, and I forgot about the complete function not parsing the json, just wanted something to run for if there was an error. You may need to add an errorfunction which calls $(this).closest(&quot;td&quot;).html($(this).data(&quot;restore_html&quot;)); but you may want to alert the error problem - this runs in the case of 404 not found or if the server is down etc. The else in your statement which calls that code only checks for stuff where the code on teh server completes, but where the type in the json object is not &quot;success&quot;.
</div>

<div>
Ok thanks for clearing that up. I have nonetheless changed 'complete' to 'success' because changing JSON to json didnt do anything on dataType. 
 
I am now having trouble with this part of the code: 

<pre><code class="code-10 nolinks" id="code-20-38170452-1">						$closest_td = $(this).closest(&quot;td&quot;);
						$closest_tr = $(this).closest(&quot;tr&quot;);
console.log(data.type);
						if (data.type == 'success')
						{
console.log($closest_tr.html());
							$closest_tr.find(&quot;div:first&quot;)
								.removeClass('icon_status_0')
								.addClass('icon_status_2')
								.attr('title','You have acquired access to this document.');
							
console.log(data.status);
console.log($closest_td.html());
</code></pre>
In the console log, this returns: 
success 
null 
1 
null 
 
and understandably my icons arent changing because the selectors arent working. Any idea why?
</div>

<div>
hmmm, that's annoying, and this quite difficult for me to replicate (normally I'd set up the same thing as you have and try it, then I know the answers instantly). I know I have done this before but ages ago, it might not have been with an JSON object and I know that JSON is dealt with in a different way to XML, so I hope that they pass the context through. 
 
A few things to try: 
 
1. The document say that you have to pass the dom element to jQuery.ajax as the context so can you try context:$this.context, instead. I know I have passed a jquery object before but don't know if that was with this version of jQuery (by the way which version??) and also I don't know if that was with json as datatype. This is a long shot, but is the easiest &quot;fix&quot;. 
 
2. Let's see what $(this) is in the success function - can you add the following code instead of line 3 in your code above:
<pre><code class="code-1 nolinks" id="code-20-38170742-1">console.log($(this));
for (v in $(this)){
console.log(v+&quot;:&quot;+this[v]);
}
console.log(data.type);
...
</code></pre>
and then let me know the results 
 
3. Lastly do you get some different result for a different dataType - e.g. text? - you will need to $.parseJSON(data) to get the object with status etc in it.
</div>

<div>
Ok, so I added the following in the success function
<pre><code class="code-1 nolinks" id="code-20-38171262-1">console.log($(this).html());
console.log($(this).parent().html());
</code></pre>
 Which outputs 
&lt;img src=&quot;images/icon_document_add.png&quot; border=&quot;0&quot;&gt; 
null 
 
The first out put is correct, the second is null. Which tells me that what we're doing is just ending up with a copy of the element and not the actual &quot;initiator&quot;. 
 
I also did what you asked and added the code in the success function and it gave this output: 
[see attached file] 
 
By the way, a row looks like this: 

<pre><code class="code-1 nolinks" id="code-20-38171262-2">&lt;tr class=&quot;ui-widget-content jqgrow ui-row-ltr&quot; tabindex=&quot;-1&quot; id=&quot;2&quot; role=&quot;row&quot;&gt;&lt;td aria-describedby=&quot;documents_acquired&quot; title=&quot;&quot; style=&quot;text-align:center;&quot; role=&quot;gridcell&quot;&gt;&lt;div title=&quot;You have &amp;lt;strong&amp;gt;not&amp;lt;/strong&amp;gt; acquired access to this document.&quot; class=&quot;qmark icon_status_0&quot;&gt;&lt;/div&gt;&lt;/td&gt;&lt;td aria-describedby=&quot;documents_case_number&quot; title=&quot;615/08&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;615/08&lt;/td&gt;&lt;td aria-describedby=&quot;other-col-1&quot; title=&quot;other-col-1-data&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;other-col-1-data&lt;/td&gt;&lt;td aria-describedby=&quot;other-col-2&quot; title=&quot;other-col-2-data&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;other-col-2-data&lt;/td&gt;&lt;td aria-describedby=&quot;other-col-3&quot; title=&quot;other-col-3-data&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;other-col-3-data&lt;/td&gt;&lt;td aria-describedby=&quot;other-col-4&quot; title=&quot;other-col-4-data&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;other-col-4-data&lt;/td&gt;&lt;td aria-describedby=&quot;other-col-5&quot; title=&quot;Acquire to view status &amp;gt;&quot; style=&quot;&quot; role=&quot;gridcell&quot;&gt;Acquire to view status &amp;gt;&lt;/td&gt;&lt;td aria-describedby=&quot;documents_actions&quot; title=&quot;&quot; style=&quot;text-align:center;&quot; role=&quot;gridcell&quot;&gt;&lt;a href=&quot;/index.php?section=search&amp;amp;subsection=acquire&amp;amp;action=add&amp;amp;process_id=10_5240&quot; title=&quot;Acquire this document to be able to view more details on it as well as generate its return.&quot; class=&quot;qmark acquire-confirmation&quot; rel=&quot;10_5240&quot;&gt;&lt;img border=&quot;0&quot; src=&quot;images/icon_document_add.png&quot;&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
</code></pre>
<a href="https://filedb.experts-exchange.com/incoming/2012/07_w28/588493/firebug-log.txt" target="_blank" class="file-inline" title="firebug log (294 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>firebug-log.txt</a>
</div>

firebug-log.txt

<div>
ah that makes sense as to why my previous code I have used like this might have worked. I suggest that you do the first thing that I suggested in my previous comment (context:$this.context on the ajax options). That will set the context (this) to the actual dom element rather than the copy of it that jQuery has in it's object. jQuery can loose reference to dom elements between scripts, particularily if it has to add other things to the dom. - full script:
<pre><code class="code-10 nolinks" id="code-20-38171672-1">$(document).ready(function() {
	$(&quot;#acquire-dialog&quot;).dialog({
		autoOpen: false,
		modal: true
	});

	$(document).on('click','.acquire-confirmation', function(event) {
		event.preventDefault();	
		var $this=$(this);
		process_id = $(this).attr(&quot;rel&quot;);

		$(&quot;#acquire-dialog&quot;).dialog('option', 'buttons', {
			&quot;Confirm&quot; : function() {
				$this.data(&quot;restore_html&quot;,$this.closest(&quot;td&quot;).html());
				$this.closest(&quot;td&quot;).html('&lt;img class=&quot;qmark&quot; title=&quot;Loading...&quot; src=&quot;images/loading.gif&quot;&gt;');
				$.ajax({
					type: 'POST',
					autoOpen:true,
					modal:true,
					url:'includes/_add_ajax.php',
					dataType:'JSON',
					data:{section: 'acquire_document', process_id: process_id},
					context:$this.context,
					success:function(data){
						console.log(data);
						console.log(data.type);
						$(&quot;#ajax_notifications&quot;).freeow(data.subject,data.message,{classes: [data.type]});
						$closest_td = $(this).closest(&quot;td&quot;);
						$closest_tr = $(this).closest(&quot;tr&quot;);
						if (data.type == 'success')
						{
							$closest_tr.find(&quot;div:first&quot;)
								.removeClass('icon_status_0')
								.addClass('icon_status_2')
								.attr('title','You have acquired access to this document.');
							
							if (typeof data.status !== &quot;undefined&quot;)
							{
								var document_status = ['A','B','C'];
								$closest_td.prev().html(document_status[data.status]);
								if (data.status == 1)
								{								
									$closest_td.html('&lt;a class=&quot;qmark&quot; target=&quot;_blank&quot; title=&quot;Generate a return for this document.&quot; href=&quot;includes/generate_return.php?id='+ process_id +'&quot;&gt;&lt;img src=&quot;images/icon_pdf.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;');
								}
								else
								{
									$closest_td.html('&lt;img class=&quot;qmark&quot; title=&quot;You can only generate a return for a document once its been served or a return of non-service has been issued.&quot; src=&quot;images/icon_question.png&quot;&gt;');
								}
							}
						}
						else
						{
							$(this).closest(&quot;td&quot;).html($(this).data(&quot;restore_html&quot;));
						}
					}
				});
				
 $(this).dialog(&quot;close&quot;);
			},
			&quot;Cancel&quot; : function() {
				$(this).dialog(&quot;close&quot;);
			}
		});

		$(&quot;#acquire-dialog&quot;).dialog(&quot;open&quot;);
	});
});
</code></pre>
 
If that doesn't work try the following script:
<pre><code class="code-10 nolinks" id="code-20-38171672-2">$(document).ready(function() {
	$(&quot;#acquire-dialog&quot;).dialog({
		autoOpen: false,
		modal: true
	});

	$(document).on('click','.acquire-confirmation', function(event) {
		event.preventDefault();	
 var $self = this;
		var $this=$($self);
		process_id = $(this).attr(&quot;rel&quot;);

		$(&quot;#acquire-dialog&quot;).dialog('option', 'buttons', {
			&quot;Confirm&quot; : function() {
				$this.data(&quot;restore_html&quot;,$this.closest(&quot;td&quot;).html());
				$this.closest(&quot;td&quot;).html('&lt;img class=&quot;qmark&quot; title=&quot;Loading...&quot; src=&quot;images/loading.gif&quot;&gt;');
				$.ajax({
					type: 'POST',
					autoOpen:true,
					modal:true,
					url:'includes/_add_ajax.php',
					dataType:'JSON',
					data:{section: 'acquire_document', process_id: process_id},
					context:$self,
					success:function(data){
						console.log($(this).html());
						console.log($(this).parent().html());
						$(&quot;#ajax_notifications&quot;).freeow(data.subject,data.message,{classes: [data.type]});
						$closest_td = $(this).closest(&quot;td&quot;);
						$closest_tr = $(this).closest(&quot;tr&quot;);
						if (data.type == 'success')
						{
							$closest_tr.find(&quot;div:first&quot;)
								.removeClass('icon_status_0')
								.addClass('icon_status_2')
								.attr('title','You have acquired access to this document.');
							
							if (typeof data.status !== &quot;undefined&quot;)
							{
								var document_status = ['A','B','C'];
								$closest_td.prev().html(document_status[data.status]);
								if (data.status == 1)
								{								
									$closest_td.html('&lt;a class=&quot;qmark&quot; target=&quot;_blank&quot; title=&quot;Generate a return for this document.&quot; href=&quot;includes/generate_return.php?id='+ process_id +'&quot;&gt;&lt;img src=&quot;images/icon_pdf.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;');
								}
								else
								{
									$closest_td.html('&lt;img class=&quot;qmark&quot; title=&quot;You can only generate a return for a document once its been served or a return of non-service has been issued.&quot; src=&quot;images/icon_question.png&quot;&gt;');
								}
							}
						}
						else
						{
							$(this).closest(&quot;td&quot;).html($(this).data(&quot;restore_html&quot;));
						}
					}
				});
				
 $(this).dialog(&quot;close&quot;);
			},
			&quot;Cancel&quot; : function() {
				$(this).dialog(&quot;close&quot;);
			}
		});

		$(&quot;#acquire-dialog&quot;).dialog(&quot;open&quot;);
	});
});
</code></pre>
Good Luck!
</div>

<div>
$(this).parent.html(); is returning null in both of the above :/
</div>

<div>
<div class="content wysiwyg-content">
<pre><code class="code-10 nolinks" id="code-10-27785620-1">$(document).ready(function() {
	$(&quot;#acquire-dialog&quot;).dialog({
		autoOpen: false,
		modal: true
	});
});

$(document).on('click','.acquire-confirmation', function(event) {
	event.preventDefault();	
	init_elem = $(this);
	closest_td = $(init_elem).closest(&quot;td&quot;);
	closest_tr = $(init_elem).closest(&quot;tr&quot;);
	process_id = $(this).attr(&quot;rel&quot;);
		
	$(&quot;#acquire-dialog&quot;).dialog('option', 'buttons', {
		&quot;Confirm&quot; : function() {
			restore_html = $(init_elem).closest(&quot;td&quot;).html();
			$(closest_td).html('&lt;img class=&quot;qmark&quot; title=&quot;Loading...&quot; src=&quot;images/loading.gif&quot;&gt;');
			$.post(
				'includes/_add_ajax.php', 
				{section: 'acquire_document', process_id: process_id},
				function(data){
					$(&quot;#ajax_notifications&quot;).freeow(data.subject,data.message,{classes: [data.type]	});
					if (data.type == 'success')
					{
						$(closest_tr).find(&quot;div:first&quot;)
							.removeClass('icon_status_0')
							.addClass('icon_status_2')
							.attr('title','You have acquired access to this document.');
						if (typeof data.status !== &quot;undefined&quot;)
						{
							var document_status = ['A','B','C'];

							$(closest_td).prev().html(document_status[data.status]);
							if (data.status == 1)
								$(closest_td).html('&lt;a class=&quot;qmark&quot; target=&quot;_blank&quot; title=&quot;Generate a return for this document.&quot; href=&quot;includes/generate_return.php?id='+ process_id +'&quot;&gt;&lt;img src=&quot;images/icon_pdf.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;');
							else
								$(closest_td).html('&lt;img class=&quot;qmark&quot; title=&quot;You can only generate a return for a document once its been served or a return of non-service has been issued.&quot; src=&quot;images/icon_question.png&quot;&gt;');
						}
					}
					else
						$(init_elem).closest(&quot;td&quot;).html(restore_html);
				},
				'json'
			);
			$(this).dialog(&quot;close&quot;);
		},
		&quot;Cancel&quot; : function() {
			$(this).dialog(&quot;close&quot;);
		}
	});
	
	$(&quot;#acquire-dialog&quot;).dialog(&quot;open&quot;);

});
</code></pre>
 
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?
</div>
</div>

(CODE)

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?

jQuery Instances Overwriting Eachother

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.

AJAX

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.