CODEWITHSUNDEEP
javascriptphpcsstwitter-bootstrapbootstrap-notify
Lahmidi Mustapha
Lahmidi Mustapha

Reputation: 90

bootstrap-growl doesn't work inside a while loop

i'm facing right now a problem with bootstrap-growl plugin that i'm using to show notifications when a row is deleted or validated (i'm working on a blog) so inside the loop while the notifications don't show and when i put my two buttons (they trigger the notifications) outside the loop i can then see clearly my two notifications and everything goes as it's supposed to be. So technically speaking there's a certain conflict between this plugin and the loop. Have you ever faced this problem and please how can i get my notifications even if the two buttons are inside the loop ? Thanks in advance for your help :)

Here's the part where i'm using the plugin: 

<?php
$meinKommentare = controller_alleKommentareLesen();
if ($meinKommentare->rowCount() > 0) {
    while ($row = $meinKommentare->fetch(PDO::FETCH_ASSOC)) {
        extract($row);
?>
        <tr>
            <td><?php echo $kommentarDatum; ?></td>
            <td><?php echo $benutzerName; ?></td>
            <td></td>
            <td><?php echo $kommentarInhalt; ?></td>
            <td style="text-align: center">
                <button id="bestaetigungButton" class="btn btn-success btn-xs" onclick="kommentarBestaetigen();"> <i class="fa fa-check fa-2x" ></i></button>
                <button id="loeschungButton" class="btn btn-danger btn-xs" onclick="kommentarLoeschen();"> <i class="fa fa-trash-o fa-2x "></i></button>
            </td>
        </tr>
<?php
    }
}
?>

That's my Javascript code :

<script>
        $("#bestaetigungButton").click(function () {
            $.bootstrapGrowl("another message, yay!", {
                ele: 'body', // which element to append to
                type: 'info', // (null, 'info', 'error', 'success')
                offset: {from: 'top', amount: 20}, // 'top', or 'bottom'
                align: 'right', // ('left', 'right', or 'center')
                width: 250, // (integer, or 'auto')
                delay: 4000,
                allow_dismiss: true,
                stackup_spacing: 10 // spacing between consecutively stacked growls.
            });
        });
    </script>

PS:

When i take the two buttons outside the loop i don't make any change in my code

Upvotes: 0

Views: 286

Answers (1)

ThucVu
ThucVu

Reputation: 95

You put a button with an id="bestaetigungButton" in the loop. So that you will have so many buttons with the same id="bestaetigungButton". I think it'll work with the only first one when you click on. I suggest that you should use class="bestaetigungButton" instead of id, and change the js file a little bit like: $(".bestaetigungButton").click

Upvotes: 0

Related Questions