Question

I’m trying to create a notification system for my website, but am having problem for some unknown reason. I have a link when a user clicks it, it fire off a JavaScript function, then checks if a div is hidden, if it is hidden, it show it and load a PHP script within that div.

I probably overlooked something

my JavaScript code:

// show notifications
$(".noti_bubble").click(function () {
    // check the visibility of the element
    if($(".show-note").is(":hidden")) {
        $(".show-note").show();
        alert('noti_bubble has been perform');
        $(".show-note").load("scripts/notifications.php");
    }else{
        $(".show-note").hide();

    }

});

my html code:

<div style="width:900px; margin:0 auto;">
<div style="width:250px; float:right;">

<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<!-- slide down content goes here -->
<div id="notiHeading" class="notiHeadingContent">
<strong>Notifications</strong>
</div>

<div class="notif_barline"></div>

<div id="notifyContent">

<div class="show-note"></div>

</div>

</div>
</div>

</div>
</div>

the .show-note has a css of display:none; as well.

the clickable link:

<a href="#" id="dhtmlgoodies_control"  onclick="return false" onmousedown="javascript:slidedown_showHide('box1');" class="noti_bubble">(0)</a>

Answer 1

Add the complete callback to .load():

$(".show-note").load("scripts/notifications.php", function(response, status, xhr) {
    alert(status);
});