Refresh snippetu a nefunkčnost JS(Colorbox + Tooltipster)

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Joacim
Člen | 229
+
0
-

Mám galerii fotek u kterých používám JS Colorbox a Tooltipster, pokud needituji fotku přes AJAX je vše OK, ovšem pokud přidám popisek a znovu přes ajax snippet vyrendruji, již mi JS nefunguje

Mám dát JS nad snippet nebo pomocí js funkce inicializovat znova JS prvky ? Nebo je tu i jiná schůdnější varianta ?

{block content}
<div class="row">
    <div class="col-sm-12">
        <div class="container-fluid show">

            <!-- Page Heading -->
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">
                        Galerie
                        <small>Náhled galerie</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li>
                            <i class="fa fa-photo"></i>  <a href="{$presenter->link('Gallery:default', array('gid' => NULL))}">Galerie</a>
                        </li>
                        <li class="active">
                            <i class="fa fa-photo"></i> Náhled galerie
                        </li>
                    </ol>
                </div>
            </div>
            <!-- /.row -->
            {if $user->isAllowed('Gallery', 'editImage') || $user->isAllowed('Gallery', 'deleteImage')}
                {if $images_cnt != 0 || $images_cnt != null}
                    <div class="checkbox btn btn-default">
                        <label>
                            <input type="checkbox" class="check" id="checkAll"> Check All
                        </label>
                    </div>
                {/if}
            {/if}

            {if $user->isAllowed('Gallery', 'addImage')}
                <a id="create-gallery" class="btn btn-default" href="{$presenter->link('Gallery:add', $gid)}"><i class="fa fa-plus-circle"></i> Přidat nové fotky</a>
            {/if}


            {if $images_cnt != 0 || $images_cnt != null}
                {if $user->isAllowed('Gallery', 'editImage')}
                    <a id="edit-gallery" class="btn btn-default" href="{$presenter->link('Gallery:edit', $gid)}"><i class="fa fa-edit"></i> Editovat fotky</a>
                {/if}
                {if $user->isAllowed('Gallery', 'deleteImage')}
                    <button type="button" id="delete-images" class="btn btn-default" ><i class="fa fa-trash" id="{$gid}"></i> Smazat vybrané fotografie</button>
                {/if}
            {/if}

            {snippet galleryListShow}
                {if $images_cnt == 0 || $images_cnt == null}
                    <div class="panel-body">
                        <div class="alert alert-warning">
                            <i class="fa fa-warning fa-fw"></i> No images in Gallery with <strong>ID: {$gid}</strong>.
                        </div>
                    </div>
                {else}
                    <div class="row">
                        <div class="col-lg-12">
                            <h1 class="page-header"></h1>
                        </div>

                        {foreach $gallery_images as $img}
                            <div class="col-lg-3 col-md-4 col-xs-6 thumb thumbnail show_gall_img" {if $img->archived == 1}  id="arch_div" {/if}>
                                <input type="checkbox" class="check" name="images_list" value="{$img->id}" id="img_{$img->id}">
                                {if $user->isAllowed('Gallery', 'editImage')}
                                    <abbr class="edit-abbr-btn" title="Edit image - {$img->name}">
                                        <i class="fa-18 fa-edit edit-btn" id="{$img->id}"></i>
                                    </abbr>
                                {/if}
                                <span id="info-icons">
                                    {if $img->visible == 0}
                                        <abbr title="Invisible - Image doesn´t show on web site"><i class="fa-18 fa-eye-slash"></i></abbr>
                                        {/if}
                                        {if $img->archived == 1}
                                        <abbr title="Archived - Image is show in Archive"><i class="fa-18 fa-archive"></i></abbr>
                                        {/if}
                                </span>

                                <a class="colorbox" title="{$img->cs_name} - {$img->dimension} - {$img->cs_technique}" href="{$basePath}/img_gallery/{$img->gallery_id}/{$img->name}">
                                    <img {if $img->visible == 0}  id="transparent" {/if} class="img-responsive" src="{$basePath}/img_gallery/{$img->gallery_id}/thumb/{$img->name}" alt="" width="400" height="300">
                                </a>
                            </div>
                        {/foreach}

                    </div>

                {/if}
            {/snippet}
        </div>
    </div>
</div>

<!-- create/update reservation dialog -->
{if $user->isAllowed('Gallery', 'editImage')}
    <div id="edit-dialog" title="Editace fotky">
        <form>
            <fieldset>
                <label for="cs_name">Název (CZ)</label>
                <input type="text" name="cs_name" id="cs_name" value="" class="form-control">
                <label for="en_name">Název (EN)</label>
                <input type="text" name="en_name" id="en_name" value="" class="form-control">

                <label for="cs_technique">Technika (CZ)</label>
                <input type="text" name="cs_technique" id="cs_technique" value="" class="form-control">
                <label for="en_technique">Technika (EN)</label>
                <input type="text" name="en_technique" id="en_technique" value="" class="form-control">

                <label for="dimension">Rozměr</label>
                <input type="text" name="dimension" id="dimension" value="" class="form-control">
            </fieldset>
            <fieldset>
                <label for="visible">Zobrazit</label>
                <select id="visible" class="form-control">
                    <option value="1">Ano</option>
                    <option value="0">Ne</option>
                </select>

                <label for="archived">Archivovat</label>
                <select id="archived" class="form-control">
                    <option value="1">Ano</option>
                    <option value="0">Ne</option>
                </select>
            </fieldset>
        </form>
    </div>
{/if}
{/block}



{block scripts}
{include parent}
<script src="{$basePath}/js/jquery-ui.min.js"></script>
<script src="{$basePath}/js/jquery.colorbox-min.js"></script>
<script src="{$basePath}/js/show.gallery.js"></script>
{/block}

{block head}
<link rel="stylesheet" href="{$basePath}/css/jquery-ui.min.css">
<link rel="stylesheet" href="{$basePath}/css/colorbox.css">
{/block}
akadlec
Člen | 1326
+
0
-

Nesčetněkrát položená otázka. Ano je to proto protože prvky DOMu přerenderuješ novými, tudíž nemohou mít na sobě události co jsi navěsil jejich předkům. Abys tedy takto rozpohyboval na nových elementech, tak to musíš na ně znova navěsit. Cest je několik, třeba v události onsuccess navěsíš znova tebu použité pluginy, nebo budeš sledovat změny v DOMu a na základě eventu je navěsíš, nebo pokud máš nette.ajax.js si vytvoříš podmíněné extension co ti to budou navěšovat atd. atd.

Joacim
Člen | 229
+
0
-

Vyřešeno tímto (jen nevím jestli je closeFlashes pouze název a nemusí tam být nebo je to parametr fce)

$.nette.ext('closeFlashes', {
        success: function () {
            initialize();
        }
    });