CODEWITHSUNDEEP
jquerycakephptwitter-bootstrap
Zoran Kalinić
Zoran Kalinić

Reputation: 317

Cakephp form in Twitter Bootstrap modal

I need help in using Twitter Bootstrap modal with Cakephp 2.4.2 form?

I have tried following in the view:

<div class="modal" id="myModal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="myModalLabel"><?php echo __('Form title'); ?></h3>
            </div>
            <div class="modal-body">
            <?php
                echo $this->Form->create('Person');
                echo $this->Form->input('First name');
                echo $this->Form->input('Last name');
                echo $this->Form->end('Save');
            ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function(){
        $('#myModal').modal('show');
    });
</script>

Form gets displayed automatically on load, and that's fine.

I have problems on closing form/modal. When user click Save, modal stays open, but control is passed to action in PeopleController as required. When user closes modal with Cancel, modal closes, but action from PeopleController hasn't been called at all.

I need control to be passed to PeopleController and modals to be closed.

What would be the best approach?

How to post form data to controller on click of the button in modal-footer?

Upvotes: 1

Views: 4390

Answers (3)

Roberto Herrera
Roberto Herrera

Reputation: 71

I would try:

        <?php
            echo $this->Form->create('Person', array('action' => 'add'));
            echo $this->Form->input('First name');
            echo $this->Form->input('Last name');
            echo $this->Form->button('Save');
            echo $this->Form->end();
        ?>

Otherwise I think your submit may not be rendering correctly

Upvotes: 0

Guillermo Mansilla
Guillermo Mansilla

Reputation: 3889

The reason your modal doesn't close is because you made it static. Change this

<div class="modal" id="myModal" tabindex="-1" role="dialog" data-backdrop="static">

for this

<div class="modal" id="myModal" tabindex="-1" role="dialog">

In other words, data-backdrop="static" makes your modal not to close after form submission. More info here

Upvotes: 1

Asim Muhammad
Asim Muhammad

Reputation: 41

You can use jquery to hide the bootstrap modal.

Example:

$('#myModal').modal('hide');

Upvotes: 0

Related Questions