Využij akce až 30 % zdarma při nákupu e-learningu. Více informací. Zároveň je tento týden sleva až 80 % na e-learning týkající se C# .NET
Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
discount week 30 halloween
Avatar
Lukáš
Redaktor
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 28.12.2019 21:53
 
Odpovědět
28.12.2019 21:51
Avatar
Filip Němeček
Překladatel
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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět
28.12.2019 22:25
Avatar
Lukáš
Redaktor
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 29.12.2019 10:23
 
Nahoru Odpovědět
29.12.2019 10:22
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Filip Němeček
Překladatel
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áš
Redaktor
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.