Recherche : touche enter ne fonctionne pas à tous les coups ...

Bonsoir à tous,

j'ai un champ de recherche qui réagit quand l'utilisateur tape sur la touche enter. Ce que je ne comprends pas, c'est que cet événement ne semble pas être déclenché à tous les coups. A certains moments, la méthode ajax $.get n'est pas appelée.

Voici mon code :

$(document).ready(function(){
    $('#search').keyup(function(e){
        var keyPressed = (e.keyCode ? e.keyCode : e.which);
        
        if (keyPressed == 13)
        {
            var searchValue = $(this).val();
            var searchData = 'keysearch=' + searchValue;

            $.get("../../app/Search/search.php", {
                data: $('#search').val()
            }).done(function(data, textStatus, jqXHR){
                    $(".container").fadeOut();
                    $("#search-result").empty();
                    $("#search-result").append(data).fadeIn();
            }).fail(function(jqXHR, textStatus, errorThrown){
                alert(jqXHR.responseText);
            }).always(function(){
                $('#search').text(searchValue);
            });
        }
    });
});

y a-t-il un bug dans mon code ?

Merci d'avance

Bonne soirée
Thierry

THIRT05 a écrit :

...
Je traite la recherche via ajax afin de ne pas rafraîchir la page. Comme vous pouvez le constater dans mon code, j'appelle donc une page php à partir de ma requête ajax qui se base sur la pression de la touche enter. Ma page php renvoie un résultat au format html.
Ici, j'appelle la requête ajax via la méthode "get". Ne faudrait-il que j'appelle la méthode ajax via la méthode "post" vu qu'il s'agit d'un formulaire. L'url se trouverait donc dans le champ "action" du formulaire.

Si vous deviez faire une recherche dans votre site web, ne serait-il pas préférable d'appeler la même page php en rafraîchissant les données ?
....

Et l'eau,

À priori, je valide ce que tu as fait (un fichier séparé et utilisation de la méthode get pour ton ajax).

Une recherche se fait en get puisque c'est une demande d'affichage des données. je vais me répéter.... post / put / patch / delete servent à stocker / mettre à jour / supprimer des données sur le serveur. Je t'invite à lire ou relire l'article du lien que je viens te donner.

De quoi vas tu avoir besoin pour la suite ?
- loading.io
- disabled
- beforeSend, error, complete, success
Modifié par niuxe (29 Jul 2019 - 14:29)

THIRT05 a écrit :


Si vous deviez faire une recherche dans votre site web, ne serait-il pas préférable d'appeler la même page php en rafraîchissant les données ?

Pour moi, ce serait différent :
- si j'utilise mon micro framework php (pattern MV), ce serait une route avec un controlleur au bout
- si j'utilise Django (pattern HMVC), j'utilise une url (route), forms et une vue (qui fait office de controller puisqu'avec Django on parle de mvt).
Modifié par niuxe (29 Jul 2019 - 13:54)

Alors, à titre d'info, tu peux faire de l'ajax avec n'importe quel button..

Tu n'es pas obliger de mettre un <input> dans une formualaire. un Simple button avec

$("monbouton").on("click",function(){

   $.ajax()....

ou 

  $.post()... ou $get()
})

Bonjour Jencal,

merci pour votre réponse et vos conseils.

Dans mon cas, suite aux conseils de Niuxe, je vais donc utiliser la méthode $.get vu que le but est d'afficher des données.

Merci d'avance

Bonne journée
Thierry

Un exemple de mon ajax :

$.ajax({
				url : urlDev,
				type : 'POST', //tu peux mettre get ici aussi
				data : { "data" : data },
				dataType : 'html', // 
				success : function(results){ // 
				
					let result = $.parseJSON(results);
					//console.log(result);
					$("#_id_stock.select_id_stock option").remove();
					$.each(result, function(k,v) {
						$("#_id_stock.select_id_stock").append("<option value='"+k+"'>"+v+"</option>");
					});
				}
		    });

ici le code me rempli une liste déroulante suivant une autre liste déroulante en amont.

Data, que j'envoi en POST, contient le .val() de la première liste déroulante.
Modifié par JENCAL (29 Jul 2019 - 14:23)

THIRT05 a écrit :

tout d'abord, comme d'habitude, je tenais à vous remercier pour votre aide et vos conseils.

de rien

THIRT05 a écrit :

En fait, je pensais devoir utiliser la méthode $.post car il s'agissait d'un formulaire et, en plus, pour des raisons de sécurité car, de cette façon, quelqu'un n'a pas moyen de copier l'url et de lancer la recherche avec d'autres valeurs pour les critères de recherche.

Que ce soit en post ou get, il y a moyen de récupérer les données. Va sur google.com et fait une petite recherche. Tu vas t'apercevoir que tes critères de recherches s'affichent dans la barre d'adresse. C'est ce que l'on appelle une query string (envoie de paramètres avec valeurs dans l'url).

