[FIXED] CakePHP 3.8 Change Form Data based on User Selection

Issue

I am in CakePHP 3 environment in which I am on an Edit Action in the Articles Controller.

First Function on the controller is a standard edit function.. This loads existing data for the Article in a form so you can easily edit them.

public function edit($id){

    $article_categories = $this->Articles->Articlecats->find('list');
    $this->set('article_categories', $article_categories);

    $article = $this->Articles->get($id);

    // if you are not just landing on page but making the save 
    if ($this->request->is(['post', 'put'])) {

        // disable entity creation, not entirely sure what this does.. 
        $this->Articles->patchEntity($article, $this->request->getData());

        // Set the user_id from the session.
        $article->user_id = $this->Auth->user('id');

        if ($this->Articles->save($article)) {

            $this->Flash->success(__('Your article has been updated.'));
            return $this->redirect(['action' => 'index']);

        }

        // check if there are errors in editing and print them
        if ($article->getErrors()){

            // Entity failed validation 
            // print_r($article->getErrors());
            $this->Flash->error(__('Please correct values and try again.'));                

        }

    $this->Flash->error(__('Unable to update your article.'));

    }

    $this->set('article_pass', $article);    

}

The view in the edit method of the ArticlesController shows input fields in which you can edit Article information and then Save them to the underlying database. On the bottom of the View there is a button "button to check Functionality", which accesses a method on the ArticlesController through Ajax call. The function editcategory() on the ArticlesController retrieves information about the selected category and then returns a rendered view based on this information back.

On clicking this button I load the category and category information into a new form on screen.

<?php echo $this->Html->script('http://code.jquery.com/jquery.min.js'); ?> 

<!-- File: templates/Articles/edit.php -->

<h1>Edit Article</h1>
<?php
    echo $this->Form->create($article_pass);
    echo $this->Form->control('user_id', ['type' => 'hidden']);
    echo $this->Form->control('title');
    echo $this->Form->control('body', ['rows' => '3']);
    echo $this->Form->select('articlecat_id', $article_categories, ['id' => 'article_cat']);     
    echo $this->Form->button(__('Save Article'));
    echo $this->Form->end();

    $csrfToken = $this->request->getParam('_csrfToken');

    // self written element in View 
    // echo $this->articlecatCreate->create();

?>

<button id="edit_category">Button to check functionality</button>

<div id="ajax_data"></div>


<script>

    var csrf_token = <?php echo json_encode($csrfToken) ?>;  

    $(window).load(function() {   

        // get article category data from controller method through ajax call 
        // populate the form with them      
        $('#edit_category').click(function(){

            var targeturl = "http://wampprojects/composer_cakephptut/articles/editcategory"; 

            var category_selected = $('#article_cat').children("option:selected").val();
            console.log(category_selected);

            // need to check if this statement works?? 
            if ($('#article_cat').children("option:selected").val()){

                $.ajax({
                    type: 'post',
                    url: targeturl,
                    headers: {'X-CSRF-Token': csrf_token},
                    data: {category: category_selected},
                    success: function(result){

                        console.log(result);

                        // create a form with a POST action that links to database 
                        $('#ajax_data').html(result);


                    }
                });

            }else{

                console.log("no cat selected");

            }
        });
    });
</script>

The "editcategory()" method in the Articles Controller.

public function editcategory(){

    $this->loadModel('Articlecats');    

    $category_id = $this->request->getData('category'); 
    $articlecat_data = $this->Articlecats->get($category_id);
    $this->set('articlecat_pass', $articlecat_data);

    debug($articlecat_data);

    $this->render('element/articlecatcreate', 'ajax'); 

}

In the editCategory() method of the ArticlesController I retrieve information on the selected category. I then render a helper view called "articlecatcreate" that relies on the data I retrieved.

<h1>Edit ArticleCategory</h1>
<div>
    <?php echo $articlecat_pass['id'] ?>
    <?php echo $articlecat_pass['title'] ?>    

    <?php
    // you miss a primary key, it does try to save to the right table 
    echo $this->Form->create($articlecat_pass);
    echo $this->Form->control('user_id', ['type' => 'hidden']);
    echo $this->Form->control('title');
    echo $this->Form->button(__('Save Article'));
    echo $this->Form->end();

    ?>

</div>

It correctly loads the Article Category data in the new part of the view that is added to the existing view through the method "$('#ajax_data').html(result);" in the ajax success function.

On saving the category I am trying to edit, I get the following error.. ERROR : "Record not found in table "articlecats" with primary key [NULL]"

So my newly created form that is added to the view tries to save on the correct table and model, but does not somehow load the key in the create method of the form..

How can I proceed?

SOLUTION FOUND

I found the solution in setting the controller and action in the form->create method $options parameters.

So the code for the element you render needs to be:

<h1>Edit ArticleCategory</h1>

<div>

    <?php

    // you miss a primary key, it does try to save to the right table 
    echo $this->Form->create($articlecat_pass, ['url' => ['controller' => 'Articlecats', 'action' => 'edit']]);
    echo $this->Form->control('user_id', ['type' => 'hidden']);
    echo $this->Form->control('title');
    echo $this->Form->button(__('Save Article'));
    echo $this->Form->end();

    ?>

</div>

Solution

You can actually create new widgits—or any new DOM nodes—using javascript. Consider this jQuery snippet for a random project I have laying around:

$(this).replaceWith(
    '<a class="remove" id="' + $(this).attr('id') 
        + '" href="' + webroot + 'shop/remove/' + $(this).attr('id') 
        + '" title="Remove item">' 
        + '<img src="' + webroot + 'img/icon-remove.gif" alt="Remove" />' +
    '</a>'
);

You can easily get a reference to your second form:

$('form#id_of_form')

But still, I find all this fussing around in jQuery and javascript a bit tedious for building a populated form when Cake is just an ajax call away.

So your success function can be something like

$('form#id_of_form').replaceWith(new_form_from_ajax_call);

Answered By - Don Drake