Refresh DIV Content Without Reloading Page

[Sananil]

Hi, first of all let me thank anyone willing to help out with this. Jquery / Ajax update Span or Div by ID without refreshing page

<?php
}
$select = $DatabaseCo->dbLink->query("select sh_id from shortlist where to_id='" . $Row->matri_id . "' and from_id='" . $user_id . "'");
if (mysqli_num_rows($select) == 0) {
?>

<a  class="bis-cursor  <?php
                              if (isset($_SESSION['user_id'])) {
                              echo "addToshort-link";
                                                    }
                                                    ?>" id="<?php echo $Row->matri_id; ?>" title="Add to Shortlist">

 <h6 class="mlm text-black-1 pb-2">Add to Shortlist</h6></a>
  <?php } else { ?> 
  <a  class="bis-cursor f5 <?php
                              if (isset($_SESSION['user_id'])) {
                              echo "addToblock-link";
                                                    }
                                                    ?>" id="<?php echo $Row->matri_id; ?>" title="Remove From Shortlist">

<h6 class="mlm text-black-1 pb-2">Remove Shortlist</h6></a>
  <?php } ?>

  ==========================================================
  My jquery code

  ========================================================
  $('.addToblock-link').click(function () {
$('#shortdiv').hide();
});

$(function() {
$(".addToblock-link").click(function(e) {
e.preventDefault();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;

$.ajax({
   type: "POST",
   url: "addshortlist",
   data: string,
   cache: false,
   success: function(){
  $("#loaderID-2").css("opacity",1);
                        $("#loaderID-2").css("z-index",9999);
                $('#loaderID-2').html('<div class="success-msg-1"> <div class="rmr"><div class="mark-circle"><div class="background"></div><div class="mark draw"></div></div></div></div>');

                setTimeout(function() {
                    e.preventDefault();
                        $("#loaderID-2").css("opacity",0);
                        $("#loaderID-2").css("z-index",-1);
                                            }, 2000); location.reload(); 
  }

 });

return false;
    });
});
$('.addToshort-link').click(function () {
$('#shortdiv').hide();
});

$(function() {
$(".addToshort-link").click(function() {
$('#shortdiv').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'add_id='+ id ;

$.ajax({
   type: "POST",
   url: "addshortlist",
   data: string,
   cache: false,
   success: function(){
        $("#loaderID-2").css("opacity",1);
                        $("#loaderID-2").css("z-index",9999);
                $('#loaderID-2').html('<div class="success-msg-1"> <div class="rmr"><div class="mark-circle"><div class="background"></div><div class="mark draw"></div></div></div></div>');

                setTimeout(function() {

                        $("#loaderID-2").css("opacity",0);
                        $("#loaderID-2").css("z-index",-1);
                    }, 2000); location.reload();
  }

 });

return false;
    });
});

[Biiim]

What I do is this: (you probably want the part inside success: function(msg){

$.ajax({
    type: "POST",
    data: {data:data},
    url: connectProtocol+"://"+currentHost+"/analytics/ajaxProfileData.php",
    success: function(msg){
        var responseData = $.parseJSON(msg);
        if(responseData['status'] == 'success'){
            $('#div_dashboardContactsHomeProfileName').html(responseData['data']['first_name']+' '+responseData['data']['last_name']);
            if(responseData['data']['profImage'] == 'null'){
                $('#div_dashboardContactsHomeProfileImg').attr('src',connectProtocol+"://"+currentHost+'/includes/images/profile_images/default.png');
            }else{
                $('#div_someidtoProfileImg').attr('src',connectProtocol+"://"+currentHost+'/fileUploads/images/'+responseData['data']['profImage']);
            }
        }else{

        }
    }
});

Then the PHP page has something like this:

<?php
    $dataQ = "SELECT `some`, `columns`"
    ." FROM `some_table`"
    ." WHERE `some` = {$something}"
    ." ORDER BY `some` DESC";

    $dataR = dbQuery($A['DB'], $dataQ);
    $dataD = dbFetchAssoc($dataR, false);

    $D = [];
    $D['data'] = [];
    $D['query'] = $dataQ;

    if($dataD['rows'] > 0){
        $D['data'] = $dataD['data'];
    }
    $D['status'] = 'success';
    $D['msg'] = 'data retrieved';
}else{
    $D = [];
    $D['data'] = [];
    $D['status'] = 'success';
    $D['msg'] = 'Error';
}
echo json_encode($D);
?>

So probably the JSON encode & JSON decode is what you are looking for

[lps]

location.reload() will reload the document, while your code only need the div to be replaced. So in my opinion, can try remove those location.reload() and try again

[Sananil]

If i remove location.reload() update not showing. i need to refresh the browser .. then only show update content

[Biiim]

location.reload is not a solution to AJAX. The point of AJAX is it fetches data from another URL and brings the data back to the page through javascript.

You need to tell javascript what you want to do with the data in the success: function(msg){ section. The variable msg is the javascript variable with the response from the page, then you tell javascript to take the response and put in into a HTML element on the page. Either document.getElementById('myDiv').innerHTML = msg; for plain Javascript or if you use jQuery you can do $('#myDiv').html(msg);

so

success: function(msg){
    document.getElementById('myDiv').innerHTML = msg;
}

The example I gave earlier is a bit more complex cause it encodes the data in JSON so you can pick it up in javascript as a preformatted data array but the above is the simplest form it works in