problems with $().click() when generating JavaScript code with a PHP loop

Question

Regards. I am generating an .click event for every element of my table using a php loop like this:

<?php foreach ($elements as $element){ ?>
    var element_id = <?= json_encode($element['element_id']));?>;

    $('#'+element_id+'_button').click(function() {
        $('#'+element_id+'_interval').toggle();
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
        }
        else{
            $(this).addClass('active');
        }
    });
    <?php }?>

the problem is, when $('#'+element_id+'_interval').toggle(); the element is not responding but it adds and removes the classes correctly, somebody help me please.

Woooo dude!! Mixing php with Javascript? That's new!! :D You can NOT do that! — Alvaro
– Alvaro, Commented Mar 15, 2013 at 17:11
PHP really has nothing to do with this. Post the rendered HTML please. — j08691
– j08691, Commented Mar 15, 2013 at 17:13
Not in the way he is trying to so so, unless he is trying to generate a .JS file on the fly... — Alvaro
– Alvaro, Commented Mar 15, 2013 at 17:13
@steve, yes you can use php to generate a html page which comtains the javascript that will be run once rendered. I see your confusion though. :) I use this method for complex google maps javascript. — karmafunk
– karmafunk, Commented Mar 15, 2013 at 17:15

cernunnos · Accepted Answer · 2013-03-15 17:18:22Z

3

Use a class, makes your code a lot cleaner, however if you have to do it this way you should know that your element_id variable is constantly being rewritten.

Try something like:

<button class="toggler" data-target="#interval_1"></button>

$(".toggler").click(function (ev) {
    ev.preventDefault();
    var target = $(this).data("target"); // would return #interval_1
    $(target).toggle();

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
});

answered Mar 15, 2013 at 17:18

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

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

Comments

Pierre de LESPINAY · Accepted Answer · 2013-03-15 17:16:07Z

0

I would advise you to firstly separate your php from your javascript.
Otherwise (between other) it will be difficult to maintain.

As a start, you could do the loop with javascript

answered Mar 15, 2013 at 17:16

Pierre de LESPINAY

46.5k62 gold badges222 silver badges318 bronze badges

2 Comments

Ray_Poly Over a year ago

I have 352 elements so far and is going to get bigger, I need to do this with a php loop.

Pierre de LESPINAY Over a year ago

Actually you should not need to loop at all, look at @cernunnos answer

JB13 · Accepted Answer · 2013-03-15 17:20:08Z

0

Put the binding events into a seperate method, and call the method in your document.ready script:

 $(document).ready(function() {
      bindBtns();
});

function bindBtns()
{
    <?php foreach ($elements as $element){ ?>
    var element_id = <?= json_encode($element['element_id']));?>;

    $('#'+element_id+'_button').click(function() {
        $('#'+element_id+'_interval').toggle();
        if ($(this).hasClass('active')){
            $(this).removeClass('active');
        }
        else{
            $(this).addClass('active');
        }
     });
     <?php }?>
}

answered Mar 15, 2013 at 17:20

JB13

964 bronze badges

2 Comments

Ray_Poly Over a year ago

I have my loop in .ready() is working fine, .click executes for every element separately but is not toggling if that is a word

JB13 Over a year ago

Can you post the html output of 2-3 buttons including the objects you are looking to toggle

Collectives™ on Stack Overflow

problems with $().click() when generating JavaScript code with a PHP loop

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related