1

I've read the documentation regarding the context setting of jQuery.ajax().

When the DOM manipulation is triggered outside of the ajax call, the DOM is successfully affected:

var element = $('#logo');
element.addClass('good');
console.log(element);
$.ajax({
  context: element,
  url: 'myfile.json',
  type:'get',
  dataType:'json',
  success: function(data) {    
    //reserved
  }
});

When I move the DOM manipulation inside the ajax call, the expected result shows in the console output but is not actually reflected in the DOM:

var element = $('#logo');
$.ajax({
  context: element,
  url: 'myfile.json',
  type:'get',
  dataType:'json',
  success: function(data) {    
    $(this).addClass('good');
    console.log($(this));
  }
});
// [h1#logo.good, selector: "#logo", context: document]

I have also tried referencing 'element' instead of $(this) without success:

var element = $('#logo');
$.ajax({
  context: element,
  url: 'myfile.json',
  type:'get',
  dataType:'json',
  success: function(data) {    
    element.addClass('good');
    console.log(element);
  }
});
// [h1#logo.good, selector: "#logo", context: document]

It seems odd that the context in the console output is 'document' rather than '#logo'. In any case, the element reference seems to get lost as soon as it's inside the ajax call.

I have tried all three of the solutions in the accepted answer of a similar question to no avail.

Any ideas? I'm going gray.

Community
  • 1
  • 1
Stephen
  • 155
  • 2
  • 11
  • The `context` of the `#logo` element is `document`; that is expected result. You have not changed the context of `#logo` element; you have changed `context` of `$.ajax()` to `#logo`. What are you trying to achieve? – guest271314 May 07 '16 at 08:31
  • I am trying to manipulate an element from within the success callback. Ideally, from within the success callback, I will pass the element to a function for manipulation. – Stephen May 07 '16 at 13:30
  • Yes, which portion of `js` is not returning expected results? – guest271314 May 07 '16 at 13:56
  • The first example appears to meet requirement? – guest271314 May 07 '16 at 14:05
  • _"I get the feeling you haven't read the entire question. "_ Re-read Question on several occasions. Are you stating that `this` is not `#logo` within `$.ajax()` `success` callback at second example at Question? _"The element reference seems to get lost as soon as it's inside the ajax success call"_ Can you create a jsfiddle http://jsfiddle.net to demonstrate? – guest271314 May 07 '16 at 20:01

1 Answers1

0

You are apparently mistaking context option of $.ajax() for context of jQuery(). They are different.

context of $.ajax()

context

Type: PlainObject

This object will be the context of all Ajax-related callbacks. By default, the context is an object that represents the Ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

set this object at $.ajax() callbacks. context of jQuery()

context

Type: Element or jQuery

A DOM Element, Document, or jQuery to use as context

Selector Context

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. > For example, to do a search within an event handler, the search can be restricted like so:

$( "div.foo" ).click(function() {
  $( "span", this ).addClass( "bar" );
});
guest271314
  • 1
  • 15
  • 104
  • 177
  • @Stephen Setting the `context` of `#logo` to `#logo` would effectively be call at `$()` for `#logo` to search for the `#logo` element as a child of itself; where `#logo` is an `id` , there should not be duplicate `id`s in `document`, result would be `var element = $('#logo', document.getElementById("logo"));` returning a jQuery object without `#logo` element being selected `[prevObject: jQuery.fn.init[1], context: div#logo, selector: "#logo"]`; as `#logo` `context` would be the `parent` element. Though you could set `context` to `.parent`, of `#logo` to return `#logo` element – guest271314 May 07 '16 at 20:35
  • If you look at my second code block, I am using `context` of `$.ajax()` as you have described. I am not setting the context of #logo… – Stephen May 08 '16 at 04:12
  • @Stephen Yes, your second example should return expected result? Not certain what the issue is you are trying to convey? – guest271314 May 08 '16 at 04:21