Why is my php variable made with ajax keeping empty?

Question

First, precisions : I'm using MAMP and Brackets, and Chrome to test.

Here's what I have :

<ul>
    <li class="brick" data-pseudo="one">Some text or elements</li>
    <li class="brick" data-pseudo="two">Some text or elements</li>
    <li class="brick" data-pseudo="three">Some text or elements</li>
</ul>

li.bricks are just rectangle articles "linking" to Work1, Work2 and Work3, and generated by a PHP function from an array. I'm trying to get the "pseudo" data of the clicked .brick to put it in a PHP variable and use it to call another array in another php function, in order to generate the HTML elements of Work1, Work2,... I found I had to use AJAX and managed to get that code :

var pseudo;

function sendPseudo(info){
    $.ajax({
        type: "POST",
        url: "my_php_function_page.php",
        ContentType: 'application/json',
        data: {
            'data_name': info
        },
        success: function (data) { //testing the success
            alert(data);
        },
        error: function (errorThrown) {
            alert('You are wrong !');
        }
    });
}

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

    //some code

    pseudo = $(this).data('pseudo');
    sendPseudo(pseudo); //calling sendPseudo() function
});

And here's my testing PHP function :

function loadWork(){
    $workToLoad = $_POST['data_name'];
    echo '<p>'.$workToLoad.'</p>';
}

... I'm calling in my HTML document :

<section class="site">
    <div class="left">
        <?php loadWork() ?>
    </div>

    <div class="right">
        //some other content
    </div>
</section>

And so I have two problems. Firstly, when a .brick is clicked, the alert pops up but it's empty, absolutely nothing appears in it, but when I console.log the var pseudo, I see "one", "two"... And secondly, the echo in testing PHP function does not generate the paragraph with the pseudo.

Pleeeaaase, help me to find out what I'm doing wrong, it's making me go crazy ! Thank you !

Answer 1

I think there is some confusion in your order. loadWork(), as you say, is part of an html file gets called as soon as the browser reads the html file and it's only called once. If loadWork() hasn't been defined yet (or exists in another file as your AJAX request suggests based on it's call to my_php_function_page.php) then it won't output anything. In other words, loadWork() needs its post data to exist when the browser requests the html.

You can put the php in the same file as the html that is being called on, but it looks like you might be trying to get the results of loadWork() inserted into a div that already exists. Change your ajax function so that if(data!="") changes the inner html of your div to include the data:

function sendPseudo(info){
    $.ajax({
        type: "POST",
        url: "my_php_function_page.php",
        ContentType: 'application/json',
        data: {
            'data_name': info
        },
        success: function (data) { //testing the success
            alert(data);
            $('.left').html(data);
        },
        error: function (errorThrown) {
            alert('You are wrong !');
        }
    });
}

Answer 2

I think you have missed calling your function loadWork() in my_php_function_page.php, this code may be fix your empty alert issue.

var pseudo;

function sendPseudo(info){
    $.ajax({
        type: "POST",
        url: "my_php_function_page.php",
        ContentType: 'application/json',
        data: {
            'data_name': info
        },
        data=data.trim(); // to remove the unwanted space around the string
        success: function (data) { //testing the success
            if(data!="")
            {
              alert(data);
              $(".right").html(data); // This adds your AJAX success data to the class left inside your DIV
            }
           else
           {
           alert("You're wrong !");
           }
        },
    });
}

my_php_function_page.php

function loadWork(){
    $workToLoad = $_POST['data_name'];
    echo '<p>'.$workToLoad.'</p>';
}

loadWork();

Answer 3

I'm not sure why, but sometimes data function is not working, so I always use attr('data-pseudo') in your case.

so it would be like this:

pseudo = $(this).attr('data-pseudo');