Ciclo For capriccioso

[ercoli]

Grazie a quanti vorranno rispondermi.

Sono abbastanza a digiuno di js, anche se sto cercando di attrezzarmi.
Vi chiedo quindi scusa se pongo quesiti per qualcuno banali.

SCENARIO
In una pagina .php uso il "dialog" di JQuery ben 22 volte con altrettanti link diversi.
Per fare ciò ho fatto questo brevissimo script:

<?php
echo '<script type="text/javascript">
  
  $(function(){
  //Accordion
    $("#accordion").accordion({ autoHeight: false }, {header: "h2" });
  
  // Tabs
		$(\'#tabs\').tabs({ event: \'mouseover\' });
				
}); 
'; // echo end 

	for ($contatore = 1; $contatore <= 22; $contatore++) {
    $JQdialog = "#dialog-".$contatore;
    $JQdialogLink = "#dialog_link-".$contatore;
		echo '
				$(\''.$JQdialog.'\').dialog({
					autoOpen: false,
					width: 600,
					height: 400,
					buttons: {
						"chiudi": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				$(\''.$JQdialogLink.'\').click(function(){
					$(\''.$JQdialog.'\').dialog(\'open\');
					return false;
				});
				
        ';  // echo end
        }
        
echo '</script>';
?>

Per facilitarvi la lettura, questo è il risultato inviato al client (per comodità riporto solo le prime due interazioni del ciclo):

	// Dialog-1		
				$('#dialog-1').dialog({
					autoOpen: false,
					width: 600,
					height: 400,
					buttons: {
						"chiudi": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
		
	// Dialog Link-1
				$('#dialog_link-1').click(function(){
					$('#dialog-1').dialog('open');
					return false;
				});
				
	// Dialog-2	
				$('#dialog-2').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"chiudi": function() { 
							$(this).dialog("close"); 
						}
					}
				});
				
	// Dialog Link-2
				$('#dialog_link-2').click(function(){
					$('#dialog-2').dialog('open');
					return false;
				});

IL PROBLEMA
La stessa pagina con il ciclo non funziona; se invece scrivo per esteso - che schifo! - tutto il codice js funziona...

Dove sto sbagliando?

Un saluto a tutti.

[Vindav]

programmatore php vero? in js per concatenare 2 stringhe non si usa il carattere '.' ma il carattere '+'

[ercoli]

Ciao, grazie per avermi risposto.

Credo ti sia sfuggito che il codice js sta dentro un echo formulato in php...
Dunque l'append è corretto.

[Vindav]

oppss hai pienamente ragione, non l'avevo proprio notato credo che cmq il problema sta proprio li nel miscuglio che hai fatto tra php e js....

for ($contatore = 1; $contatore <= 22; $contatore++) {
    $JQdialog = "#dialog-".$contatore;
    $JQdialogLink = "#dialog_link-".$contatore;

Questa parte sta fuori dall'echo? come mai?

[bionicoz]

Ma scusa, perché non scrivere il ciclo direttamente in js? Inoltre ci sono errori nel php, degli apici singoli nell'echo non escaped. Insomma quel risultato non è prodotto da quel php.

[Vindav]

mmm si forse ho compreso cosa vuoi fare... quindi cio che ti scrive php sembrerebbe corretto pero non funziona? o è formalmente scorretto? hai verificato nella console di javascript se ci sono errori?

[Vindav]

Originariamente inviato da bionicoz
Ma scusa, perché non scrivere il ciclo direttamente in js?

esatto è cio che mi ha confuso in un primo momento... ma non ho capito se il problema è che non viene scritto un codice js formalmente corretto o qualche altro tipo di probelma, ercoli cerca di spiegare meglio questa tua affermazione:

La stessa pagina con il ciclo non funziona; se invece scrivo per esteso - che schifo! - tutto il codice js funziona...

Cosa intendi per "non funziona"?

[ercoli]

Scusate per il blackout. Ero fuori dall'ufficio.

Dunque ho provato a mettere il codice direttamente in js, eccolo:

<script type="text/javascript">
  
  $(function(){

  //Accordion 
    $("#accordion").accordion({ autoHeight: false }, {header: "h2" });
  
  // Tabs
	$('#tabs').tabs({ event: 'mouseover' });
		
  for (var contatore = 1; contatore <= 22; contatore++) {
  var JQdialog = "#dialog-" + contatore;
  var JQdialogLink = "#dialog_link-" + contatore;
  // Dialog			
  $(JQdialog).dialog({
    autoOpen: false,
    width: 600,
    height: 400,
    buttons: {
      "chiudi": function() { 
        $(this).dialog('close'); 
      } 
    }
  });
		
  // Dialog Link
  $(JQdialogLink).click(function(){
    $(JQdialog).dialog('open');
    return false;
  });
}
				
}); 
</script>

Qualche precisazione: $("#accordion") e $('#tabs') sono superflue per questa discussione; le riporto solo per perchè nel mio codice ci sono in quanto necessarie per altri effetti nella pagina.

L'effetto che vorrei ottenere (e che ottengo se ripeto per esteso il codice 22 volte) e il Dialog di jQuery. Per intenderci è possibile visualizzarne il risultato qui.
Quando dico che non funziona, semplicemente intendo che al clic non vengono aperti i relativi pop-up Dialog, come da esempio.

[Vindav]

mi dici perche vuoi utilizzare la stessa funzione per ben 22 volte? non è il metodo corretto di implementare la cosa, prova a spiegare cosa devi fare sicuramente si trova una soluzione alternativa.

In una pagina .php uso il "dialog" di JQuery ben 22 volte con altrettanti link diversi.

Per link cosa intendi? nella pagina avrai 22 bottoni e 22 div?

[ercoli]

Innanzitutto grazie Vindav di esserti preso la pena di seguire questa discussione.

Cosa devo fare
Ho un'immagine mappata in 22 punti. Ogni punto è un link cliccando il quale si apre un jQuery Dialog per fornire informazioni su quel punto cliccato.

Perchè ho scelto questa soluzione
Innanzitutto perchè usa jQuery e, usando io già per altri scopi questo framework nel sito, mi é comodo.
Inoltre lo trovo - dal lato utente - gradevole ed elegante. Infine, sigh!, non sono riuscito ad escogitare una soluzione diversa.