post parameter not being passed zend framework 2

Question

I've run into a bit of a problem with passing post parameters to a controller action via a ajax call. I'm not sure why it is doing it, because the other ajax calls perform as intended. The response I'm getting is as follows:

Notice: Undefined index: user_bio in C:\xampp\htdocs\module\Members\src\Members\Controller\ProfileController.php on line 149

The controller code is:

public function changebioAction()
{
    $layout = $this->layout();
    $layout->setTerminal(true);

    $view_model = new ViewModel();
    $view_model->setTerminal(true);

    if ($this->request->isPost()) {
        try {
            $params = $this->params()->fromPost();

            $this->getProfileService()->editProfile(array('bio' => ltrim($params['user_bio'])));
        } catch (ProfileException $e) {
            $this->flashMessenger()->addErrorMessage($e->getMessage());

            return $this->redirect()->toRoute('members/profile', array('action' => 'change-failure'));
        }
    }

    return $view_model;
}

The javascript and html:

// handle quick edit of bio
function quickEditBio(element, button) {
    var edited_data = $(element).html();

    var data = $(element).blur(function() {
        edited_data = $(element).map(function() {
            return this.innnerHTML;
        }).get();
    });

    $(button).on('click', function() {
        $.ajax({
            method : "POST",
            url : "/members/profile/change-bio",
            data : {
                user_bio : edited_data[0]
            }
        }).done(function(msg) {
            // bio saved
            // go back to profile page
            //location.href = '/members/profile';
            alert(msg);
        }).fail(function() {
            alert("Error changing bio, please try again.");
        });
    });
}

<button onclick="expand('bio')" class="w3-btn-block w3-theme-d2 w3-left-align">
                <i class="fa fa-book fa-fw w3-margin-right"></i> Bio
            </button>

            <div id="bio" class="w3-accordion-content w3-container">
                <div class="w3-display-container">
                    <p id="bio-user" contenteditable="true">
                        <?php echo $this->layout()->bio; ?>
                    </p>

                    <div class="w3-display-right">
                        <button class="w3-btn-block w3-theme-d2" id="save-bio">Save</button>
                    </div>

                    <script type="text/javascript">
                        quickEditBio('#bio-user[contenteditable=true]', $('#save-bio'));
                    </script>
                </div>
            </div>

As stated before, the error I'm getting is that the index user_bio is undefined :

Notice: Undefined index: user_bio in C:\xampp\htdocs\module\Members\src\Members\Controller\ProfileController.php on line 149

The part that is really confusing is that other parts use this same code and work just fine.

Any help would be appreciated.

Thanks!

Answer 1

The issue lies in your JavaScript.

Every time you "blur" on your element, it sets your edited_data variable to an empty array.

edited_data[0] then becomes undefined and will note be posted to your php.

This means that $params['user_bio'] will be an undefined index as user_bio is not being received as a parameter.

To fix this:
Remove $(element).map and replace it with $(element).html();
Also change edited_data[0] to be edited_data as this will not be an array anymore.