films/src/AppBundle/Resources/views/videotheque/testajax.html.twig

{% extends "@App/videotheque/base.html.twig" %}



{% block title %}Ajax{% endblock %}
{% block titre %}Ajax{% endblock %}

{% block body %}
<form method="post" action="">
    <input type="text" id="mot_cle">
</form>

<div id="results">
    <ul class="result">

    </ul>
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('bundles/app/assets/oXHR.js') }}"></script>
<script>

$(document).ready( function() {
        if (!jQuery('body').hasClass('searching')) {
            $('#mot_cle').keyup(function (e) {
                var contenu = $('#mot_cle').val();
                $('#results').html('');
                if (contenu.length > 2) {
                    jQuery('#results').addClass('miniload');
                    jQuery('#results').append('<div id="chargement">Chargement...<div id="spinner" class="spinner"></div></div>');
                    setTimeout(function() {
                        $.ajax({
                            type: 'POST',
                            url: "{{ path('ajax_requete') }}",
                            data: 'mot_cle=' + contenu,
                            success: function (data) {
                                jQuery('body').addClass('searching');
                                $('#results').html('');
                                jQuery('#chargement').remove();
                                parseJson(data);
                                return;
                            },
                            complete : function(){
                                jQuery('#chargement').remove();
                                return jQuery('body').removeClass('searching');
                            }
                        });
                    }, 1000);
                }
            });
        }
    });
    
    function parseJson(data) {
        console.log (data);
        let text = "";
        for (i = 0; i < data.length; i++)
        {
            let realisateur = data[i];
            console.log("OBJECT JSON %o", realisateur);
            let {id, nom, prenom} = JSON.parse(realisateur);
            text += prenom + " " + nom + '\n';
        }
        $('#results').html(text);
    }



</script>

{% endblock %}