Nejde vytvořit dialogové okno

wallet

Zdravím, trápím se několik dní nad vytvořením dialogového okna. Použil jsem jako základ tento příklad. Udělal jsem defacto všechno jak je popsáno – po stisku odkazu na vytvoření dialogu se ale nevytvoří dialogové okno, ale formulář, který v něm má být, se přidá na stávající stránku. Jinak všechno včetně ukládání dat funguje. Nejsem stavu to donutit, aby otevřel okno – jaké knihovny a styly musím mít načtené, aby to fungovalo?
Zjistil jsem, že v případě zpracování handle se podmínka $this->presenter->isAjax() vyhodnotí jako FALSE. Dík za jakoukoliv pomoc – nejlépe bych potřeboval odkaz na jednoduché funkčí demo, pak se chytnu.

newPOPE

Toto funguje https://github.com/…odal-windows je to starsi navod ale princip by mohol ficat.

iNviNho

Otváranie modal okien nie je v skutku až tak zložitá záležitosť.

V šablone si dané okno obal do podmienky napríklad

<?php

{snippet modal}
<div n:if-set="$foo">
	<div id="tvojeModalOkno">
		// obsah
	</div>

	<script>
		// script pre otvorenie modal okna
	</script>
</div>
{/snippet}
?>

a potom ti už iba stačí ajaxovým požiadavkom premennú $foo naplniť napríklad hodnotou true a akonáhle bude táto premenná „setnutá“, prepíše sa ti snippet s modálnm oknom a zobrazí sa ti :)

EDIT 1: či už použiješ modalne okno od bootstrapu, alebo napríklad colorbox je jedno, treba len do toho scriptu napísať nech sa pri načítaní otvorí. Napríklad colorbox má nastavenia „open“ ⇒ true

Editoval iNviNho (27. 10. 2015 21:51)

wallet

iNviNho napsal(a):

Otváranie modal okien nie je v skutku až tak zložitá záležitosť.

V šablone si dané okno obal do podmienky napríklad
<?php

{snippet modal}
<div n:if-set="$foo">
	<div id="tvojeModalOkno">
		// obsah
	</div>

	<script>
		// script pre otvorenie modal okna
	</script>
</div>
{/snippet}
?>
a potom ti už iba stačí ajaxovým požiadavkom premennú $foo naplniť napríklad hodnotou true a akonáhle bude táto premenná „setnutá“, prepíše sa ti snippet s modálnm oknom a zobrazí sa ti :)

EDIT 1: či už použiješ modalne okno od bootstrapu, alebo napríklad colorbox je jedno, treba len do toho scriptu napísať nech sa pri načítaní otvorí. Napríklad colorbox má nastavenia „open“ ⇒ true

Super :-) To jesem právě zkoušel a výsledkem bylo, že se mi obsah okna zobrazil ve stávajícím formuláři – tedy okno se neotevřelo. Proto bych potřeboval ten funkční příklad – zkusím to, co doporučoval kolega před tebou, ale pokud máš další možnosti, sem s tím :-)

iNviNho

jasnačka :) a inak aký plugin chceš použiť pre modálne okno?

wallet

iNviNho napsal(a):

jasnačka :) a inak aký plugin chceš použiť pre modálne okno?

No používám tyto pluginy: JQuery UI dilaog + jquery.nette.js + jquery.ajaxform.js, jak je v tom původním příkladu. Nevím, jestli už není v pluginech něco jednoduššího :-) Budu rád za každé doporučení.

wallet

Tak pořád nic, už si s tím hraju týden a nejsem schopen docílit dialogového okna – pořád se mi zobrazuje pouze formulář. Kód presenteru:

<?php
public function handlegetNovaKategorieForm() {
    $this->template->showNovaKategorie = true;
    if ($this->presenter->isAjax()) {
        $this->invalidateControl('novaKategorieForm');
    }
}

protected function createComponentNovaKategorieForm() {

    $form = new Nette\Application\UI\Form;
    Debugger::fireLog("Handle3");
    $form->addText('Name', 'Název:')
        ->addRule(Form::FILLED, 'Zadejte název kategorie');
    $form->addSubmit('save', 'Uložit')
        ->onClick[] = callback($this, 'novaKategorieFormSubmitted');
    return $form;
}

public function novaKategorieFormSubmitted($btn) {

    $newname = $btn->form->getValues()->Name;
    $this->database->table('R_Items_Category')->insert(array(
      'ID'=> NULL,
      'Name'=>$newname,
      'U_Users_ID'=>$this->getUser()->getId()));

    $this->flashMessage('Vysledek byl ulozen.');
    if ($this->presenter->isAjax()) {
        $this->invalidateControl('novaKategorieForm');
        $this->invalidateControl('flashMsg');
    } else {
        $this->redirect('this');
    }
}
?>

layout.latte:

