Diskuze: Django - ajax aktualizace tabulky

Naučíme tě pracovat na home-office.

Zjistit více...

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

Lukáš

Tvůrce

Lukáš:28.12.2019 21:51

Čau, potřeboval bych popíchnout proč nefunguje update tabulky přes ajax. Přiznám se, že ajax moc neovládám, takže za hloupé a začátečnické chyby se případně omlouvám :-D

Zkusil jsem: Mám vyhledávací formulář:

<form id="search" method="POST" action="{% url 'article-filter' %}">
    <input type="text" class="form-control" id="tokenfield1" name="txtSearch">
    <button type="submit" class="btn btn-default js-filter">Submit</button>
</form>

view na zpracování formuláře:

def article_filter(request):
    data = dict()
    if request.method == 'POST':
        search = request.POST.get('txtSearch')
        articles = Article.objects.filter(title = search)
        context = {
                   'articles': articles
        }
        data['html_table'] = render_to_string('blog/article_table.html',
                             context,
                             request = request
                             )
        return JsonResponse(data)

a ajaxovej kód:

<script>
    var filter =
    function() {

        $.ajax({
            type: "POST",
            url: "blog/article-filter",
            dataType: 'json',
        success: function(response) {
            $('#article-table').html(response.html_table);
        }
        });
    };

    $("#search").on("submit", ".js-filter", filter);
</script>

Nicméně, když odešlu formulář tak se mi jen načte stránka s raw html kódem (tou tabulkou). Nevíte kde mám chybu?

Editováno 28.12.2019 21:53

Odpovědět

28.12.2019 21:51

Filip Němeček

Tvůrce

Filip Němeček:28.12.2019 22:25

Můj první odhad je, že ke spuštění ajax kódu ani nedojde. Dělá se to totiž tak, že odchytíš submit event na formuláři, zakážeš klasické provedení přes preventDefault a potom formulář pošleš právě přes ten ajax :-)

Btw proč to html posíláš jako json?

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

28.12.2019 22:25

Lukáš

Tvůrce

Lukáš:29.12.2019 10:22

Tyjo, fakt se to k tomu ajaxu ani nedostalo, myslel jsem, že

$("#search").on("submit", ".js-filter", filter);

Jsem jakoby nabindoval tu funkci na to tlačítko.

No nicméně jsem to předělal jak jsi radil:

$("#search").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "blog/article-filter",
        dataType: 'json',
    }).done(function(data) {
        $('#article-table').html(data.html_table);
    });
});

A už to funguje :-)
Akorát by mě zajímalo, jaký je rozdíl v ajaxu mezi

.done(function()...)

success: function()...

Díky!

A jako json to posílám, abych mohl ve views vyhodit třeba chybovou hlášku..

def article_filter(request):
    data = dict()
    if request.method == 'POST':
        search = request.POST.get('txtSearch')
        articles = Article.objects.filter(title = search)
        if not articles:
              data['error_message'] = 'Nenašel jsem žádné výsledky'
        context = {
                   'articles': articles
        }
        data['html_table'] = render_to_string('blog/article_table.html',
                             context,
                             request = request
                             )
        return JsonResponse(data)

.done(function(data) {
            if(data.error_message) {
              alert(data.error_message);
            } else {
                $('#article-table').html(data.html_table);
                }
        });

Nebo bych to neměl posílat jako json? Rád si nechám poradit!

Editováno 29.12.2019 10:23

Nahoru Odpovědět

29.12.2019 10:22

Filip Němeček

Tvůrce

Filip Němeček:29.12.2019 11:55

Tak super :-) Json je asi v pohodě, nenapadá mě lepší řešení, jak to poslat, když to chceš zpracovat přes JS.

Každopádně to vyhledávání by bylo lepší přes contains a neptat se přímo na shodu title. Jinak funguje ti ta if not articles podmínka když to nic nenajde?

Nahoru Odpovědět

29.12.2019 11:55

Lukáš

Tvůrce

Lukáš:29.12.2019 12:08

Ono jsem to tady zjednodušil, ve skutečnosti tam mám tokenfield a autocomplete, takže tam je vždy celý název, proto je tam =.

A podmínka funguje když je queryset prázdný.

Myslel jsem si právě, že je dneska moderní updatovat data aniž by jsi musel refreshovat celou stránku, proto přes ajax a JS

Nahoru Odpovědět

29.12.2019 12:08

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 5 zpráv z 5.

Nejčastěji vyhledáváné

Diskuze: Django - ajax aktualizace tabulky