json ajax not working with no errors

Question

im trying to use json to retrieve some info from a php file but its not working, i dont know why and its not showing any errors. Im not getting any errors when running this, but i cant figure out what is causing this to not work. Plus nothing is showing in the console log

here is my js

$(document).on('change', 'input[name="design"]', function(){
        var val = $(this).val();

        $.ajax({
            type: 'POST',
            url: 'ajax/getdesign.php',
            data: {val:val},
            dataType: 'json',
            success: function(result){
                console.log(result.design);
                console.log(result.option);
                $('.pagepreview').html(result.design);
                $('.design-options').html(result.option);
            }
        });
    });

And here is the php

<?php

if(isset($_REQUEST)){
    $design = $_REQUEST['val'];

    if($design == '1'){

        $thedesign = '
            <div class="d1-header"></div>
            <div class="d1-sidebar"></div>
            <div class="d1-content"></div>';

        $theoptions = '
            <label>Header Color</label> <input type="color" id="header-color" />
            <label>Header Image</label> <input type="file" id="header-image" />';

    } else if($design == '2'){
        $thedesign = '
            design 2';

        $theoptions = '
            options 2';

    } else if($design == '3'){
        $thedesign = '
            design 3';

        $theoptions = '
            options 3';
    } else {
        echo "failed";
    }

    echo json_encode(array('design'=> $thedesign));
    echo json_encode(array('option'=> $theoptions));

}

header('Content-Type: application/json');
?>

Answer 1

The issue is likely due to the fact you are trying two json_encode()'s in a single output:

Try merging the arrays into one output like this:

echo json_encode(array('design'=> $thedesign , 'option'=> $theoptions));

Answer 2

try adding a error function in your ajax call, just after your success function

 error: function (msg) {
 alert(msg.responsetext);
  };

and use fiddler to capture a trace

Answer 3

Solved this, the first thing I was missing '' on the data variable, plus I was doing the JSON wrong, but I this works now. Is there a better way for doing this?

here is the js

 $(document).on('change', 'input[name="design"]', function(){

    var val = $(this).val();

    $.ajax({
        type: 'POST',
        url: 'ajax/getdesign.php',
        data: {'val':val},
        dataType: 'json',
        success: function(result){
            $('.pagepreview').html(result['thedesign']);
            $('.design-options').html(result['theoptions']);
        }
    });
});

here is the php

<?php
header('Content-Type: application/json');

if($_REQUEST){
    $design = $_REQUEST['val'];

    if($design == '1'){

        $response['thedesign'] = '
            <div class="d1-header"></div>
            <div class="d1-sidebar"></div>
            <div class="d1-content"></div>';

        $response['theoptions'] = '
            <label>Header Color</label> <input type="color" id="header-color" />
            <label>Header Image</label> <input type="file" id="header-image" />';

    } else if($design == '2'){
        $response['thedesign'] = '
            design 2';

        $response['theoptions'] = '
            options 2';

    } else if($design == '3'){
        $response['thedesign'] = '
            design 3';

        $response['theoptions'] = '
            options 3';
    } else {
        echo "failed";
    }

    echo json_encode($response);

}
?>