CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Lijo
Lijo

Reputation: 6778

jquery hide not working for same div class after ajax call?

1.This is my code here i have a div class inner which is dynamically loaded using ajax call and after ajax call if i click the hide button it is not working.

But its working perfectly before ajax request.

so in order to overcome i just add a outer div and hide that div this time it works.. I don't know why?

$( "#inner" ).replaceWith( data );  /*and*/  $( "#inner" ).hide();   //not working


$( "#inner" ).replaceWith( data );    /*and*/     $( "#outer" ).hide();  //working

Why we cant use the same div class ?

<html>
  <div id="outer">
  <div id="inner">
    <br /> <br /> <br />
  <div>  <input type="button" value="signup"  onclick="changeval();"/>
  </div>
  <br /> <br />  
  </div>
  </div>
  <input type="button" value="hide" onclick="onhide();"/>    
  <script language="javascript"> 
   function changeval(context)
   {          
     var typeval="sdsf";
     var url="sdfsdf";
     $.ajax({
        type:'POST',
        url:'htp://sscs/registration',
        data:'&typeval='+typeval+'&url='+url,
        success:function(data) { 
          $( "#inner" ).replaceWith( data );           
        }        
      });         
    }
    function onhide()
    {
      $( "#inner" ).hide();
    }
  </script>

Upvotes: 1

Views: 933

Answers (4)

Jens
Jens

Reputation: 2075

After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .

You could use $("#inner").html(data); to keep the div and then hide it once you received the response.

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

It doesn't work because you replace the <div id="inner">.

Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Use .html() 

 $("#inner").html(data);

instead of .replaceWith() as

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

DEMO of replaceWith, Here you can see div with second class is replace with input content.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Use like this:

$( "#inner" ).replaceWith( function(){
    return $(this).data();
} );

Upvotes: 0

Related Questions