Zas modal přes bootstrap, prosím o pomoc
- MW
- Člen | 626
Zdravím,
Prosím o radu, kde by mohl byt problém. Snazim se stále rozchodit modal okna. Po konzultaci s DG na posledním skoleni to není problém – trivi, ale ja asi něco stále delam blbe:
Takze presenter:
// formular
public function createComponentEditTest($name) {
$form = new Form($this, $name);
$form->addText('name', 'Jméno:')->setRequired('Zadejte jméno!');
$form->addSubmit('ulozit', "Uložit");
$form->onSuccess[] = array($this, "testSubmit");
}
// handle pro editaci
public function handleEditModal() {
if ($this->getParameter('id')) {
$r = $this->context->testModel->getData()->where('id', $this->getParameter('id'))->fetch();
if (!$r) {
throw new Nette\Application\BadRequestException;
}
$this['editTest']->setDefaults($r);
$this->invalidateControl('editTest');
}
}Odkaz z komponenty gridu:
<a href="{plink editModal! 'id' => $primary}" type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-edit"></span></a>A samotna šablona:
{block content}
<h1>Test</h1><br /><br />
{snippet grid}
{control test}
{/snippet}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Záznam</h4>
</div>
<div class="modal-body">
{snippet editTest}
{control editTest}
{/snippet}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{/block}a výsledek je zde .
Je to jakoby escapovane.. Rozhodi se to…
Nastane to presne v pomente naplneni formulare.
Diky za radu
Editoval MW (13. 3. 2015 20:30)
- MW
- Člen | 626
Jedine co vidim je toto
v ladence.
Duvod tam ale nevyctu.. něco se tam popere, ale co? …
Tam jak zacina zvyraznena syntaxe, asi v pulce, je práve obsah toho modalu…
Editoval MW (15. 3. 2015 19:14)
- TOMeek
- Člen | 64
Tak toto jsem řešil dlouho než se mi podařilo napsat něco s čím jsem
spokojen.
Šel jsem cestou vytvoření si vlastní komponenty, kdy
do BasePresenter.php přidám
/** @var Dialog */
public function dialog()
{
return $this->getComponent( "dialog" );
}
/**
* @param $name
* @return Dialog
*/
public function createComponentDialog($name)
{
return new Dialog( $this, $name );
}V @layout.latte mám
{control dialog}Pak v presenteru nebo komponentě, kde potřebuju zavolat modální okno, tak volám
public function handleModalniOkno($page_id) {
$data = $this->pages->findPrimary( $page_id )->fetch();
$dialog = $this->dialog(); // nebo $this->presenter->dialog();
$dialog->setTitle("Modalni okno");
$dialog->setIcon( "fa fa-..." );
$dialog->setData( $this->getComponent( "form" ) );
$dialog->openDialog();
$this["form"]->setDefaults($data->toArray());
}
public function createComponentForm($name)
{
$form = new Form();
...
return $form;
}V souboru dialog.php pak mám funkce, které nastaví titulek, data apod. a pak funkce render(), kde mám
public function render() {
$this->template->setFile( __DIR__ . '/@dialog.latte' );
$this->template->title = $this->getTitle();
$this->template->subTitle = $this->getSubTitle();
$this->template->icon = $this->getIcon();
$this->template->data = $this->getData();
$this->template->componentName = $this->getName();
$this->template->render();
}funkce OpenDialog() mi pak volá jen $this->redrawControl();, aby se okno
otevíralo ajaxově.
V @dialog.latte samotná definice modálního okna, které je obalené do
snippetu a dole mám js
<script>
$(function () {
$("#modalDialog-{!$componentName}").modal('show');
});
</script>V té šabloně je toho víc, kdy jsem dlouho řešil formuláře, aby se mi buttony přidávaly do patičky okna i když použiji defaultní vykreslení formuláře apod. Snad jsem tě alespoň trochu navedl.
- Matey
- Člen | 142
@TOMeek prosím ťa ako riešiš následné volanie .modal(‚hide‘) v prípade úspešného spracovania formulára?
ja takto..
spracovanie formu v komponente:
<?php
public function processForm(Form $form, $values)
{
...
try {
$this->galleryCategoryRepository->persistAndFlush($category);
$this->template->hideModal = 1;
$this->redrawControl('hideModal');
$this->onProcess($form, $values); // dalej volania v presentery - flashMessage(..) a redrawControl('categories')
} catch (UniqueConstraintViolationException $e) {
$form->addError('Category with name ' . $values->name . ' already exist. Please chose another name.');
$this->redrawControl('form');
}
?>latte pre komponentu:
{snippet}
<div n:ifset="$showModal" class="modal fade" id="{$modalId}" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">{$modalTitle}</h4>
</div>
<div n:snippet="form" class="modal-body">
{control form}
</div>
</div>
</div>
<script>
$('#{$modalId|noescape}').modal('show');
</script>
{snippet hideModal}
<script n:ifset="$hideModal">
$('#{$modalId|noescape}').modal('hide');
</script>
{/snippet}
</div>
{/snippet}písal som to dnes, nemám to moc pretestované ale vypadá to tak že takto to funguje bez problému aj v prípade že mám viac rôznych modalov na stránke a otváram/zatváram ich bez redirectu
je nejaké lepšie riešenie? lebo ak sa .modal(‚hide‘) nezavolá v <body> ostane class=modal-open ktorá blokuje scrolovanie
edit: tu je taká celková ukážka ako to používam (teda dnes som začal používať.. takže je tam určite dosť vecí ktoré by sa dali riešiť lepšie) gist.github.com
Editoval Matey (15. 3. 2015 23:52)
