Discussion :

[spip93]

Bonjour à tous et à toutes,

(Je vais essayer d'être précis ET concis, ce qui n'est pas évident. Merci de m'en excuser par avance si je n'y parviens pas)

Je travaille sur un portail de bibliothèque avec une barre de recherche (champ + bouton de recherche).
Mon responsable m'a demandé de préfiltrer la recherche sur un critère (en l'occurrence : Type de document : Patrimoine)

Quand on lance une recherche, sans critère, l'URL de la page de résultats de recherche est la suivante :
https://nom-du-portail.fr/opac/catalog/search?allfields[]=

et le code HTML, par défaut, du bouton est le suivant (l'explication du pourquoi je l'indique, viendra plus tard) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button class="btn btn-link btn-search" data-toggle="tooltip" title="" data-placement="bottom" id="fast-search-btn-search" data-original-title="Lancer la recherche">
                                    <i class="far fa fa-search"></i>
</button>

Quand j'ajoute le critère demandé, l'URL de la page de résultats de recherche est la suivante :
https://nom-du-portail.fr/opac/catalog/search?allfields[]=&specificField[]=typededocument_dyns%3A"Patrimoine"

Pour obtenir cette URL pour la page de résultats de recherche, j'ai ajouté, bouton de recherche, un attribut via le jQuery suivant :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'name', 'specificField[]' );
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'value', 'typededocument_dyns:"Patrimoine"' );

Résultat, le code HTML du bouton de recherche est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button class="btn btn-link btn-search" data-toggle="tooltip" title="" data-placement="bottom" id="fast-search-btn-search" data-original-title="Lancer la recherche" name="specificField[]" value="typededocument_dyns:&quot;Patrimoine&quot;">
                                    <i class="far fa fa-search"></i>
</button>

Jusqu'ici, tout va bien. Grâce à mon script jQuery, j'ajoute un attribut "specificField[]" à mon bouton de recherche => ça modifie l'URL de la page de résultats de recherche ET (surtout) ça préfiltre la recherche sur le critère Type de document : Patrimoine

Là où ça se corse, c'est quand je veux ajouter un second critère de recherche (ex : la Médiathèque Victor Hugo).

L'URL de la page de résultats de recherche est la suivante :
https://nom-du-portail.fr/opac/catalog/search?allfields[0]=&specificField[0]=typededocument_dyns%3A"Patrimoine"&specificField[]=siteStr%3A"Médiathèque+Victor+Hugo"

Pour obtenir cette URL, j'ai donc ajouté les 2 lignes suivantes à mon jQuery :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'name', 'specificField[]' );
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'value', 'siteStr:"Médiathèque+Victor+Hugo"' );

et ainsi avoir non pas un, mais deux attributs "specificField[]" :
- Type de document : Patrimoine
- Site : Médiathèque Victor Hugo

Problème : Peu importe l'ordre des attributs dans le jQuery (Type de document : Patrimoine en premier et Site : Médiathèque Victor Hugo en second, ou l'inverse), le bouton recherche ne conserve QUE le dernier attribut.

En effet, j'ai essayé de modifier le HTML du bouton de recherche et mettre deux attributs "specificField[]", quand je valide la modification, c'est le dernier attribut qui est conservé.

Du coup, je voulais savoir : comment faire pour ajouter plusieurs attributs de même nature à un bouton ?

Merci par avance pour vos réponses

Bonne journée

[mathieu]

Problème : Peu importe l'ordre des attributs dans le jQuery, le bouton recherche ne conserve QUE le dernier attribut.

c'est normal, en html une balise n'est pas prévue pour avoir plusieurs attributs avec le même nom.

donc pour ce bouton spécial, vous allez devoir faire un traitement particulier en javascript pour qu'au clic, le code construise l'url et fasse la redirection.

[darkstar123456]

Bonjour,

J'ai du mal à comprendre votre problème.
Il s'agit d'un formulaire, il devrait donc y avoir différents champs qui représentent votre recherche.
D'après ce que je vois, au moins un champ texte de recherche libre, un select pour les types de documents et un select multiple (?) pour les sites.
Donc quoi qu'il arrive, vous devriez avoir 3 attributs name différents (un attribut par champ)


