Creating dynamic buttons with dynamic php variable

Question

I am trying to make dynamic button thing where the selected section will enlarge when button is pressed.

.php

<?php
    while($row = $results->fetch())
    {
    ?>
        <section class="rss-container">
            <p class="rss-desc">
            <?php                                                                                    
                echo '<div class="dmitri" id="d'.$row['id_ilmoitus'].'">'.$row['popup'].'</div>';
                echo '<div class="vladmir" id="v'.$row['id_ilmoitus'].'">'.$row["teksti"].'</div>';                                                   
            ?>
            </p>    
            <br />
            <span class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>
        </section>
        <br />
    <?php
    }
?>

.jquery

$('.vladmir').hide();
    $('.rss-badge').click(function(){
    $('d'+ ? ).toggle();
    $('v'+ ? ).toggle();
});

I have no idea how to $row['id_ilmoitus] there. I tried to make it as variable but didnt work.

Sorry for being unclear.

Access the elements by the class not the id (dmitri and vladmir). — user2417483
– user2417483, Commented May 21, 2014 at 11:03
no id should be used because the button is supposed to enlarge only the appropriate section not all at once. — Volkan Ulukut
– Volkan Ulukut, Commented May 21, 2014 at 11:06

Satpal · Accepted Answer · 2014-05-21 11:08:01Z

2

I would suggest you to add idilmoitus as custom data-* attribute which you can access using .data()

HTML

<span data-idilmoitus="<?php echo $row['id_ilmoitus'] ?>" class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>

JQuery

$('.vladmir').hide();
$('.rss-badge').click(function(){
    var idilmoitus = $(this).data('idilmoitus');
    $('#d'+ idilmoitus ).toggle();
    $('#v'+ idilmoitus ).toggle();
});

Another way is to traverse DOM

$('.rss-badge').click(function(){
    var section = $(this).closest('.rss-container');
    $(section).find('.dmitri').toggle();
    $(section).find('.vladmir').toggle();
});

answered May 21, 2014 at 11:08

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

user3660449 Over a year ago

Yes this worked. I actually made this before but forgot to add #. Thanks!

Volkan Ulukut · Accepted Answer · 2014-05-21 11:04:19Z

0

you can use onclick and send the parameter to the function like this:

<span onclick="buttonClicked('<?php echo $row['id_ilmoitus'] ?>')" class="rss-badge more no-underline" id="button_<?php echo $row['id_ilmoitus'] ?>">Laajenna</span>

and javascript:

function buttonClicked(objId)
{
    $('d'+ objId ).toggle();
    $('v'+ objId ).toggle();
}

answered May 21, 2014 at 11:04

Volkan Ulukut

4,2281 gold badge24 silver badges40 bronze badges

Comments

Vitthal · Accepted Answer · 2014-05-21 11:16:11Z

0

Try this:

$('.rss-badge').click(function(){
    var attrib = $(this).attr( "id" );
    attrib = attrib.split('_')[1];

    $('#d' + attrib ).toggle();
    $('#v' + attrib ).toggle();
});

answered May 21, 2014 at 11:16

Vitthal

3271 silver badge13 bronze badges

Comments

Pragnesh Karia · Accepted Answer · 2014-05-21 12:03:21Z

This is working example, you will not need the ID as well, with CSS class only you can do all the operation.

@Fiddle : http://jsfiddle.net/pragneshkaria/AJ5xJ/

JQUERY

   $('.rss-badge').click(function (){
    //alert('hi');
    $('.rss-container').css( "background-color", "" );
    $('.dmitri').css( "background-color", "" );
    $('.vladmir').css( "background-color", "" );

    $(this).parent().css( "background-color", "green" );

    $(this).parent().children().next(".dmitri").css( "background-color", "yellow" );

     $(this).parent().children().next(".vladmir").css( "background-color", "blue" );
});

HTML

<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 1</div>
    <div class="vladmir" id="v1"> V 1</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 1</span>
</section>
<br />
<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 2</div>
    <div class="vladmir" id="v1">V 2</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 2</span>
</section>
<br />
<br />
<section class="rss-container">
<p class="rss-desc">                                                 
    <div class="dmitri" >D 3</div>
    <div class="vladmir" id="v1">V 3</div>                                                  
</p>
<br />
<span class="rss-badge more no-underline" id="button_1">Laajenna 3</span>
</section>
<br />

CSS

.rss-container{
    border:1px solid red;
}
.rss-badge{
    border:1px solid blue;
    cursor:pointer;
}
.dmitri{
    border:1px solid #ccc;
}
.vladmir{
    border:1px solid #ccc;
}

Hope this will help you. You can modify the code as per your need.

I have just added three static divs with different id.

Collectives™ on Stack Overflow

Creating dynamic buttons with dynamic php variable

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related