While-loop with Javascript and JQuery UI failes

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?

im sure it would be possible, i would use a class for the trigger then use the septate id's for the element actions. — user557846
– user557846, Commented Sep 7, 2011 at 22:18

Clive · Accepted Answer · 2011-09-07 22:16:34Z

4

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;
  }
}

answered Sep 7, 2011 at 22:16

Clive

36.9k8 gold badges89 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michiel Over a year ago

Is it better to do it all in js?

Clive Over a year ago

Unless you need to add dynamic variables that are only available in PHP, yes it's better to put javascript in a .js file or between <script> tags

Michiel Over a year ago

In this case, it indeed needs dynamic variables! But thanks, you solved my problem!

Clive Over a year ago

Sorry by dynamic I meant variables that are only available on the server side, data from a database for example

Michiel Over a year ago

that's exactly what I meant. Data from my database is needed in the page.

Bassem · Accepted Answer · 2011-09-07 22:28:22Z

2

You could generate all of the above using only jQuery by linking all the dialogs using one class (which will become their selector) and link the openers with their respective dialogs as found in the example below:

http://jsfiddle.net/Awh7D/

Note: Better ways to link the openers with their respective dialogs can be developed.

answered Sep 7, 2011 at 22:28

Bassem

3,1752 gold badges28 silver badges41 bronze badges

Comments

BenMorel · Accepted Answer · 2013-12-08 13:02:15Z

2

At least in the first case you should be able to use "multiple selectors", like in

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

EDIT (after a "working break")

the second part, where you reference the object inside the function, should work like this:

$j( ".opener1, .opener2, .opener3" ).click(function() {
    $j(this).dialog( "open" );
    return false;
});

Sorry I can't simulate that right now, so it's a bit walking on thin ice - you will forgive me.

edited Dec 8, 2013 at 13:02

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Sep 7, 2011 at 22:19

MikeD

8,9412 gold badges32 silver badges50 bronze badges

3 Comments

Michiel Over a year ago

"At least in the first case"... Why not in the second? Good hint though!

Bassem Over a year ago

This method requires a certain amount of maintenance in the future and it's not generic to the point where he can add as many dialogs and openers as he wishes without worrying about modifying his selectors.

MikeD Over a year ago

@Link ... agree - +1 and upvote for my personal favourite amongst the jsfiddle examples ;)

rasata · Accepted Answer · 2011-09-07 22:22:26Z

0

I agree with Clive :

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

Should be :

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

answered Sep 7, 2011 at 22:22

rasata

4294 silver badges13 bronze badges

Comments

Saad Imran. · Accepted Answer · 2011-09-07 22:25:58Z

0

You could also share a class amongst the dialogs/openers. Here's a fiddle example

http://jsfiddle.net/ZbMcA/

answered Sep 7, 2011 at 22:25

Saad Imran.

4,5402 gold badges25 silver badges34 bronze badges

Collectives™ on Stack Overflow

While-loop with Javascript and JQuery UI failes

5 Answers 5

5 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related