JSON data not displaying using .html()

Question

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

are you sure data is not binding to your div, i think the issue is of class="modal-body" its hidden somewhere — Rahul
– Rahul, Commented Jun 23, 2017 at 6:45
Hi @Rahul, the div is the modal body and this whole modal appears when the button is clicked — RJB
– RJB, Commented Jun 23, 2017 at 6:48
have you tried logging data.results instead of just data? is there any error? — treecon
– treecon, Commented Jun 23, 2017 at 6:52

Ashu · Accepted Answer · 2017-06-23 09:31:00Z

1

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

answered Jun 23, 2017 at 9:31

Ashu

1,3102 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Trần Hà Nguyễn · Accepted Answer · 2017-06-23 06:43:24Z

0

var data = $.parseJSON(data);

Add this in success funtion. Hope it help!

answered Jun 23, 2017 at 6:43

Trần Hà Nguyễn

5910 bronze badges

Comments

B. Desai · Accepted Answer · 2017-06-23 06:44:34Z

0

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;

answered Jun 23, 2017 at 6:44

B. Desai

16.4k5 gold badges28 silver badges48 bronze badges

1 Comment

RJB Over a year ago

Hi, I will try this

konohanaruto · Accepted Answer · 2017-06-23 08:25:43Z

0

Add the following line before the echo json_encode:

header('Content-Type: application/json');
echo json_encode($data);

answered Jun 23, 2017 at 8:25

konohanaruto

631 silver badge5 bronze badges

Collectives™ on Stack Overflow

JSON data not displaying using .html()

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related