How can i load php file after sending ajax data - php

Question

So I have 2 files file1.php with all the php and ajax, and file2.php with only php.
$_POST["there_id"] will be sent from file1.php page to file2.php through ajax.
file1.php code:
<div class="list_items">
<li><p>content here ...</p>
</div>
<div class="content_area">
//load ajax content here
</div>
$(".box").on("click", function(e) {
e.preventDefault();
var there_id = $(this).attr("id");
$.ajax({
url: "indexnew.php",
type: "POST",
data: { there_id : there_id}
});
});
file2.php code:
<div id="file2content>
<?php
$there_id = $_POST['there_id'];
$user_id = 5;
$fetch_data = regular_query("SELECT * FROM contents WHERE
(user_by = :me or user_by + :them) AND (user_to = :me or user_to = :them)",
["me" => $user_id, "them" = $there_id], $conn);
foreach ($fetch_data as $data) : ?>
<li><p>database data here</p>
<?php
endforeach;
?>
</div>
now what i want to do is when file2.php is done with php and list items are available i want to load file2contents to content_area on file1.php.

Answer 1

$(".box").on("click", function(e) {
e.preventDefault();
var there_id = $(this).attr("id");
$.ajax({
url: "indexnew.php",
type: "POST",
data: { there_id : there_id},
success: function(data) {
$('.content_area').html(data);
}
});
});
However, content_area should really be an id rather than a class so that it's unique.
Since you're just returning html, you can simplify it using the .load() function.
$('.box').on('click', function(e) {
e.preventDefault();
var there_id = $(this).attr('id');
$('.content_area').load('indexnew.php', {there_id: there_id});
});

Answer 2

success: function(data) { $(".content_area").html(data); }
adding the above to your AJAX call should do what you want if I understand you correctly.