jQuery AJAX response not displaying PHP

Question

I don't know what I am doing wrong, but the PHP does run (I can notice it with the POST data on Firebug), but isn't echoed.

Here's my JS file :

$('.table_item').click(function()  {

    var ticket_nbr = $(this).children('td').attr("class");
    var dataString = 'ticket_nbr='+ ticket_nbr;

    $.ajax({
            url: 'display.php',
            type: 'POST',
            data: dataString,
            success: function(data) {
                console.log(data);

                $("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
            },
            error: function(e) {
                console.log(e)
            }
    });
});

and the called PHP file :

if($_POST)
{

    $ticket_nbr=$_POST['ticket_nbr'];

    ?>

    <div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
        <i class="close icon"></i>
        <div class="header">
            <?php echo $ticket_nbr; ?>
        </div>
    </div>

    <?php

}

And here's the output I get on Firebug :

<div id="DisplayTicket" class="ui large modal transition hidden" style="margin-top: -110px;">
    <i class="close icon"></i>
    <div class="header">
        ticket_3  // The post data sent
    </div>
    <div class="content">
        <p>Merci, <span class="test_display"></span>.
    </div>
</div>

Any help or hint would be great !

Thanks.

Answer 1

You're returning HTML but never adding it to body

success: function(data) {
            console.log(data);
            $(data).appendTo('body'); // <----------------------
            $("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},

Also, ideally dataString = 'ticket_nbr='+ ticket_nbr should be dataString = {'ticket_nbr': ticket_nbr}

Answer 2

You have to show/append the below div in the body or div.

<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
        <i class="close icon"></i>
        <div class="header">
            <?php echo $ticket_nbr; ?>
        </div>
    </div>

then use the below code on success.

$('#DisplayTicket').addClass('active');
$('#DisplayTicket').css('visibility','visible');