FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

Diskuze: Django - ajax aktualizace tabulky

Aktivity
Avatar
Lukáš
Tvůrce
Avatar
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
 
Odpovědět
28.12.2019 21:51
Avatar
Filip Němeček
Tvůrce
Avatar
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č
Řešení problému
 
Nahoru Odpovědět
28.12.2019 22:25
Avatar
Lukáš
Tvůrce
Avatar
Odpovídá na Filip Němeček
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()...)

a

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
 
Nahoru Odpovědět
29.12.2019 10:22
Avatar
Filip Němeček
Tvůrce
Avatar
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
Avatar
Lukáš
Tvůrce
Avatar
Odpovídá na Filip Němeček
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 :D

 
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.