Discussion :

[spip93]

Bonjour à tous et à toutes,

J'espère que l'intitulé de ce poste est clair. Si ça n'est pas le cas, voici de plus amples explications :
J'ai une page HTML. Sur cette page, j'ai ce bouton dont voici le code HTML :

Code html :

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

1
2
3
<a id="add-wishlist-selection" class="btn btn-link btn-lg text-primary pr-2 wishlist-save" data-toggle="tooltip" title="" data-wishlist-id="-1" data-original-title="Ajouter ces résultats à une liste d'envies">
    <i class="wishlist-save-icon-plus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1"></i>
</a>

Une cliente voulait qu'on remplace ce bouton par celui-ci

Comme je n'ai pas la main pour modifier le HTML, j'ai donc écrit ce petit script qui ajoute la classe fa-heart :

Code javascript :

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

$('.dp-opac .catalog-page-content .section-catalog #add-wishlist-selection i.fa').addClass("fa-heart");

Ça fonctionne bien dans le sens où une fois la page chargée, le script est exécuté.

Problème :
Quand je clique sur le bouton, le bouton change légèrement de forme, c'est à dire qu'au lieu d'avoir un petit plus en bas à droite, ça met un petit moins sans recharger la page et donc exécuter le script qui change le bouton en coeur

En effet, quand je regarde le DOM, il y a plusieurs évènements sur le bouton a

(désolé je dois flouter pour des raisons de confidentialité)

Et effectivement, sur le premier évènement, au clic, j'ai ceci :

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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
$(document).on('click', '.wishlist-save', function (e) {
    var wishlist_id = $(this).attr('data-wishlist-id');
    var record_ids = $('.wish-like, .wish-like-button').map(function () {
      return $(this).attr('record_id');
    }).get();
 
 
    $('.wish-like[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus').addClass('fa-spinner-third fa-spin fas');
    });
 
    $('.wish-like-button[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus').addClass('fa-spinner-third fa-spin fas');
    });
 
    $('.wishlist-save[data-wishlist-id!="' + wishlist_id + '"]').each(function () {
      $(this).find('i.fa').removeClass('far fa-square fa-check-square fa-trash fa-plus wishlist-save-icon-plus wishlist-save-icon-new').addClass('fa-spinner-third fa-spin fas');
    });
 
    $.ajax({
      url: Application.baseUrl() + '/opac/wishlist/like',
      type: "post",
      data: {
        wishlist_id: wishlist_id,
        record_ids: record_ids,
      },
      success: function (result) {
        if (result !== '0') {
 
          $.each(jQuery.parseJSON(result), function (index, value) {
 
            var allGood = true;
 
            $('.wish-like[record_id="' + index + '"]').each(function () {
              if ($(this).attr('record_id') === index && value === 1) {
                $(this).addClass('wish-unlike');
                $(this).removeClass('wish-like');
                $(this).attr('title', 'Retirer de ma liste');
                $(this).html('<i class="fa fas fa-trash fa-fw my-0 mx-3"></i><span class="fs-09 wish-text">Retirer de ma liste</span>');
              } else {
                allGood = false;
                $.notify({
                  icon: 'fas fa fa-exclamation-triangle',
                  message: "Impossible de sauvegarder cette notice !"
                }, {
                  type: 'custom',
                  newest_on_top: true,
                  delay: 1000
                });
              }
            });
 
            $('.wish-like-button[record_id="' + index + '"][data-wishlist-id="' + wishlist_id + '"]').each(function () {
              if ($(this).attr('record_id') === index && value === 1) {
                $(this).attr('class', 'wish-unlike-button');
                $(this).find('i.fa').attr('class', 'fa fas fa-check-square');
              } else {
                allGood = false;
                $.notify({
                  icon: 'fas fa fa-exclamation-triangle',
                  message: "Impossible de sauvegarder cette notice !"
                }, {
                  type: 'custom',
                  newest_on_top: true,
                  delay: 1000
                });
              }
            });
 
            if (allGood) {
              $('.wishlist-save[data-wishlist-id="' + wishlist_id + '"]').each(function () {
                $(this).addClass('wishlist-unsave').removeClass('wishlist-save');
                $(this).find('i.fa').attr('class', 'fa fas fa-check-square');
              });
 
              $('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1');
            }
          });
 
          $('.fa.fa-spinner-third.fa-spin.fas').attr('class', 'fa far fa-square');
 
          $.notify({
            icon: 'fas fa fa-plus-circle',
            message: "Ces documents ont été ajoutés à votre liste d'envies"
          }, {
            type: 'custom',
            newest_on_top: true,
            delay: 1000
          });
 
        } else {
          $.notify({
            icon: 'fas fa fa-times-circle-o',
            message: "Impossible d'ajouter ces documents à votre liste d'envies"
          }, {
            type: 'warning',
            newest_on_top: true,
            delay: 1000
          });
        }
      }
    });
  });

Et effectivement, à un moment, en ligne 76 on voit cette ligne :

Code javascript :

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

$('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1');

J'ai donc :
1. Téléchargé le fichier catalog.js appelé au clic sur le bouton a
2. Modifié la ligne en question, en ajoutant fa-heart ce qui donne :

Code javascript :

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

$('#add-wishlist-selection').find('i.fa').attr('class', 'wishlist-save-icon-minus wishlist-save-icon-new fas fa fa-bars fa-2x mt-n1 fa-heart');

3. Enregistré le fichier et l'ai renvoyé sur le serveur dans un autre dossier que celui d'origine (je n'ai pas la main sur le dossier d'origine, commun aux sites de tous nos clients, et c'est tant mieux parce que je ne veux pas intervenir sur tous nos sites, mais juste celui-ci)

Comme ce fichier catalog.js est appelé dans la page HTML, j'ai écrit un script pour remplacer l'URL du fichier d'origine par ma version :

Code javascript :

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

1
2
3
4
5
6
7
$(document).ready(function(){
    $('script[src="/vendors/xxxxxx/opac/js/catalog.js"]').each(function(){
        var oldUrl = $(this).attr("src");
        var newUrl = oldUrl.replace("/vendors/xxxxxx/opac/js/catalog.js", "https://nom-domaine-site-cliente.fr/data/nom-domaine-site-cliente.fr/application/layout/public/pageperso/catalog.js"); 
        $(this).attr("src", newUrl);
    });
});

Là encore, ça fonctionne bien, ça remplace bien l'URL du script dans le DOM.

Cependant, j'ai toujours mon problème. En effet, à l'évènement Click sur le bouton a, ça continue de pointer vers l'ancienne URL (la version originale du fichier JS).
Ma question est : comment faire pour que ça pointe maintenant vers le fichier que j'ai modifié ?
Sinon, autre solution : comment faire pour, qu'au clic sur le bouton a, la classe fa-heart soit ajoutée à l'icône, enfant du bouton a ?

J'espère que mes (longues) explications sont plus claires

Merci en tout cas, par avance, pour votre réponse.

Bonne journée

[SpaceFrog]

Pourquoi ne pas simplement mettre la nouvelle image avec l'ancien nom ?