Inserting HTML into DIV using JQuery

Question

I've got a bunch of buttons nested within div tags in my html

<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
...

Clicking on the button posts some data using JQuery and returns some HTML through a .ajax success function. I'm trying to replace the content of the div for each button that is clicked, but for some reason my JQuery selector doesn't seem to be working.

I'm trying the following within my success function:

$(this).parent().html(data);

I know that the data is being posted successfully and that the success function is working. What's weird is that the following works:

$(".button-wrapper").html(data);

but obviously this adds the HTML to every div, not just the one for the button that is clicked.

Does anyone know where I might be going wrong here?

it seems like this should work however I think you are having scope issues, we can't tell this unless you post the whole .ajax function, please post the function in its entirety — Kevin Bowersox
– Kevin Bowersox, Commented Jul 8, 2011 at 0:40
It sounds like another issue of the keyword this. Could you post the script which does the insert job and let us see? We can't say much without taking a look at it. — shinkou
– shinkou, Commented Jul 8, 2011 at 0:40

Justin Lucas · Accepted Answer · 2011-07-08 00:41:15Z

15

In jQuery 'this' is commonly overwritten within a callback. The workaround is to reference this using another variable:

var _this = this; //or var $_this = this;
$(_this).parent().html(data);

answered Jul 8, 2011 at 0:41

Justin Lucas

2,3111 gold badge14 silver badges22 bronze badges

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

Comments

James Montagne · Accepted Answer · 2011-07-08 00:41:58Z

4

The problem is that in your callback this is not the button anymore. Try this:

$(".button-wrapper").click(function(){
   var that=this;
   $.ajax(
      // ...
      success: function(data){
         $(that).parent().html(data);  
      }
   );
});

answered Jul 8, 2011 at 0:41

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

1 Comment

rolling stone Over a year ago

+ 1 thanks, this works great! There were a couple of similar answers so just went with the first answer that was posted.

Rejwanul Reja · Accepted Answer · 2015-02-03 09:19:06Z

2

This will helpfull for you....

$("button").click(function(){
    $("div").html("Hello <b>world</b>!");
});

answered Feb 3, 2015 at 9:19

Rejwanul Reja

1,4991 gold badge20 silver badges20 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

The question is about a reference to the correct this inside a jQuery callback. This answer is irrelevant (except for your friends to serial upvote) -1

Kevin Bowersox · Accepted Answer · 2011-07-08 00:43:58Z

0

Html:

<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>
<div class="button-wrapper">
    <button class="button-class">Click here</button>
</div>

JS:

  $.ajax({
//..
      success: function(){
         $(".button-class").click(function(){
           $(this).parent().html("Dynamic Html");
        });
      }
    });

answered Jul 8, 2011 at 0:43

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

1 Comment

rolling stone Over a year ago

thanks @kmb385, but just fyi i tested that out and it actually didn't work.

bensiu · Accepted Answer · 2013-01-11 17:41:40Z

0

You should know that you need to load log of the success function eg: setInterval(myFunction,2500);

edited Jan 11, 2013 at 17:41

bensiu

25.7k56 gold badges81 silver badges117 bronze badges

answered Jan 11, 2013 at 17:25

Younglegend

1

Collectives™ on Stack Overflow

Inserting HTML into DIV using JQuery

5 Answers 5

Comments

1 Comment

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

1 Comment

Comments

Related