CODEWITHSUNDEEP
javascriptphpjqueryajax
Usman Waheed
Usman Waheed

Reputation: 21

How can I refresh a specific div after Ajax response?

The problem is that I want to refresh a specific div after the Ajax response successfully recently I am using: 

$("#parent_div").load(location + "#child_div")

This will refresh whole parent div not specific child_div I have been use these 

$("#parent_div").load(location + "#child_div")
$("#parent_div").reload(location + "#child_div")
$("#child_div").reload(window.location + "#child_div")

Any suggestion regarding this particular issue?

Upvotes: 1

Views: 16104

Answers (3)

Krishnadev P Melevila
Krishnadev P Melevila

Reputation: 39

$("#child_div").load(location + "#parent_div")

to load a specific div, add the div you need to refresh on first section(ie; where i added child div) and now load is a function to load page, where location means current location and parent div is the content of page to be loaded

Upvotes: 0

ANR Upgraded Version
ANR Upgraded Version

Reputation: 949

AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. This Art comes to life when we were able refer to the tagName of DOM nodes i.e.,Element.You can allow or restrict any ajax response to be refreshed with this elements.

<div id="parent_div">
    <span class="parenttexthere">Parent Div Text </span>
    <div id="child_div" >
        <span class="childtexthere">Child Div Text </span>
    </div>
</div>
<br/>
<button> Refresh</button>
<script>
var i=1;
$('button').on('click',function(){
    var data="Parent Div Data Changed "+i+ " times";

    $("#parent_div .parenttexthere").hide().html(data).fadeIn('fast');
    i++;
               });
</script>

Any how this Demo is to specify Elements usage to your example.Where You Can Perform same thing on Ajax call Success. Working Demo

Upvotes: 1

adang
adang

Reputation: 547

I assume you want to update a specific element on page with response of ajax call(or some manipluation etc). On ajax success or error event, set the specific element html using methods html or append as shown below:

 jQuery("#myelement").html("Ajax response came as success");

or if you want to append then:

 jQuery("#myelement").append("Ajax response came as success");

here the html, append word will replace the element content with the content you provided as string ("Ajax response came as success"). The content can inculde html div or simple text . Here in example "myelement" is id of the html element.

For example:

 <div id="myelement"></div>

Upvotes: 0

Related Questions