Modal okno s bootstrap + předání proměnné

kralik

Ahoj lidi,
trochu jsem se pral s implementací modalního okna pro editaci. Postupně jsem dohledával info tady na fóru až jsem dospěl k úspěšnému výsledku.
Dávám sem plně funkční řešení.
Věřím, že toto pomůže hlavně začátečníkům.

@layout.latte

<?php
<head>
...
<script src="{$basePath}/js/bootstrap.js"></script>
...
</head>

<body>
...
       {snippet modal}
            {if $presenter->isAjax()}
                {ifset #modal}

                    <div class="modal fade modal-ajax">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    {block modalHeader}
                                        <h3 class="modal-title">
                                            {block|striptags}{include #modalTitle}{/block}
                                        </h3>
                                    {/block}
                                </div>
                                <div class="modal-body">
                                    {include #modal}
                                </div>
                                {ifset #modalFooter}
                                    <div class="modal-footer">
                                        {include #modalFooter}
                                    </div>
                                {/ifset}
                            </div>
                        </div>
                    </div>
                {/ifset}
            {/if}
        {/snippet}

        <script>
            $(function () {
                $.nette.init();
            });
        </script>
</body>
?>

nette.ajax.js
přidat níže uvedené

<?php
$.nette.ext("modals", {
        success: function(payload) {
            if (payload.redirect) {
                $(".modal-ajax").modal("hide");
            } else if(payload.isModal) {
                $('.modal-ajax').modal('show');
            }
        }
    });

$.nette.ext("ajaxRedirect", {
    success: function (payload) {
        if (payload.redirect) {
            $.nette.ajax(payload.redirect);
        }
    }
});
?>

presenter

<?php
protected function createComponentFormEdit($name) {

        $form = new UI\Form($this, $name);

        $form->addText('id','Id');
        $form->addText('text','Text');

        $form->addSubmit('ok', 'Odeslat')
                    ->setAttribute('class', 'btn btn-primary');
        $form->onSuccess[] = array($this, 'formSubmitted');

        return $form;
    }


    public function formSubmitted($dat) {

            $val = $dat->getForm()->getValues();


            $this->flashMessage('Předán text: '.$val['text'].' z formu');




    }

	public function handleEditovat($id){

        $dat['id'] = $id;
        $dat['text'] = 'předávání';
        $this["formEdit"]->setDefaults($dat);

        if ($this->isAjax()) {
            $this->payload->isModal = TRUE;
            $this->redrawControl("modal");

        }
    }

?>

modal2.latte
tam kde chci vyvolat modal okno

<?php
...
	<a n:href="editovat!,$id" class="ajax" title="editovat"><i class="fa fa-balance-scale fa-lg"></i></a>


{define modalTitle}Editovat položku{/define}

{define modal}
    {control formEdit}
{/define}
?>

Ať se dílo daří.

Kcko

kralik napsal(a):