$.post not returning data

Question

I'm very new at jquery and I think I don't fully understand what I'm doing yet.

I'm trying to retrieve data from my db without reloading my page by doing so:

$('.add-team-member').click(function(e) {
    e.preventDefault();
    $.post('?c=Data&action=getData&class=TeamMember', function(data) {
        console.log(data);
    })
    .fail(function() {
        console.log('fail');
    });
});

And here is my php file:

class DataController extends Controller{
    public static function getData()
    {
        //retrieve objects from my database and encode them as json string
        var_dump(json_encode($_GET['class']::findAll()));
        return json_encode($_GET['class']::findAll());
    }
}

The console.log(data) gives an empty string and fail function isn't called. I tested my php file separately and it works fine. Any advice for a humble beginner? Thank you!

EDIT: Seeing some of your comments made me think that $.post may not be the proper way to do it. What I'm trying to achieve is to retrieve data from my database without reloading the page. My aim is that clicking on my button would insert a dropdown list containing the names of the team members. And for that I need to get all the objects TeamMembers from my db. Is $.post a good way to achieve this goal?

EDIT 2: OK I got it! I didn't know I actually needed to echo my data to pass them to my JS file. I thought the return statement was doing the job. As I said, I'm quite new at this ^^ Thanks you "Don'tPanic" and "Taplar" for your help! You guys are awesome :-D

Have you looked at it this [link](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Saransh Sharma, Aug 18 '17 at 22:19
So, I guess some other code runs in your PHP file that interprets the `c=Data&action=getData` part of that query string to call `DataController::getData()`? — Don't Panic, Aug 18 '17 at 22:43
@Don'tPanic Yes I created my own router. But this part of the code works fine, I tested it separately. My problem is that I don't know how to pass the data generated by my php file to my js file. — Cellendhyll, Aug 18 '17 at 22:50
$.post should work for this. It's more common to use get for getting things and post for posting things, but it should still work. Like I said, your exact code worked for me (after I mocked up the TeamMember and router.) Here's my version of the working page, for what it's worth: https://pastebin.com/7cSJDCVL — Don't Panic, Aug 18 '17 at 23:01
@Taplar Sorry I'm quite tired. When I go to the url "myProject?c=Data&action=getData&class=TeamMember", I see the var_dump appearing with correct data. But when I click on the button, nothing is happening — Cellendhyll, Aug 18 '17 at 23:02
Your post doesn't have the leading 'myProject' in the url. Is that valid? Going to that url in the browser straight would also be a get request too. Does the router you wrote know that even though if a request comes in as a POST that there may be GET params it needs to pass along? — Taplar, Aug 18 '17 at 23:03
Oh I think I understood... Please tell me if I'm right: I actually need to echo my results to be able to access them? — Cellendhyll, Aug 18 '17 at 23:07
Ok I solved it! Thank you guys! Is there anyway that I can make you earn some reputation points for your help? — Cellendhyll, Aug 18 '17 at 23:14

score 0 · Answer 1 · answered Aug 18 '17 at 23:15

Doing what you want in a simpler way is:

First minimize your code as much as possible. This is done by the below logic.

//This is your HTML

//This is your form, if any.
<input id="value_01" type="text">
<input id="value_02" type="text">

//This is the link to call the JS function.
<a href="javascript:void(0);" class="add-team-member" id="add-team-member" onclick="addMember();">Add Member</a>

//This is the div to display the result. You can use your own.
<div id="fetched_result">

</div>

//This is your JS function to be called on click.
<script type="text/javascript">    
    function addMember() {
        //Fetch the values from your form, if any.
        var value_01 = $('#value_01').val();
        var value_02 = $('#value_02').val();

        $.ajax({
            type: "POST",
            url: "your-php-script.php", // Name of the php files
            data: {value_01 : value_01, value_02 : value_02},

            success: function(html)
            {   
                $("#fetched_result").html(html);
            }
        });
    }

Below is your PHP script.

<?php
    if ($_POST) {
        $value_01 = $_POST['value_01'];
        $value_02 = $_POST['value_02'];

        //Process your Posted values with PHP

        //You need to echo your output. This will be populated in your result div as is.
        $result = "<strong>" . $fetched_value;

        echo $result;
    }
?>

Hope this works.

Thank you, I just solved it! I simply didn't know I had to echo my results xD — Cellendhyll, Aug 18 '17 at 23:20

$.post not returning data

1 Answers1