Refreshing one section of a page using Ajax contex

Question

I'm trying to refresh just one part of my page when a user clicks a 'clear' button, currently I'm using a bit of code I hacked off another answer I found on here:

$('.clear').click(function () {
    $.ajax({
      url: "",
      context: document.body,
      success: function (s, x) {
        $(this).html(s);
      }
    });
});

This reloads the whole document body, how do I target a particular div or class?

  context: document.body.somediv?

Answer 1

Try

 success: function (s, x) {
    $('#yourdiv').html(s);//yourdiv is id of div u want to update
    }

Can also access div by its class like

$('.classOfDiv')

Have u tried using of context

context: {div:$('#yourdiv')}

In success

this.div.html(s);

Answer 2

Hi if you want that ajax output reflect on a particular div, Please make sure that div has Id or class so we can easily trace that on DOM. Suppose that div has class content-output then following script will work for you.

$('.clear').click(function () {
$.ajax({
url: "",
success: function (s, x) {
$('.content-output').html(s);
}
});
});

Answer 3

If you want to load only particular div via Ajax then use jquery load event like this

//clear button click event
$('.clear').click(function () {

  // load ajax response inside result id (html element)
  $( "#result" ).load( "URL" );

});

If you to perform some kind of action then add function inside load event like this

$( "#result" ).load( "URL", function() {
  alert( "Load was performed." );
});

Answer 4

jQuery API about the context option:

This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

So, the context option is to set the scope of the this object in the callback functions. By default it is the ajax object, with the current configuration:

$.ajax({
    url: ""
}).done(function(){
    console.log(this); 
    // logs: { url: "", type: "GET", etc... }
    // 
});

If you wish to target a specific section to load the response in, you can just use jQuery to find the element and put the response in that element, context is not relevant for you:

$.ajax({
  url: "",
}).success(function(data){
  // data is your response
  $(".some-element").html(data);
});

However, you can use context to make the configuration a bit easier to understand, like so:

$.ajax({
  url: "",
  context: $(".some-element")
}).success(function(data){
  $(this).html(data);
  // $(this) refers to the context object, in this case $(".some-element")
});

If you now want your ajax response to be loaded somewhere else on the page, you just have to change the selector on the context parameter.

Answer 5

You can use DIV id or class name to target a particular div element.

<div id="div1" class="class1">
    <div id="div2" class="class2">
    </div>
</div>


$('#div2').html(your-text); // using ID

$('.class2').html(your-text); // using Class

Answer 6

If I understand correctly,you can simply call .load() from a click event and pass it the href of the link:

HTML:

<a class="link" href="page.php?id=10">Click Here<a>

JS:

$(".link").click( function(event) {
    event.preventDefault();
    $("#text").load($(this).attr("href"));
});

see the demo