<?php
{**
 * @param string   $basePath web base path
 * @param array    $flashes  flash messages
 *}
{var gridoAssetsPath = 'https://cdn.rawgit.com/o5/grido/1a4f1e5'}
<!DOCTYPE html>
<html>
	<meta charset="utf-8">
        <title></title>
    <!-- Bootstrap core CSS -->
    <link href="{$basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="{$basePath}/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.rawgit.com/simonwhitaker/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.css">
        <!--[if IE]>
            <link rel="stylesheet" href="https://cdn.rawgit.com/simonwhitaker/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.css">
        <![endif]-->
        <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v3.1.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v3.1.1/dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.17/daterangepicker-bs3.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/hyspace/typeahead.js-bootstrap3.less/v0.2.3/typeahead.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/rstacruz/nprogress/v0.1.6/nprogress.css">
        <link rel="stylesheet" href="{$gridoAssetsPath}/client-side/css/grido.css">
        <link rel="stylesheet" href="{$baseUri}/css/style.css">


	{block scripts}
        <script src="{$basePath}/js/jquery.js"></script>
        <script src="{$basePath}/js/jquery.ui.js"></script>
        <script src="{$basePath}/js/nette.ajax.js"></script>
        <script src="{$basePath}/js/jquery.nette.js"></script>
        <script src="{$basePath}/js/jquery.nette.forms.js"></script>
        <script src="https://cdn.rawgit.com/twbs/bootstrap/v3.1.1/dist/js/bootstrap.min.js"></script>
        <script src="https://cdn.rawgit.com/dangrossman/bootstrap-daterangepicker/v1.3.17/daterangepicker.js"></script>
        <script src="https://cdn.rawgit.com/nette/forms/v2.2.4/src/assets/netteForms.js"></script>

        {var ajax = $presenter->getParameter('ajax') == 'on'}
        <script n:if="$ajax" src="https://cdn.rawgit.com/browserstate/history.js/1.8.0/scripts/bundled/html4+html5/jquery.history.js"></script>
        <script n:if="$ajax" src="https://cdn.rawgit.com/twitter/typeahead.js/v0.10.5/dist/typeahead.bundle.min.js"></script>
        <script n:if="$ajax" src="https://cdn.rawgit.com/vojtech-dobes/nette.ajax.js/2.0.0/nette.ajax.js"></script>
        <script n:if="$ajax" src="https://cdn.rawgit.com/rstacruz/nprogress/v0.1.6/nprogress.js"></script>
        <script n:if="$ajax" src="{$basePath}/js/nette.nprogress.js"></script>

        <script src="{$gridoAssetsPath}/client-side/js/grido.js"></script>
        <script src="{$gridoAssetsPath}/client-side/js/plugins/grido.datepicker.js"></script>
        <script n:if="$ajax" src="{$gridoAssetsPath}/client-side/js/plugins/grido.typeahead.js"></script>
        <script n:if="$ajax" src="{$gridoAssetsPath}/client-side/js/plugins/grido.history.js"></script>
        <script n:if="$ajax" src="{$gridoAssetsPath}/client-side/js/plugins/grido.nette.ajax.js"></script>

        <script n:if="$ajax"  src="{$baseUri}/js/main.ajax.js"></script>
        <script n:if="!$ajax" src="{$baseUri}/js/main.js"></script>
	{/block}
        {block head}{/block}
<script>

  $(function () {
    $.nette.init();
});


</script>
</head>

<body>

{snippet flashMsg}
<div n:foreach="$flashes as $flash" class="flash flash-{$flash->type}">
    <p>{$flash->message}</p>
</div>
{/snippet}

{if $user->isLoggedIn()}
    Přihlášen jako <em>{$user->getIdentity()->Login}</em>

{else}
    <p>You are not logged in.</p>

{/if}
      	{include content}


</body>
</html>
?>

a samotná šablona:

<?php
{block content}

<script>
// aktivace odkazu na zobrazeni dialogu
jQuery(function($) {
    $('a.ajaxdialog').live('click', function(event) {
        event.preventDefault();
        $.post($.nette.href = this.href, function(data) {
            // (mimo jine) injektovani formulare do HTML
            $.nette.success(data);
            // aktivace ajaxoveho submitu formulare
            activateAjaxForm();
            // zobrazeni formulare v dialogu
            $("#snippet--novaKategorieForm").dialog();
        }, "json");
    });
});
// aktivace "ajaxoveho" formulare
function activateAjaxForm () {
    $("#snippet--novaKategorieForm form :submit").click(function () {
        $(this).ajaxSubmit();
        $("#snippet--novaKategorieForm").dialog( "destroy" ); // po submitnuti zavreme dialog
        return false;
    });
}

</script>

{snippet novaKategorieForm}
{if isset($showNovaKategorie)}{control novaKategorieForm}{/if}


{/snippet}


    <h1 n:block="title">Nová položka</h1>

     {form itemsForm}
    {label Name /} {input Name}<br>
    {label R_Items_Category_ID /} {input R_Items_Category_ID}<a n:href="getNovaKategorieForm!" class="ajaxdialog">Nová kategorie</a><br>
     {label R_Units_ID /} {input R_Units_ID}<br>
     {label Price /} {input Price}<br>
     <br>{input send}


     {/form}

{/block}
?>

Můžete mi pls říct, kde mám chybu – asi jsem se zasekl a potřebuju nasměrovat. Podle mne se mi bijí nějaké knihovny nebo tak něco.

wallet

Tak zdravím – stačilo pročistit knihovny js, se kterými nejsem moc kamarád. Pro zdárný běh příkladu jsou potřeba opravdu jen ty tři základní – jquery, jquery.ui a jquery.nette. Jakmile se tam začne motat něco dalšího, zejména nette.ajax, skončí to nezdarem, protože se některé funkce přepíšou :-) To byl celý problém.