web-maker web-maker - 6 months ago 12
PHP Question

Why is my php variable made with ajax keeping empty?

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

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