Là de ce que je vois, vous avez un formulaire avec aucun champ, à part sur le bouton submit (qui n'en est pas un au final car il n'a pas d'attribut type) et vous essayez de remplir tout dans cette variable....

Dans le pire des cas, si vous avez besoin des champs mais sans les montrer (je ne vois pas pourquoi du parce que ça voudrait que le visiteur ne peut changer les filtres), vous pourriez mettre un champ type="hidden" pour setuper des valeurs tout en les cachant.

De ce que je vois du code présenté, vous n'avez pas le moindre besoin de javascript pour faire ce que vous faites..
Vous vous compliquez la vie de fou pour rien je pense...

Je vous ai réalisé un exemple de formulaire dans lequel il n'y a pas le moindre javascript.
Le lien est temporaire mais le voici : https://tests.pierre-roels.com/test-form.php


Dans ce cas-ci, je me suis "embêté" à sélectionner manuellement une valeur par défaut pour mes 2 select mais si on faisait en sorte que ça soit à chaque fois le premier tag option la sélection se ferait automatiquement.
Et j'ai juste rendu le champ de recherche obligatoire.

Voici le code source de cette page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
 
function get_value($index, $default = "") {
    return (isset($_GET[$index])) ? filter_input(INPUT_GET, $index) : $default;
}
 
function get_value_array($index, $default = "") {
    return (isset($_GET[$index])) ? filter_input(INPUT_GET, $index, FILTER_DEFAULT, FILTER_REQUIRE_ARRAY) : $default;
}
 
$types = [
    'patrimoine' => "Patrimoine",
    'historique' => "Historiques",
    'numerique' => "Numériques",
];
 
$sites = [
    'mediatheque-victor-hugo' => 'Médiathèque Victor Hugo',
    'sorbonne' => "La Sorbonne",
    'puy-du-fou' => "Puy dy Fou",
];
?><form method="get" action="">
    <p>
        <label for="type_doc">Type de document</label>
        <select name="type_doc" id="type_doc">
            <option value=""></option>
            <?php foreach ($types AS $k => $v) : ?>
                <?php $selected = (get_value('type_doc') == $k || (empty(get_value('type_doc')) && $k == 'patrimoine')) ? ' selected="selected"' : ''; ?>
                <option value="<?= $k; ?>"<?= $selected; ?>><?= $v; ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <p>
        <label for="sites">Un select multiple pour l'exemple</label>
        <select name="sites[]" id="sites" multiple>
            <?php foreach ($sites AS $k => $v) : ?>
                <?php $selected = (is_array(get_value_array('sites')) && in_array($k, get_value_array('sites')) || (empty(get_value('sites')) && $k == 'mediatheque-victor-hugo')) ? ' selected="selected"' : ''; ?>
                <option value="<?= $k; ?>"<?= $selected; ?>><?= $v; ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <p>
        <label for="search">Texte à trouver :</label>
        <input type="text" name="search" id="search" value="<?= get_value('search'); ?>" required="required" />
    </p>
    <button type="submit">Chercher</button>
</form>
 
<?php
if (!empty($_GET)) {
    echo '<hr />';
    echo PHP_EOL . '<pre>type_doc: ' . print_r(get_value('type_doc'), true) . '</pre>' . PHP_EOL;
    echo PHP_EOL . '<pre>sites: ' . print_r(get_value_array('sites'), true) . '</pre>' . PHP_EOL;
    echo PHP_EOL . '<pre>search: ' . print_r(get_value('search'), true) . '</pre>' . PHP_EOL;
    echo '<hr />';
    echo PHP_EOL . '<pre>$_GET raw data: ' . print_r($_GET, true) . '</pre>' . PHP_EOL;
}

[spip93]

Bonjour,

@mathieu Merci beaucoup pour le message. C'est bien ce que je craignais Quel serait ce code javascript pour qu'au clic, le code construise l'url et fasse la redirection ?

@darkstar123456 Merci infiniment pour votre message et votre implication, mais, malheureusement je ne vais pas pouvoir reprendre votre code (j'en suis vraiment désolé). En effet, (excusez-moi, j'aurais dû le préciser plus tôt) je ne peux agir sur le portail que sur le HTML et le CSS. Et encore, je ne peux pas agir directement sur le HTML. Quand j'agis dessus c'est très ponctuellement et surtout, c'est via du jQuery/JavaScript que j'exécute en pied de page.
Donc tout dois passer soit par du jQuery, soit du JS.

Par ailleurs, vous trouverez un exemple de portail (et donc de bloc de recherche) ici

Quand on clique sur le bouton recherche, par défaut on accède à l'intégralité du catalogue.

Ce que je souhaite faire, c'est que, par défaut, on ait une recherche avec plusieurs critères.

Jusqu'ici, en ajoutant des attributs au bouton recherche, je ne suis arrivé qu'à en mettre un seul (en l'occurrence : Type de document : Patrimoine)

Ma question est : comment faire, soit (de préférence) en jQuery, soit en JS pour avoir, par défaut, plusieurs critères de recherche (de préférence un type de document + un site) ?

Merci par avance pour votre aide

[darkstar123456]

Bonjour,

Comme l'a dit @mathieu c'est impossible d'avoir plusieurs attributs avec un même nom.
Donc ne cherchez plus dans cette direction, ce n'est pas la bonne ^^

Si vous devez vraiment faire ça, et que vous ne pouvez toucher qu'au javascript, il reste quelques autres solutions malgré tout :

1. Revenir ma solution et créer l'HTML depuis javascript... c'est très moche mais ça marche, et on en revient au formulaire que j'ai présenté
2. Créer la recherche en AJAX et donc créer soit-même manuellement la recherche

Merci pour le lien ça sera sûrement plus simple de comprendre et de vous aider :-)

Je vais essayer de regarder ça et de revenir avec - j'espère - un bout de code pour vous aider ou de quoi vous aiguille

[spip93]

Bonjour,

J'ai trouvé une solution en jQuery.
Finalement, je n'étais pas loin de la solution.
Pour ceux que ça intéressent, voici le code jQuery :

Code jquery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'name', 'specificField[]' );
$( "#searchbar #fast-search-btn-search.btn-search" ).attr( 'value', 'typededocument_dyns:"Patrimoine"'+'siteStr:"Médiathèque+Victor+Hugo"' );

