CODEWITHSUNDEEP
phpjqueryloops
user3660449
user3660449

Reputation: 15

Creating dynamic buttons with dynamic php variable

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.

Upvotes: 0

Views: 104

Answers (4)

Pragnesh Karia
Pragnesh Karia

Reputation: 519

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.

Upvotes: 0

Vitthal
Vitthal

Reputation: 327

Try this:

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

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

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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

Upvotes: 2

Volkan Ulukut
Volkan Ulukut

Reputation: 4218

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

Upvotes: 0

Related Questions