Refresh just one dropdown value instead of the whole page CakePHP

Question

I'm using CakePHP 2.x. I would like to have the dropdown in my page refresh with the new value after the modal dialog from jquery ui got closed (after submit), not the whole page refresh. How can I achieve that?

on my ArticlesController.php

public function admin_add() {
    //setting active link
    $this->set('active', 'new_article');

    if ($this->request->is('post')) {
        $this->request->data['Article']['posted'] = date('Y-m-d H:i:s');

        $this->Article->create();

        if ($this->Article->save($this->request->data)) {
            $this->Session->setFlash(__('The article has been saved'));
            $this->redirect(array('action' => 'index'));
        } else {
            $this->Session->setFlash(__('The article could not be saved. Please, try again.'));
        }
    }

    $categories = $this->Article->Category->find('list');
    $this->set(compact('categories')); 
}

and on my view page (admin_add.php)

<div>
<?php echo $this->Form->create('Article');?>
    <?php
        echo $this->Form->input('title');
        echo $this->Form->input('author');

            //THIS IS THE DROPDOWN PART
            echo $this->Form->input('category_id');

            //THIS IS THE PART FOR CALLING THE MODAL DIALOG TO ADD A NEW CATEGORY
            echo '<div class="addNewCategory">';
            echo 'add';
            echo '</div>';               
    ?>
<?php echo $this->Form->end(__('Submit'));?>
</div>

<!-- Modal Dialog for Adding New Category (THIS IS HIDDEN UNTIL GET CALLED AS MODAL DIALOG)-->
<div class="dialog-form" title='Create new Category'>
    <?php echo $this->Form->create('Category');?>
        <?php
            echo $this->Form->input('name');
        ?>
    <?php echo $this->Form->end(__('Submit'));?>
</div>

<script type="text/javascript">   
        $('.dialog-form').dialog({
           autoOpen: false,
           title: 'New Category',
           modal: true,
           height: 300,
           width: 350,
           close: function() {
           }
        });

        $('.addNewCategory').click(function() {
            $('.dialog-form').dialog('open');
        });


    $('.dialog-form .submit').click(function(e) {
        var value = document.getElementById('CategoryName').value;
        var data = {'data[Category][name]':value};
        e.preventDefault();
        $.ajax({
            type:"POST",
            url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
            data: data,
            success: function() {
                $('.dialog-form').dialog('close');

                //WHAT SHOULD I DO IN HERE AFTER THE DIALOG CLOSED TO UPDATE THE DROPDOWN OR IF ITS NOT IN HERE PLEASE LET ME KNOW THE SOLUTION      
            }
        })
    });
</script>

above is some of the code for controller and view and the script. The comment with UPPER CASE is my explanation. Thank you

Answer 1

You're on the right track. All you need is for your success callback to replace the select.

The way I tend to do this is to pass the data to my background script (as you are doing), and have that script print out the select and options I need to replace the original select.

<?php
    // background script

    // some processing...

?>

<select name="originalSelectName" id="originalSelectId">
    <option value="0">Select an Option</option>
    <?php foreach ($options as $option): ?>

    <option value="<?= $option['val'] ?>"><?= $option['label'] ?></option>
    <?php endforeach; ?>
</select>

Once this prints out, your success callback will be triggered and you just replace the select.

$('.dialog-form .submit').click(function(e) {
    var value = document.getElementById('CategoryName').value;
    var data = {'data[Category][name]':value};
    e.preventDefault();
    $.ajax({
        type:"POST",
        url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
        data: data,
        success: function(html) {
            $('.dialog-form').dialog('close');

            // replace the drop-down
            $("#originalSelectId").replaceWith(html);
        }
    })
});

Notice how I added the html parameter to your callback? That's where the returned HTML will go on its own.

Hope this helps!

Answer 2

add some classes / an id to each of those select options so that way you can identify the individual in question.

then, get the data you need, select that element, then replace its html value.

Also note that this would be a good time to use ajax. -- i agree with Samuel.

<script type="text/javascript">
$(document).ready( function() {
        $('.dialog-form').dialog({
           autoOpen: false,
           title: 'New Category',
           modal: true,
           height: 300,
           width: 350,
           close: function() {
           }
        });

        $('.addNewCategory').click(function() {
            $('.dialog-form').dialog('open');
        });


    $('.dialog-form .submit').click(function(e) {
        var value = document.getElementById('CategoryName').value;
        var data = {'data[Category][name]':value};
        e.preventDefault();
        $.ajax({
            type:"POST",
            url: "<?php echo $this->Html->url(array('controller' => 'categories', 'action' => 'addmodal', 'admin' => TRUE)); ?>",
            data: data,
            success: function( echoedResponseFromPHPController ) {
                $('.dialog-form').dialog('close');
                $('#dropdown_92').html( echoedResponseFromPHPController );  
            }
        })
    });
}
</script>

figure out what that controller you're using as the ajax endpoint/url echos / prints what you need. if you need more than just one value, put it in a php array, and print json_encode( $yourDataArray ); and in js you'd just be using echoedResponseFromPHPController

then, in your ajax success callback, you would refer to the data as echoedResponseFromPHPController.options[2] or something. it is json, so as long as you understand json, you can figure out how to refer to the data.

please note that you can call echoedResponseFromPHPController whatever you want. i just wrote the long name for clarity's sake.