PHP and JQuery deleting the right thing

Question

I am making little warning/alert boxes with PHP and JQuery, and I am having a little problem. My problem is, when I click close, the box doesnt stay closed, and it doesnt close the right box. If there is more than one alert, I want the boxes to stack up, and be on top of each other, so when you close the top one, the one that was before it shows up. At the moment when you close it, the box behind the one I'm trying to close closes, and it only closes for about 3 seconds(Then the page gets refreshed by JQuery and opens it again.) So I need a way to delete the box, but I can't do that without getting the id of the box. Here is the code I'm using.

<script>

function open_box()
{

    $("#box").show();

}

$(document).ready(function()
{

    $(".close").click(function()
    {


        $("#box").fadeOut("slow");
        //$("body").load("update_box");

    });

    $("#box").dblclick(function()
    {

        $("#box").effect("highlight");

    });

});

</script>
<style>
        .AlertTitle
        {

            font-size:2em;
            text-align:center;
            position:relative;
            top:-8px;

        }

        #box
        {

            background-color:#fefefe;
            border:2px solid #5556a7;
            border-radius:10px;
            width:50%;
            height:20%;
            position:fixed;
            z-index:1000;
            left:25%;
            padding-left:25px;
            padding-top:10px;
            top:30%;
            box-shadow:0px 0px 100px 2px grey;
            overflow-x:hidden;

        }

        .close
        {

            position:absolute;
            top:-2px;
            left:-1px;
            border:2px solid #5556a7;
            border-bottom-right-radius:10px;
            border-top-left-radius:10px;
            width:15px;
            height:19px;
            padding-top:2px;
            padding-left:2px;

        }

        .close:hover
        {

            font-weight:bold;

            cursor:pointer;

        }

    </style>
<?php

require("core.php");
$id = $user->user_id();
$query = mysql_query("SELECT * FROM `warnings` WHERE `user_id` = '$id' ORDER BY `id` ASC") or die(mysql_error());
while($row = mysql_fetch_assoc($query))
{

    ?>

    <script>

        open_box();

    </script>
    <div id="box"><?php echo $row["content"]; ?></div>
    <div class="close">X</div>
    <?php

}

?>

[**Please, don't use `mysql_*` functions in new code**](http://stackoverflow.com/q/12859942). They are no longer maintained [and are officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). See the [**red box**](http://uk.php.net/manual/en/function.mysql-connect.php)? Learn about [*prepared statements*](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you decide which. — Arnold Daniels, Jun 26 '14 at 05:41

Dev · Accepted Answer · 2014-06-26T10:53:36.753

0

You cannot use same id for more than one element

<div id="box"><?php echo $row["content"]; ?></div> is the culprit

use

<div class="box"><?php echo $row["content"]; ?></div>
    <div class="close">X</div>

change style to refer for .box instead of #box

Check this fiddle

edited Jun 26 '14 at 10:53

answered Jun 26 '14 at 05:37

Dev

6,628
2
25
34

I'm not sure how I could change that exactly, I use the id "box" for my style. – user3689853 Jun 26 '14 at 05:38
use class="box" and style it with that – Dev Jun 26 '14 at 05:40
also tou have to change jquery scripts to refer from the context of close button instead of fixed #box or .box – Dev Jun 26 '14 at 05:40
So when I use things such as $("#box") do I use them as $(".box") instead? Sorry if I'm bothering you, JQuery is not exactly my high point. – user3689853 Jun 26 '14 at 05:42
Please check the jsfiddle now i hope this is what you need – Dev Jun 26 '14 at 05:59
Yes it is exactly what I need, thank you. I figured out how to make them delete with Ajax. Thank you for all the help I have been stuck on this for quite some time. I know it says not to post comments like "thanks" but it just didn't feel right now thank you. – user3689853 Jun 26 '14 at 06:10

PHP and JQuery deleting the right thing

1 Answers1