Comme vous pouvez le voir, il y a un + entre les valeurs.

Merci pour votre aide

Bonne journée

[darkstar123456]

Rebonjour,

Grâce le site, on peut retrouver le code source et donc retrouver la méthode qui défini les critères :
Fichier : https://laurent.bibenligne.fr/vendor...ript.js?v=2.19

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    $(".selection-site-link").click(function() {
        $('#siteSelected').text($(this).attr('name'));
        $('#siteSelectedInput').val('');
        if ($(this).attr('url')) {
            $('#siteSelectedInput').removeAttr('disabled');
            $('#siteSelectedInput').val($(this).attr('url'));
        } else {
            $('#siteSelectedInput').addAttr('disabled');
        }
    });
 
    $(".selection-criteria-link").click(function() {
        $('#filtreChange').text($(this).attr('translation'));
        $('#criteriaSelectedInput').val($(this).attr('name'));
        $('#fast-search-input').attr('name', $(this).attr('name') + '[]');
    });

Et donc, plutôt que de créer l'URL, vous devriez -au chargement de la page- ajouter les valeurs aux inputs (car comme dans mon exemple, ces inputs existent bel et bien et c'est logique car c'est comme ça que fonctionne un formulaire)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
let name = 'Médiathèque Victor Hugo';
let value = 'siteStr:Médiathèque+Victor+Hugo';
$('#siteSelected').text(name);
$('#siteSelectedInput').removeAttr('disabled');
$('#siteSelectedInput').val(value);

NB : Pour définir la valeur d'un champ en jQuery, on utilise la méthode .val(), c'est plus simple et plus safe car on ne défini pas toujours une valeur via l'attribut value (par exemple dans un champ de type select ou textarea ce n'est pas le cas)