Assigning innerHTML to elements using $().each via AJAX not working

Question

This page of my app is a dashboard which consists of div's acting as 'panels', like so

<div class='panel' id='usersPanel' data-request='users'>
    <h1>Users</h1>
    <p class='panel-contents'>Will be filled with AJAX results</p>
</div>

On page load, they're populated via AJAX

$(document).ready(function() {
    $('.panel').each(function(index, value) {
        $.get('/panel', {'content': $(this).attr('data-request')}, function(data) {
            $(this).find('.panel-contents').html(data);
        });
    });
});

The request is sent fine. The response is OK. But I can't seem to write it into .panel-contents. Am I missing something?

out of curiousity, try doing console.log($(this) ) in the return function. — Snowmonkey, Jan 23 '17 at 16:02
@KevinB He said the response was okay. He just cannot replace the html. — Andrew Ice, Jan 23 '17 at 16:04
And we're all saying the same thing. within the scope of the returned function, 'this' has changed. — Snowmonkey, Jan 23 '17 at 16:04
@AndrewIce Right, exactly. `this` isn't the element node, it's the JQXHR and therefore $(this) won't work. — Kevin B, Jan 23 '17 at 16:04
That's not the point. inside the returned function, this refers to something different. — Snowmonkey, Jan 23 '17 at 16:04
Yep. `this` is the request, not the object. Dammit, I spent a day trying to figure this out. — starleaf1, Jan 23 '17 at 16:07

score 3 · Accepted Answer · answered Jan 23 '17 at 16:02

3

I believe the problem is in your success function. When that executes this equates to something different try:

$(document).ready(function() {
    $('.panel').each(function(index, value) {
        var panel = this;
        $.get('/panel', {'content': $(this).attr('data-request')}, function(data) {
            $(panel).find('.panel-contents').html(data);
        });
    });
});

answered Jan 23 '17 at 16:02

MikeS

1,734
1
9
13

He said the response was okay. He just cannot replace the html. – Andrew Ice Jan 23 '17 at 16:03
1

Yes, and I believe he can't replace the html because 'this' within the success function is not the same thing as the 'this' within the success function. The scope is different. – MikeS Jan 23 '17 at 16:04

score 2 · Answer 2 · answered Jan 23 '17 at 16:03

2

You won't get this inside the $.get success listener - cache this beforehand like below:

$(document).ready(function() {
    $('.panel').each(function(index, value) {
        var $this = $(this);
        $.get('/panel', {'content': $(this).attr('data-request')}, function(data) {
            $this.find('.panel-contents').html(data);
        });
    });
});

answered Jan 23 '17 at 16:03

kukkuz

41,512
6
59
95

:D why the downvote?? – kukkuz Jan 23 '17 at 16:04
obvious dupe, answer already covered in dupe – Kevin B Jan 23 '17 at 16:05
okay, but downvoting *is* not necessary for *that*! (of course, I am not assuming you did it) – kukkuz Jan 23 '17 at 16:07
i mean, downvoting/upvoting is never *necessary* – Kevin B Jan 23 '17 at 16:07
yeah, sure it is not – kukkuz Jan 23 '17 at 16:10

Assigning innerHTML to elements using $().each via AJAX not working

2 Answers2