Discussion :

[foxbille]

Bonjour,
Pour une appli développée avec codeigniter
J'utilise un script jquery, que j'ai trouvé sur le web, pour ajouter dynamiquement des champs à un formulaire
Le script est appelé dans une view :

Code html :

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

<a href="javascript:void(0);" class="add_input_button" title="Add field"><img src="add-icon.png"/></a>

Il contient ceci :
(j'ai viré une bonne partie du code HTML de new_field_html, inutile pour la compréhension du pb)

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
$(document).ready(function(){
    var max_fields = 10;
    var add_input_button = $('.add_input_button');
    var field_wrapper = $('.field_wrapper');
    var new_field_html = '...<a href="javascript:void(0);" class="remove_input_button" title="Remove field"><img src="img/books_remove-icon.png"/></a>...';
    var input_count = 1;
    $(add_input_button).click(function(){
        if(input_count < max_fields){
            input_count++;
            $(field_wrapper).append(new_field_html);
        }
    });
    $(field_wrapper).on('click', '.remove_input_button', function(e){
        e.preventDefault();
        $(this).closest('#inputFormRow').remove();
        input_count--;
    });
});

En ce qui concerne la partie :

Code :

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

$(add_input_button).click(function(){

du code, je voudrais modifier le chemin d'accès à l'IMG parce que comme tel, elle ne s'affiche pas. Il faudrait que je puisse passer le chemin, depuis la view, au code JS
j'imagine qu'il faut modifier javascript:void(0); pour lui passer le paramètre "pathToImg"
Mais je ne sais pas comment faire et encore moins comment modifier le script pour récupérer le paramètre
Toute aide sera la bienvenue, sachant que je vais être honnête, je n'ai pas la moindre envie de me plonger dans la doc pour apprendre jquery car j'en ai une utilisation strictement limité à ce cas de figure et je manque cruellement de temps.
Merci

[Toufik83]

Bonjour,

Il me semble que vous n'êtes pas obligés d'utiliser un paramètre si c'est seulement pour corriger le chemin d'accès ou l'attribut src de l'image <img src="img/books_remove-icon.png"/>.

Il vous faut seulement utiliser un chemin relatif par rapport à la page dans laquelle le script jQuery est appelé.

[foxbille]

Non, ça ne marche pas trop... codeigniter offre d'ailleurs une fonction base_url('img/image.jpg') qui permet de s'assurer que l'élément graphique sera trouvé au bon endroit quel que soit le niveau du fichier dans lequel l'image est invoquée.
Du coup, comment passer la valeur de cette fonction au script JS ?

[fred1599]

Hello,

Ajoutez un attribut data-image-path qui contient le chemin de l'image généré par CodeIgniter. Assurez-vous d'avoir chargé le "URL helper" ($this->load->helper('url') dans votre contrôleur.

Code html :

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

1
2
3
4
<a href="javascript:void(0);" class="add_input_button" title="Add field" 
   data-image-path="<?= base_url('img/books_remove-icon.png')?>">
    <img src="add-icon.png"/>
</a>

Récupérez le chemin depuis l'attribut data-image-path et utilisez-le pour construire votre HTML.

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
$(document).ready(function(){
    var max_fields = 10;
    var add_input_button = $('.add_input_button');
    var field_wrapper = $('.field_wrapper');
    var input_count = 1;
 
 
    $(add_input_button).click(function(){
        if(input_count < max_fields){
            // Récupérez le chemin depuis l'attribut data du bouton sur lequel on a cliqué
            var imagePath = $(this).data('image-path');
 
 
            // Construisez le HTML en utilisant cette variable (j'utilise des template literals `...` pour plus de clarté)
            var new_field_html = `...<a href="javascript:void(0);" class="remove_input_button" title="Remove field"><img src="${imagePath}"/></a>...`;
 
            input_count++;
            $(field_wrapper).append(new_field_html);
        }
    });
 
 
    // Le reste de votre code reste inchangé
    $(field_wrapper).on('click', '.remove_input_button', function(e){
        e.preventDefault();
        $(this).closest('#inputFormRow').remove();
        input_count--;
    });
});

En résumé :

1. Vous "stockez" le chemin correct généré par PHP dans un attribut data- sur votre bouton.
2. Votre JavaScript lit cet attribut au moment du clic pour obtenir le chemin et construire le nouveau champ.

https://www.tutorialrepublic.com/faq...ing-jquery.php
https://api.jquery.com/data/

[foxbille]

Ca marche !!!
Merci beaucoup et merci pour les refs
Eric