exemple :

 https://www.google.com/search?q=charles+de+gaulle
 

"q" étant l'attribut que le serveur attend. En php, c'est $_GET['q']. La valeur étant $_GET['q'] = "charles de gaulle".

THIRT05 a écrit :

Enfin, comme vous le l'avez expliqué, comme il s'agit d'affichage de données, il faut donc que j'utilise la méthode $.get.

Oui mais pas la méthode $.get, mais plutôt $.ajax puisqu'elle est beaucoup plus intéressante dans ton cas. Tu vas pouvoir utiliser beforesend, error et success.

Bien que l'exemple de Jencal soit pertinent, il n'est pas assez explicite :

<input type="text" name="un_champ" value="" id="un_champ"/>

$('form').on('submit', function(event){
    event.preventDefault();
    if($(this).is_valid()){ //premier filtre 'is_valid étant un exemple lambda de comprendre mon idée'
        $.ajax({
            url: "/chemin/vers/fichier_ou_controlleur/traitant/la/requete/ajax",
            type: 'GET',
            data: {
                "un_champ_vers_serveur": $("#un_champ").val() //$_GET['un_champ_vers_serveur'] !!
            },
            dataType: 'json', // réception des données au format json 
            beforeSend : function(){
                //spinner, disabled
            },
            success: function(results) { 
                // supprime spinner, disabled
                //envoie résultat dans la page (utilisation de append, after, before, prepend, etc.)
            },
            error: function(results) { 
                // supprime spinner, disabled
                //affichage message erreur
            },
        });        
    }
});

THIRT05 a écrit :

De mon côté, je n'utilise aucun framework pour développer les sites web. J'utilise simplement Visual Studio Code.

Ne pas confondre l'éditeur de code et le framework. Bien qu'un éditeur de code fasse parti du cadre de travail, un framework est une très grosse librairie avec :
- un type d'écriture souvent spécifique
- des petites librairies qui font office d'outils annexes (validation formulaire, accès à la base de données, moteur de template, url, etc. etc.)
Modifié par niuxe (29 Jul 2019 - 15:06)

niuxe toujours parfait avec ces explications

merci

Bonjour Niuxe,

encore merci pour vos conseils.

En fait, je pensais qu'il fallait utiliser les promesses (done, fail, always) car j'avais lu que les anciennes commandes (success, error, ...) allaient être dépréciées.

Bonne journée
Thierry

Attention,

il a une différence entre le callback success et l'appel local :

$.ajax({}).success(function(){...});

$.ajax({
    success: function(){...}
});

Le 1er success oui sera déprécié, mais pas le deuxième.

Bonjour Jencal et Niuxe,

encore une fois, merci à vous deux pour votre aide et vos conseils.

J'ai une dernière question à vous poser concernant ce sujet.

Qu'amélioreriez-vous par rapport au code suivant :

$(document).ready(function(){
    $('#form-search').on('submit', function(e) {
        e.preventDefault();

        var formSearch = $(this);
        var urlAddress = formSearch.attr('action');
        var searchValue = $('#search').val();

        $.get(urlAddress, {
            keysearch: searchValue
        }).done(function(data, textStatus, jqXHR){
                $(".container").fadeOut();
                $("#search-result").empty();
                $("#search-result").append(data).fadeIn();
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert(jqXHR.responseText);
        }).always(function(){
            $('#search').text(searchValue);
        });
    });
});

Merci d'avance

Bonne soirée
Thierry

Bonjour Niuxe et Jencal,

j'ai encore une petite question à vous poser par rapport à la recherche.

En fait, je vais que Google n'utilise apparemment pas de formulaire. Il utilise juste un champ de type texte. N'est-il pas plus intéressant d'utiliser un formulaire ?

Comme je vais utiliser $.ajax avec la méthode "GET", au niveau du formulaire, dois-je avoir la propriété qui doit valoir "get" ou "post" (<form ... method="get" ...>) ?

Merci d'avance.

Bonne journée à vous.
Thierry