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.

On your browser have you seen what happen to data on success ajax call? Is it populated? — Goikiu
– Goikiu, Commented Jan 7, 2014 at 10:43
console.log() doesn't show anything on your screen. Append() or html() the data into a div. — CaptainCarl
– CaptainCarl, Commented Jan 7, 2014 at 10:44
dataString = 'ticket_nbr='+ ticket_nbr ... what does var_dump($_POST) show? — Popnoodles
– Popnoodles, Commented Jan 7, 2014 at 10:44
The solution was thanks to CaptainCarl : I added an $('body').append(data); and then it worked. Thanks. — Anthony
– Anthony, Commented Jan 7, 2014 at 13:16

Popnoodles · Accepted Answer · 2014-01-07 15:37:01Z

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}

edited Jan 7, 2014 at 15:37

answered Jan 7, 2014 at 10:45

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

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

Comments

Alok Nath · Accepted Answer · 2014-01-07 10:56:19Z

0

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');

answered Jan 7, 2014 at 10:56

Alok Nath

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX response not displaying PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related