Vyhledávácí formulář přes AJAX

theacastus

Zdravím,

mám přehled článků a chci v nich jednoduše vyhledávat (SQL: …WHERE title LIKE %co hledam%').

V tuhle chvíli nemám vysloveně formulář, ale asi jej budu muset vytvořit. Protože:

Mám input a button, přes JS/jQuery jsem chtěl získat hodnotu inputu a následně poslat AJAJ request, ale to moc nepůjde když v šabloně nemůžu pracovat s tím vyhledávacím slovem jako s php proměnou ale jako JS. A nemůžu přijít na to jak to propojit.

Asi bude jednodušší vytvořit formulář který odešele celý tento request pod ajaxem a to co se vrátí bude replacnuto, že? Než kombinovat latte a JS.

Díky

„Pseudo form“:

<div class="search-posts">
	<div class="input-group">
    	<input type="text" class="form-control" placeholder="Hledat..." id="search-query">
        <span class="input-group-btn">
        	<button class="btn btn-success" type="button" id="search-request"><i class="fa fa-search" aria-hidden="true"></i> Vyhledat</button>
        </span>
    </div>
</div>

Javascript:

$('#search-request').click(function (e)
        {
            e.preventDefault();
            var query = $('#search-query').val();

            if(query)
            {
                $.getJSON({link search! } + query, function (data)
                {
                    console.log(data);

                    if(data.snippets)
                    {
                        console.log('snippets!');
                    } else if (data.redirect) {
                        console.log('redirect!');
                    }
                });
            }
        });

//zatím to jen vypisuju do konzole, ale bez výsledků

Editoval theacastus (22. 9. 2017 15:40)

Pavel Kravčík

Na input si navěš třeba jQuery událost on('change') a tou si zavoláš handle z presenteru, přibližně takto:

$.nette.ajax({
	type: 'GET',
    url: {link search!},
    data: {
       'someVar': $('.some-input').val()
    }
    });

Pak si jen výpis obalíš snippetem a v handle tam pošleš data… https://doc.nette.org/…ication/ajax

theacastus

Ok, díky.

Odkud se dá stáhnout nette.ajax.js ? Na componette jsem na něco narazil, ale nevím jak je to živé nebo ne. Poslední update byl snad pro Nette 2.3 (kompatibility-fix)

Pavel Kravčík

Ano neudržuje se to, ale my to používáme v pohodě ve 2.4, alternativa je třeba tohle https://www.nittro.org/.

theacastus

Rozchodil jsem nette.ajax.js a chci navěsit na odkazy které mažou příspěvky potvrzení javascriptové confirm().

Kód:

		$(function()
{
    $('a[data-confirm]').click(function(e)
    {
        if(!confirm('Opravdu chcete smazat tento článek?'))
        {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });

    $.nette.ext('init').linkSelector = 'a[data-ajax]';
    $.nette.ext('complete', {
        event1: function()
        {

        }
    });
    $.nette.init();
});

Přes $.nette.ext(‚complete‘, {}) si myslím že by to šlo, ale nejsem dostatečně dobrý v JS abych věděl jaký event tam mám dát…

Co koukám do dokumentace, nevidím nic co by mi pomohlo.

Editoval theacastus (22. 9. 2017 19:10)

Martk

Existuje na to hotové řešení, stačí dát atribut data-confirm a v tom svůj text.