How to send ID from mysql to div using jquery?

Question

On my page a couple of messages are retrieved from the database. They are displayed using fetch_array. On the corner of every message a button is shown. This button contains the ID of the message. When it's clicked, a div will slide downwards from the top of the page, asking for a confirmation. If the yes-button is clicked, the message will be deleted. If the no-button is clicked, the div slides upwards, off canvas.

How can I send the ID from the message to the yes-button, so the right message will be deleted instead of all messages? I wrote this piece of code but this doesn't work.

<? while($result=mysqli_fetch_array($sql,MYSQLI_ASSOC)){ ?>
    <div class="memo_blok">
        <table width="100%">
            <tr>
                <td>
                    <font class="memo_blok_name"><? echo $result['name']; ?> |</font> 
                    <font class="memo_blok_date"><? echo $result['date']; ?></font>
                </td>
                <td width="20">
                    <img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
                </td>
            </tr>
        </table>
        <p class="memo_blok_TXT">
            <? echo $result['msg']; ?>
        </p>
    </div>
<? } ?>

<div id="confirm" class="confirm">
    <table width="100%">
        <tr>
            <td align="center">Are you sure?</td>
        </tr>
        <tr>
            <td align="center">
                <a href="memo_delete.php?id=1" class="noLine">
                    <img src="images/Yes.png" width="50" id="deleteYes" />
                </a>
                <img src="images/No.png" width="50" id="deleteNo" />
            </td>
        </tr>
    </table>
</div>

The CSS:

.confirm {
    width:100%;
    height:100px;
    position:fixed;
    top:-100px;
    left:0px;
    background-color:#3c3c3b;
    font-family: 'Abel', sans-serif;
    font-size:24px;
    color:#fefefe;
}

The script:

<script> 
$(document).ready(function(){
    $("#deleteBTN").click(function(){
        $("#confirm").animate({top: '0px'});
    });

    $("#deleteNee").click(function(){
        $("#confirm").animate({top: '-100px'});
    });
});

bbosternak · Accepted Answer · 2015-09-11 12:27:47Z

2

Change the close image:

<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />

To this so it will have a data-id attribute (also you can change than the id attribute to class and leave out the id number):

<img src="images/close.png" width="20" class="deleteBTN" data-id="<? echo $result['id']; ?>" />

Remove the value of href from a.noLine like this <a href="" class="noLine"> and in your javascript code then put the data attribute's value on the end of href attribute like this:

 $(".deleteBTN").click(function(){
     var msgId = $(this).data('id');
     $("#confirm").animate({top: '0px'});
     var $deleteBtn = $("#confirm").find('.noLine');
     $deleteBtn.attr('href','memo_delete.php?id='+msgId);
 });

edited Sep 11, 2015 at 12:27

answered Sep 11, 2015 at 12:06

bbosternak

3574 silver badges14 bronze badges

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

3 Comments

Jeffrey van Zwam Over a year ago

This does work, but just for the first message. The other messages don't work, it doesn't slide the div down when the delete button's clicked.

bbosternak Over a year ago

I have edited my answer, the problem was that the img id attribute was the same everywhere

Jeffrey van Zwam Over a year ago

Thank you, that did the trick! One detail: if the confirmation DIV is shown, and I click another close button, it adds the ID to the link. So delete.php?id=1 changes in delete.php?id=12 (1 + 2). Do you know a way to solve this?

Collectives™ on Stack Overflow

How to send ID from mysql to div using jquery?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related