Question

I use the JQuery UI Library and the Dialog function.

I would like to create more than one triggers inside my javascript.

This is my original JS:

$j(function() {
    $j( "#dialog1" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
    });
    $j( "#dialog2" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
    });
    ...

    $j( ".opener1" ).click(function() {
        $j( "#dialog1" ).dialog( "open" );
        return false;
    })
    $j( ".opener2" ).click(function() {
        $j( "#dialog2" ).dialog( "open" );
        return false;
    })
    ...
});

I need at least a dozen of those triggers. So, I though, let’s make a php While loop.
Something like this:

<?php
    $i = 1;
    while ($i <= 10) {
        echo '$j( "#dialog'.$i.'" ).dialog({
        autoOpen: false,
        show: "slide",
        hide: "explode"
        });';
    $i++;
    }

    $q = 1;
    while ($q <= 10) {
        echo '$j( ".opener'.$q.'" ).click(function() {
        $j( "#dialog1" ).dialog( "open" );
            return false;
        })';
    $q++;
    }?>

And for the first while, it’s all working just fine. It does the trick. But for the second while, the page just ignores the whole JS/PHP block…

What am I doing wrong?

Answer 1

This line in your second while loop:

$j( "#dialog1" ).dialog( "open" );

Should that not be:

$j( "#dialog' . $q . '" ).dialog( "open" );

At the moment all of your click handlers will open #dialog1 which I guess is not what you’re trying to do

You could do the whole thing in js though as suggested above:

for (var i=1;i<=10;i++) {
  $j('#dialog' + i).dialog({
    autoOpen: false,
    show: "slide",
    hide: "explode"
  });

  $j('.opener' + i).click(function() {
    $j( "#dialog" + i).dialog( "open" );
    return false;
  }
}