Diskuze: AJAX - neaplikuje sa javascript na aktualizovaný obsah funkciou .load()

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Adam Ondrejkovič

Člen

Adam Ondrejkovič:1.8.2017 14:30

Dobrý deň,

začínam s ajaxom - mám problém a neviem ako ho riešiť. Mám tlačítko, ktoré posiela ajax get request a po úspešnom execute updatne tabuľku na frontende pomocou jquery funkcie load(). Problémom je, že v každom riadku sa nachádza tlačítko na vymazanie, a vždy keď načítam nový obsah, už mi tlačítka "vymazať" v riadkoch nefungujú.

$('.deAssignUserButton').click(function (event) {
    event.preventDefault();
    var url = $(this).attr("href");

    $.ajax({
        method: "get",
        url: url,
        success: function () {
            $("#clientsToRemove").load(" #clientsToRemove")
            $("#clientsToAdd").load(" #clientsToAdd")
        }
    });
});

#clientsToRemove a #clientsToAdd sú html tabuľky, ktorých elementy majú priradené triedy, u ktorým by sa mal viazať javascript kód. Pred AJAX requestom všetko šlape. Akonáhľe sa pošle Ajax request a pri výsledku sa načíta nový obsah, javascript naň nereaguje, tzn. nefunguje ani ajax tlačítko na vymazávanie. JS kód **nie je **zabalený v $(document).ready()

Som už súfalý. Vďaka za všetky rady

Odpovědět

1.8.2017 14:30

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:1.8.2017 14:55

hodilo by se aspon trochu toho html o kterem mluvis

Nahoru Odpovědět

1.8.2017 14:55

Neaktivní uživatelský účet

Adam Ondrejkovič

Člen

Adam Ondrejkovič:1.8.2017 15:02

Pardon, tu je. Je tam aj kus laraveláckeho blade templating enginu, ale malo by byť jasné o čo ide. Funkcie route() generuje absolútnu url adresu.

<section class="col-lg-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Všetci klienti</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <!-- TABUĽKA 1 -->
                <table id="clientsToAdd" class="table table-bordered table-striped clientsToAdd">
                    <thead>
                    <tr>
                        <th>Meno Firmy</th>
                        <th class="hidden-xs">Prihlasovací e-mail</th>
                        <th>Pridať</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($clients as $client)
                        <tr>
                            <td><a href="{{ route('clients.show', $client->id) }}">{{ $client->name }}</a></td>
                            <td class="hidden-xs">{{ $client->email }}</td>

                            <!-- KLIKACÍ BUTTON -->
                            <td><a href="{{ route('add.user', [$user->id, $client->id]) }}" class="btn btn-success btn-xs assignUserButton">Pridať</a></td>

                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
</section>

<section class="col-lg-6">
    <div class="box box-success">
        <div class="box-header">
            <h3 class="box-title">Priradení klienti</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body addedClients">

            <!-- TABUĽKA 2 -->
            <table id="clientsToRemove" class="table table-bordered table-striped clientsToRemove">
                <thead>
                <tr>
                    <th>Meno Firmy</th>
                    <th class="hidden-xs">Prihlasovací e-mail</th>
                    <th>Odobrať</th>
                </tr>
                </thead>
                <tbody>
                @foreach($assigns as $assign)
                    @php( $assignedUser = \App\User::where('id', $assign->assigned_user_id)->first() )
                    <tr>
                        <td><a href="{{ route('index.clients.show', $assignedUser->id) }}">{{ $assignedUser->name }}</a></td>
                        <td class="hidden-xs">{{ $assignedUser->email }}</td>

                        <!-- KLIKACÍ BUTTON -->
                        <td><a href="{{ route('deAssign.user', $assign->id) }}" class="btn btn-danger btn-xs deAssignUserButton">Odobrať</a></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>

Nahoru Odpovědět

1.8.2017 15:02

Michal Šmahel

Člen

Michal Šmahel:1.8.2017 15:41

Ahoj, pokud nemáš statický obsah, nemůžeš odchytávat události tímto způsobem. U dynamického obsahu je potřeba nastavit listener trochu jiným způsobem, např.:

$(document).delegate( ".deAssignUserButton", "click", function(){
        // ...
});

Nahoru Odpovědět

1.8.2017 15:41

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Michal Šmahel

Člen

Michal Šmahel:1.8.2017 15:49

Popř. se to dá vyřešit i takto. Je to možná přehlednější, registruješ tady událost přes on(), které pojíš na nějaký nadřazený element (třeba body). Dále je to stejné, uvádíš typ události (click), konkrétní element, na něhož se událost váže (tlačítko) a poté funkci, která se vykoná při odchycení události.

$('body').on('click', '.deAssignUserButton', function() {
        // ...
});

Editováno 1.8.2017 15:50

Akceptované řešení
+20 Zkušeností

Nahoru Odpovědět

1.8.2017 15:49

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Adam Ondrejkovič

Člen

Adam Ondrejkovič:1.8.2017 16:06

Moc v tom rozdiel nevidím, ale funguje to správne. Vďaka.

Nahoru Odpovědět

1.8.2017 16:06

Michal Šmahel

Člen

Michal Šmahel:1.8.2017 17:02

Tady jde o to, že tu událost musíš přiřadit něčemu, co existuje staticky (při načtení stránky je to v DOM a také to tam zůstane nadále). Když máš tlačítko na stránce pořád, stačí přiřadit událost přímo jemu. V tvém případě tlačítko do DOM přibude až v okamžiku úspěšného AJAX požadavku, takže je přidáno dynamicky. Nelze tedy přímo na něho nastavit nějakou událost. Když ji ale nastavíš nějakému rodiči, který je přítomen staticky, vše funguje v pořádku. Rodiče si totiž script při načtení najde.

Nahoru Odpovědět

1.8.2017 17:02

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.

Nejčastěji vyhledáváné

Diskuze: AJAX - neaplikuje sa javascript na aktualizovaný obsah funkciou .load()