Une boucle javascript à rédiger

18 juin 2021, 10:12

Bonjour à tous,
je suis développeur PHP, mais pas forcément très à l'aise avec le javascript.
J'utilise un bout de script que j'ai trouvé sur un site et que j'ai adapté à ma sauce pour le chargement d'images dans un module d'admin.

Pour le chargement d'une image, ça donne :

Code : Tout sélectionner

    <script>
        function openCustomRoxy(){
          $('#roxyCustomPanel').dialog({modal:true, width:875,height:600});
        }
        function closeCustomRoxy(){
          $('#roxyCustomPanel').dialog('close');
        }
    </script>

Mais parfois, je dois charger plus d'une image, donc je l'ai adapté simplement ainsi :

Code : Tout sélectionner

    <script>
        function openCustomRoxy1(){
          $('#roxyCustomPanel1').dialog({modal:true, width:875,height:600});
        }
        function closeCustomRoxy1(){
          $('#roxyCustomPanel1').dialog('close');
        }
        function openCustomRoxy2(){
          $('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
        }
        function closeCustomRoxy2(){
          $('#roxyCustomPanel2').dialog('close');
        }
        function openCustomRoxy3(){
          $('#roxyCustomPanel3').dialog({modal:true, width:875,height:600});
        }
        function closeCustomRoxy3(){
          $('#roxyCustomPanel3').dialog('close');
        }
        function openCustomRoxy4(){
          $('#roxyCustomPanel4').dialog({modal:true, width:875,height:600});
        }
        function closeCustomRoxy4(){
          $('#roxyCustomPanel4').dialog('close');
        }
    </script>

C'est nul et répétitif, mais ça marche.

Sauf que j'aimerais l'optimiser, d'autant que avec 4 images, c'est encore supportable, mais si je passe à 12, c'est carrément chiant.

Dans l'idée, je cherche à faire :

Code : Tout sélectionner

for (var j = 0; j <= 9; j++) {
	function openCustomRoxy(j){
	  $('#roxyCustomPanel' + j).dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy(j){
	  $('#roxyCustomPanel' + j).dialog('close');
	}
}

ou

Code : Tout sélectionner

for (var j = 0; j <= 9; j++) {
	function openCustomRoxy.j(){
	  $('#roxyCustomPanel' + j).dialog({modal:true, width:875,height:600});
	}
	function closeCustomRoxy.j(){
	  $('#roxyCustomPanel' + j).dialog('close');
	}
}

mais cela ne fonctionne pas car je dois buter sur la syntaxe et ce n'est pas rigoureusement équivalent...

Si vous pouviez m'aider...

merci

18 juin 2021, 12:59

Il faut que tu utilises les outils de développement intégré dans les navigateurs pour pouvoir voir les erreurs javascript et faire ton debugage.
Ctrl+Maj+K sous Firefox ou Chrome pour ouvrir la Console du navigateur

18 juin 2021, 15:52

je ne comprends pas...
j'ai modifié un peu ma boucle :

Code : Tout sélectionner

    <script>
        for (let j = 0; j <= 9; j++)
        {
            function openCustomRoxy.j()
            {
                $('#roxyCustomPanel' + j).dialog({modal:true, width:875,height:600});
            }
            function closeCustomRoxy.j()
            {
                $('#roxyCustomPanel' + j).dialog('close');
            }
        }
    </script>

Mais déjà je crois que ce que j'ai mis dans ma boucle ne s'affiche pas réellement, donc ça n'est pas équivalent...
et de plus je n'arrive pas à concaténer :
function openCustomRoxy.j()
en
function openCustomRoxy1()
function openCustomRoxy2()
ect...

je sens bien que ce n'est pas la bonne façon de faire.

J'ai essayé de regarder dans la console, mais je ne sais pas comment m'en servir pour les erreurs javascript.
En tout cas, dans le code, ce que j'ai saisie n'est pas interpreté, comme cela peut être le cas du php...

18 juin 2021, 16:00

function openCustomRoxy( j ){
}
openCustomRoxy(1);
openCustomRoxy(4);
est une meilleure base de départ.

18 juin 2021, 16:22

non... quand je fais ça mon script ne fonctionne plus du tout...
mais ça ne m’étonne pas...
cela vient de ce script : https://roxyfileman.com/demo
et ce bout de code n'est qu'une partie d'un ensemble... donc le changement de nommage a des répercutions plus profondes.
Non, il faut que je reste sur ce modèle :

Code : Tout sélectionner

<script>
function openCustomRoxy1(){
$('#roxyCustomPanel1').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy1(){
$('#roxyCustomPanel1').dialog('close');
}
function openCustomRoxy2(){
$('#roxyCustomPanel2').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy2(){
$('#roxyCustomPanel2').dialog('close');
}
function openCustomRoxy3(){
$('#roxyCustomPanel3').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy3(){
$('#roxyCustomPanel3').dialog('close');
}
function openCustomRoxy4(){
$('#roxyCustomPanel4').dialog({modal:true, width:875,height:600});
}
function closeCustomRoxy4(){
$('#roxyCustomPanel4').dialog('close');
}
</script>

et que j'essaie juste de trouver une façon de le ré-écrire sous la forme d'une boucle

18 juin 2021, 18:15

Non, nommer les mêmes fonctions différemment, c'est une usine à gaz à éviter et difficilement maintenable.
Je plussoie la réponse de Or1, il faut que tu utilises les paramètres pour faire cela proprement.

Quand tu dis "ça ne marche pas", il faut que tu regardes dans la console JS pour savoir quel est l'erreur et debuguer

21 juin 2021, 17:16

Bonjour,

Effectivement c'est une mauvaise idée de dupliquer les fonctions.
J'ai juste repris l'exemple que tu nous a linké pour te donner un aperçu de ce qui peut être fait

<a href="javascript:openCustomRoxy(0)">
  <img src="https://roxyfileman.com/fileman/Uploads/national-geographic-1.jpg" id="customRoxyImage0" style="max-width:650px;">
</a>
<div id="roxyCustomPanel0" style="display: none;">
  <iframe src="/fileman/index.html?integration=custom" style="width:100%;height:100%" frameborder="0"></iframe>
</div>

<a href="javascript:openCustomRoxy(1)">
  <img src="https://roxyfileman.com/fileman/Uploads/national-geographic-1.jpg" id="customRoxyImage1" style="max-width:650px;">
</a>
<div id="roxyCustomPanel1" style="display: none;">
  <iframe src="/fileman/index.html?integration=custom" style="width:100%;height:100%" frameborder="0"></iframe>
</div>

<script>
function openCustomRoxy(j) { 
   $("#roxyCustomPanel" + j).dialog({modal:true, width:875,height:600});
}

function closeCustomRoxy(j) {
	$('#roxyCustomPanel' + j).dialog('close');
}
</script>

22 juin 2021, 12:16

Merci pour ta réponse Naroth
Je vais tenter de décortiquer cela et de voir où cela bloque. Parce que j'ai déjà tenté ça et le script ne marche plus. Alors je sais, "ça marche pas" ça veut rien dire... mais le fait est que comme je n'ai pas compris pour l'instant ce qui faisait bloquer le script, j'en reste à dans mon analyse.
Vous avez parlé plus haut de la console, je m'en sers très souvent avec le clic droit >> "inspecter" mais dans mon cas c'est pour le HTML et le CSS.
Je ne sais pas trop comment m'en servir pour le javascript.
j'ai bien compris que ça se trouvait dans l'onglet "console", et d'ailleurs je vois d'autres erreurs...
Mais ensuite il faudra que je comprenne comment m'en servir dans mon cas précis. Je vous solliciterai peut etre quand j'en serai là.
merci de votre aide !

22 juin 2021, 12:53

Pour la console

Quand dans un script JS tu écris
console.log("toto")

Ce "toto" est alors écrit dans l'onglet "console"

Pour ce qui est de ton erreur elle doit sûrement être dans les erreurs que tu vois apparaître

Une boucle javascript à rédiger

Qui est en ligne