jQuery ajax mixed html/js <script> avoid losing context when <script> opens

Question

I am facing the following situation. I use ajax to communicate with the backend which responds with mixed html/js code. I use the html() function to load my content in a div - i.e. $("#mydiv").html(ajaxResponse);

However, the js code embedded in <script> tags in the ajaxResponse runs in global (window) context and not my predefined one.

Is there any way to change the context of execution in this situation?

code looks like the following

index.html:

<div id="mydiv"></div>
<script type="text/javascript">
$(function(){
   $.ajax({
      url: '/myAjaxResponse.html',
      context: $(this),
      success: function(resp) { $("#mydiv").html(resp); }
   });
});
</script>

myAjaxResponse.html:

<!-- Some html... really just anything :) -->
<script type="text/javascript">
    console.log($(this));   // $(this) points to window object :(
</script>

What would be your desired context? #mydiv?

vzwick
– vzwick

2012-01-16 22:11:07 +00:00
Commented Jan 16, 2012 at 22:11 — vzwick
– vzwick, Commented Jan 16, 2012 at 22:11

Community · Accepted Answer · 2017-05-23 12:14:27Z

1

Edit: Uh, wait, I just realized I misunderstood your question …

Since You're inserting into the DOM, all JS loaded via XHR is in the window scope automatically – and afaik, there's no proper way around that. All the context option of $.ajax() does, is setting the value of this in the callback function.

(Also, check out this answer which explains things better than I ever could).

One possible, although very very quirky way around the problem would be to set a global variable that you can call later (something along these lines):

var context;

$(function(){
   context = $('whatever');
   $.ajax({
      url: '/myAjaxResponse.html',
      success: function(resp) { $("#mydiv").html(resp); }
   });
});

myAjaxResponse.html:

<script type="text/javascript">
    $this = context;
    console.log($this);   // $this points to whatever you set context to before XHR
</script>

To make a long story short: $(this), in the context of your $.ajax() call, does indeed point to window.

You could/should either go with

$(function(){
   $.ajax({
      url: '/myAjaxResponse.html',
      context: $('#mydiv'),
      success: function(resp) { $("#mydiv").html(resp); }
   });
});

or (somewhat quirkily) with

$(function(){
   $('#mydiv').each(function(){
       $.ajax({
          url: '/myAjaxResponse.html',
          context: $(this),
          success: function(resp) { $("#mydiv").html(resp); }
       });
   })
});

… where this points to the element being iterated over by $.each().

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jan 16, 2012 at 22:17

vzwick

11.1k5 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lonesomeday Over a year ago

"all JS loaded via XHR is in the window scope automatically" Precisely.

ptheofan Over a year ago

ah, my bad (typo), yes, in the $.ajax({context: $("#mydiv)... }) is what I meant :) So, the only way is by global vars right? :( So, if build some uid, attach it to the #mydiv data and "select" based on that uid it should work right? (Will also read the provided link - thanks :)

Collectives™ on Stack Overflow

jQuery ajax mixed html/js <script> avoid losing context when <script> opens

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related