Cannot retrieve data from PHP array, which is returned by a function() that uses JQuery Ajax

Question

I have this "click Listener" that calls and sends a userId parameter to the function-"getModalData" which then returns an array value to the variable-"arrayedUserData".

$('body').on('click', '.openModal', function () {
        var userId = $(this).val(),
            btnText = $(this).text(),
            btnClass = '',
            colorCode = '',
            arrayedUserData = getModalData(userId);

        if (btnText === "Delete") {
            btnClass = 'danger';
            colorCode = '#d9534f';
        } else {
            btnClass = 'warning';
            colorCode = '#f0ad4e';
        }

        $('#actionBtn').removeClass().addClass('btn btn-' + btnClass).text(btnText);
        $('#modalTitle').text('Confirm ' + btnText);
        $('#S-modalbody p').text('Are you sure you want to ' + btnText + ' user: ');
        $('#S-modalbody h4').css('color', colorCode).text(userId + " - " + arrayedUserData.LastName + ", " + arrayedUserData.FirstName);

    });

This is the function-"getModalData". The returned php array from the Ajax's "success" will then be passed to the variable-"UserData" that is then returned by the function.

function getModalData(passedUserId) {
        var UserData;
        $.ajax(
            {
                type: "POST",
                url: "get/get_modal_data.php",
                data: { passedUserId: passedUserId },
                dataType: "json",
                success: function (data) {
                   UserData = data;
                }
            }
        );
        return UserData;
    }

this is the "get_modal_data.php".

<?php
    include "../includes/connect.php";

    if (isset($_POST['passedUserId'])) {
        $UserId = mysqli_real_escape_string($con, $_POST['passedUserId']);

        $getUserData = mysqli_query($con, "SELECT * FROM tblUserAccounts WHERE uaUserId = '".$UserId."'");
        $uaRow = mysqli_fetch_assoc($getUserData);

        $UserDataArr = array("UserId" => $uaRow['uaUserId'],
                     "EmailAddress" => $uaRow['uaEmailAddress'],
                     "FirstName" => $uaRow['uaFirstName'],
                     "LastName" => $uaRow['uaLastName'],
                     "BirthDate" => $uaRow['uaBirthDate'],
                     "Address" => $uaRow['uaAddress'],
                     "Gender" => $uaRow['uaGender'],
                     "ContactNumber" => $uaRow['uaContactNumber'],
                     "BloodTypeId" => $uaRow['uaBloodTypeId'],
                     "AccountStatus" => $uaRow['uaAccountStatus'],
                    );


        echo json_encode($UserDataArr);
        exit();
    }
?>

this error appears on the console:

Uncaught TypeError: Cannot read property 'LastName' of undefined get_user_accounts.js:66

this is the line 66 of get_user_accounts.js, which is present on the "click listener".

$('#S-modalbody h4').css('color', colorCode).text(userId + " - " + arrayedUserData.LastName + ", " + arrayedUserData.FirstName);

but, I am confused because the php array appears on the browser's Network Response:

Successful Connection{"UserId":"1","EmailAddress":"[email protected]","FirstName":"Paul Ansel","LastName":"Mendoza","BirthDate":"1998-12-17","Address":"Phase 1B Block 8 Lot 20 Olivarez Homes South, Sto. Tomas, Binan City, Laguna","Gender":"Male","ContactNumber":"2147483647","BloodTypeId":"0","AccountStatus":"ACTIVE"}

Possible duplicate of How do I return the response from an asynchronous call? — 31piy
– 31piy, Commented Jun 18, 2018 at 8:34
Possible duplicate of Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — Sebastian Simon
– Sebastian Simon, Commented Jun 18, 2018 at 8:35
You’re returning data from an async function so indefined gets returned. Read stackoverflow.com/questions/14220321/… — user3210641
– user3210641, Commented Jun 18, 2018 at 8:37
Please get the source of include "../includes/connect.php"; — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jun 18, 2018 at 8:41
You are getting your response as a string. Are you calling JSON.parse(arrayedUserData) somewhere and did not post it? — Mr Glass
– Mr Glass, Commented Jun 18, 2018 at 8:49

Praveen Kumar Purushothaman · Accepted Answer · 2018-06-18 08:40:23Z

1

Did you see that you get: Successful Connection before the JSON data? You have to remove that, if not it will be an invalid JSON response. The code you have shared doesn't have the particular stuff.

I believe you have to check your database connection, where on successful connection, it is set to output Successful Connection, which breaks your response. Please remove that bit of code.

include "../includes/connect.php";

It can be something like:

$conn = mysqli_connect() or die("Error");
echo "Successful Connection";

answered Jun 18, 2018 at 8:40

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

4 Comments

Paul Ansel Mendoza Over a year ago

Thank You for noticing that Mr. Praveen, all this time I thought that was displayed by the browser for the successful Ajax connection.

Praveen Kumar Purushothaman Over a year ago

@PaulAnselMendoza So isn't this was the issue? Was the issue somewhere else?

Paul Ansel Mendoza Over a year ago

Your were also correct Mr. Praveen, the echoed "Successful Connection" makes the JSON response invalid and at the same time I was not using the callback method for my function that causes it to return the value before it was assigned by AJAX.

Praveen Kumar Purushothaman Over a year ago

@PaulAnselMendoza Thanks! :)

Paul Ansel Mendoza · Accepted Answer · 2018-06-18 13:02:43Z

0

Because getModalData fucntion return the UserData before it asign by ajax(UserData = data;). use a callback function:

using callbacks

function getModalData(passedUserId,callback) {
        $.ajax(
            {
                type: "POST",
                url: "get/get_modal_data.php",
                data: { passedUserId: passedUserId },
                dataType: "json",
                success: function (data) {
                   callback(data);
                }
            }
        );
    }


$('body').on('click', '.openModal', function () {
    var userId = $(this).val(),
        btnText = $(this).text(),
        btnClass = '',
        colorCode = '';

    getModalData(userId, function (arrayedUserData) {

        if (btnText === "Delete") {
            btnClass = 'danger';
            colorCode = '#d9534f';
        } else {
            btnClass = 'warning';
            colorCode = '#f0ad4e';
        }

        $('#actionBtn').removeClass().addClass('btn btn-' + btnClass).text(btnText);
        $('#modalTitle').text('Confirm ' + btnText);
        $('#S-modalbody p').text('Are you sure you want to ' + btnText + ' user: ');
        $('#S-modalbody h4').css('color', colorCode).text(userId + " - " + arrayedUserData.LastName + ", " + arrayedUserData.FirstName);
    });
});

edited Jun 18, 2018 at 13:02

Paul Ansel Mendoza

474 bronze badges

answered Jun 18, 2018 at 8:46

Supun Praneeth

3,1802 gold badges33 silver badges36 bronze badges

1 Comment

Supun Praneeth Over a year ago

@PaulAnselMendoza your welcome, and check out Promise, it's the new way to do this

Collectives™ on Stack Overflow

Cannot retrieve data from PHP array, which is returned by a function() that uses JQuery Ajax

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related