CODEWITHSUNDEEP
phparraysajax
CodeX
CodeX

Reputation: 313

AJAX success data not showing correctly

For some reason the following ajax success function is not working

What am I trying to do?

The AJAX call:

$('#datatable').on( 'click', '.recipeFlavours', function (e) {
    var token = '<?php echo json_encode($token); ?>';
    var flavourList = true;
    var table = $('#datatable').DataTable();
    var rowSelector;
    var li = $(this).closest('li');

    if ( li.length ) {
     rowSelector = table.cell( li ).index().row;
    }
    else {
      rowSelector =  $(this).closest('tr');
    }

    var recipeID = table.row(rowSelector).data().recipe_id; 


    $.ajax({
        type: "POST",
        url: "controllers/recipeControl.php",
        data: { token: token, recipeID: recipeID, flavourList: flavourList },
        success: function(data){

            $(".success_container").html(data);
            console.log(data);

            var popup = '<div class="modal fade" id="notes-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"><div class="modal-dialog"><div class="notes-modal-container"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h1></h1><h3>Recipe Flavours</h3><br>' + data + '</div></div></div>';




    $(popup).modal('toggle');

        },
    });
    return false;
});

The Controller: Works fine as PHP without the json_encode()

/**
    GET RECIPE FLAVOURS FOR POPUP
*/

if(isset($_POST['flavourList'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) && json_decode($_POST['token']) === $_SESSION['token']){

        //echo json_encode($Recipes->getRecipeFlavours($recipeid));
            $html = "<div>";
            $content = $Recipes->getRecipeFlavours($_POST['recipeID']);
            foreach($content as $value) {
                $html .= $value['recipe_flavour_name'].$value['recipe_flavour_percent'];
            }
            $html .= "</div>";
            echo json_encode($html);

    }
}

The function to get the flavours and percents:

/**
    GET RECIPE FLAVOUR LIST
*/

public function getRecipeFlavours($recipeid) {
    $query = 'SELECT recipe_flavour_name, recipe_flavour_percent FROM recipe_flavours WHERE recipe_flavour_recipe_id = :recipeid';
    $stmt = $this->queryIt($query);
    $stmt = $this->bind(':recipeid',$recipeid);
    if($this->execute()) {
        return $this->resultset();
    }
}

As PHP this is the output:

[img]

As the success data in AJAX:

[img]

Upvotes: 1

Views: 976

Answers (3)

Bhumi Shah
Bhumi Shah

Reputation: 9476

try this code:

var obj = jQuery.parseJSON(data);
            $(".success_container").html(obj);
            console.log(obj);

            var popup = '<div class="modal fade" id="notes-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;"><div class="modal-dialog"><div class="notes-modal-container"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h1></h1><h3>Recipe Flavours</h3><br>' + obj + '</div></div></div>';
$('#test1').html(popup);

alert(popup)

Upvotes: 0

Jignesh Patel
Jignesh Patel

Reputation: 1022

You are using json_encode while returning the response in controller, but not decoding while process the response in javascript.

So please remove json_encode and try. It will work.

Upvotes: 1

user6299088
user6299088

Reputation:

Remove json_encode() because you are using HTML as Datatype for ajax

 if(isset($_POST['flavourList'])) {
    if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' && isset($_POST['token']) && json_decode($_POST['token']) === $_SESSION['token']){

        //echo json_encode($Recipes->getRecipeFlavours($recipeid));
            $html = "<div>";
            $content = $Recipes->getRecipeFlavours($_POST['recipeID']);
            foreach($content as $value) {
                $html .= $value['recipe_flavour_name'].$value['recipe_flavour_percent'];
            }
            $html .= "</div>";
            echo $html;

    }
}

Upvotes: 1

Related Questions