CODEWITHSUNDEEP
jqueryajax
Ilja
Ilja

Reputation: 46479

Replace content in div after successful ajax function

I would like to replace a content of <div id="container"></div> after the ajax function is successful, also without page refresh.

$.ajax({
      type: "POST",
      url: "scripts/process.php",
      data: dataString,
      success: function() {
        //Whats the code here to replace content in #conatiner div to:
        //<p> Your article was successfully added!</p>
      }
     });
    return false;

Upvotes: 2

Views: 37390

Answers (2)

Dan Heberden
Dan Heberden

Reputation: 11068

http://api.jquery.com/html/

 $.ajax({
  type: "POST",
  url: "scripts/process.php",
  data: dataString,
  success: function( returnedData ) {
    $( '#container' ).html( returnedData );
  }
 });

also using http://api.jquery.com/load/, 

$( '#container' ).load( 'scripts/process.php', { your: 'dataHereAsAnObjectWillMakeItUsePost' } );

Upvotes: 11

jAndy
jAndy

Reputation: 235982

You can set the "context" for an ajax request which then is passed into the success handler. In there, you might just call .html() to replace the content.

$.ajax({
  type: "POST",
  url: "scripts/process.php",
  data: dataString,
  context: '#container',
  success: function() {
    $(this).html('<p> Your article was successfully added!</p>');
  }
});

Ref.:

http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/html/

Upvotes: 2

Related Questions