Before posting this question, I did search here and got different answers and I think it doesn't fit to my needs. I have a button when clicked, the following js script will run
$("#update-details-btn").on('click', function() {
$.ajax({
type: 'post',
dataType: 'json',
data: "confirmation="+get_data,
url: '../for_update_details',
success: function(data)
{
console.log(data);
$('div#update_details_body').html(data.results);
and this is the container
<div id="update_details_body" class="modal-body"></div>
the data comes from a php function
$data['results'] = NULL;
$results = "<div class='form-group'>";
$results .= "<label for='document-type' class='col-sm-4 control-label'>Category</label>";
$results .= "</div>";
$data['results'] = $results;
echo json_encode($data);
As you can see from the js, I did a console.log which prints exactly what the data.results contain but when I use .html() to put inside the container, nothing happens. What could be the culprit here? I am doing this coding to other functions but only this section is not working
Code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#update-details-btn").on('click', function() {
alert("inside");
$.ajax({
type: 'post',
dataType: 'json',
url: 'php_file.php',
success: function(data)
{
console.log(data);
$('div#update_details_body').html(data.results);
}
});
});
});
</script>
</head>
<style>
.modal-body
{
margin: 0px;
padding: 0px;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="update_details_body" class="modal-body"></div>
<input type="button" id="update-details-btn" name="button" value="button">
</body>
</html>
php code not chnage
var data = $.parseJSON(data);
Add this in success funtion. Hope it help!
From your example I tink you dont need to parse data into json. simply echo $results and bind in ajax success
$("#update-details-btn").on('click', function() {
$.ajax({
type: 'post',
data: "confirmation="+get_data,
url: '../for_update_details',
success: function(data)
{
console.log(data);
$('div#update_details_body').html(data);
PHP:
$data['results'] = NULL;
$results = "<div class='form-group'>";
$results .= "<label for='document-type' class='col-sm-4 control-label'>Category</label>";
$results .= "</div>";
echo $results;
Add the following line before the echo json_encode:
header('Content-Type: application/json');
echo json_encode($data);