CODEWITHSUNDEEP
jquery
TakN
TakN

Reputation: 87

sibling html update not working as desired jquery

I have been trying to change the contents of a div which I receive from a php file. The problem I am facing is with this particular part $(this).siblings("div").html("info"); Its not updating the contents. It works fine when not in the success call back what am I missing?

<script type="text/javascript">


$(function(){
$("button").click(function(){


var name =$(this).attr('name');
var info = 'test=' + name;
var div= name;

$.ajax({  
  type: "GET",  
  url: "yes.php",  
  data: info,  
  success: 

  function(data)

  {  
           $(this).siblings("div").html(data);  

        }  
    });        



  });
  });




</script>

<style type="text/css">
.max {
color: #00F;
height: 25px;
 }
 .recent {
background-color: #0F0;
width: 500px;
height: 24px;
 }

 div.min{
width: 200px;
height: 100px;
overflow: hidden;
background-color: #F00;
}
</style>


 <div>


 <div class="min">Whats up dude?aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </div>
  <button name='what'>Read More</button>
  </div>


    <br/>
   <div>

    <div class="min">Whats up dude?aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </div>
   <button name='jack'>Read More</button>

   </div>

Upvotes: 0

Views: 90

Answers (2)

ataddeini
ataddeini

Reputation: 4951

I don't think $(this) has the scope you're thinking it does in the callback. Try using an explicit selector instead:

 $(".divClass").siblings("div").html(data);

Upvotes: 0

morgar
morgar

Reputation: 2407

this inside an ajax call points to the xhr object and not to $("button") anymore. Store it in a var, previous to the ajax call, and use it later:

$this = $(this);

and later:

$this.siblings("div").html(data);

Upvotes: 1

Related Questions